chore(docs): remove incorrect # or ~ prefix in calendar view
| Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 7.9 KiB | 
| Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 7.3 KiB | 
| Before Width: | Height: | Size: 7.9 KiB | 
| Before Width: | Height: | Size: 7.3 KiB | 
| Before Width: | Height: | Size: 7.3 KiB | 
| Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 2.2 KiB | 
| Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 2.3 KiB | 
| Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 9.1 KiB | 
| Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 56 KiB | 
| Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 4.6 KiB | 
| @@ -30,7 +30,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac | |||||||
| ## Interacting with events | ## Interacting with events | ||||||
|  |  | ||||||
| *   Hovering the mouse over an event will display information about the note.   | *   Hovering the mouse over an event will display information about the note.   | ||||||
|      |      | ||||||
| *   Left clicking the event will go to that note. Middle clicking will open the note in a new tab and right click will offer more options including opening the note in a new split or window. | *   Left clicking the event will go to that note. Middle clicking will open the note in a new tab and right click will offer more options including opening the note in a new split or window. | ||||||
| *   Drag and drop an event on the calendar to move it to another day. | *   Drag and drop an event on the calendar to move it to another day. | ||||||
| *   The length of an event can be changed by placing the mouse to the right edge of the event and dragging the mouse around. | *   The length of an event can be changed by placing the mouse to the right edge of the event and dragging the mouse around. | ||||||
| @@ -56,8 +56,8 @@ For each note of the calendar, the following attributes can be used: | |||||||
| | `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. | | | `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. | | ||||||
| | `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. | | | `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. | | ||||||
| | `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. | | | `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. | | ||||||
| | `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, either a label (e.g. `#assignee`) or a relation (e.g. `~for`). See _Advanced use-cases_ for more information. | | | `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. | | ||||||
| | `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:    <br>  <br>   <br>  <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`  <br>  <br>It can also be used with relations, case in which it will display the title of the target note:   <br>  <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` | | | `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:     <br>  <br>    <br>  <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`   <br>  <br>It can also be used with relations, case in which it will display the title of the target note:    <br>  <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` | | ||||||
| | `#calendar:startDate` | Allows using a different label to represent the start date, other than `startDate` (e.g. `expiryDate`). The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. | | | `#calendar:startDate` | Allows using a different label to represent the start date, other than `startDate` (e.g. `expiryDate`). The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. | | ||||||
| | `#calendar:endDate` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end date. | | | `#calendar:endDate` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end date. | | ||||||
| | `#calendar:startTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the start time. | | | `#calendar:startTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the start time. | | ||||||
| @@ -65,7 +65,7 @@ For each note of the calendar, the following attributes can be used: | |||||||
|  |  | ||||||
| ## How the calendar works | ## How the calendar works | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| The calendar displays all the child notes of the book that have a `#startDate`. An `#endDate` can optionally be added. | The calendar displays all the child notes of the book that have a `#startDate`. An `#endDate` can optionally be added. | ||||||
|  |  | ||||||
| @@ -79,7 +79,7 @@ If editing the start date and end date from the note itself is desirable, the fo | |||||||
|  |  | ||||||
| This will result in: | This will result in: | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| When not used in a Journal, the calendar is recursive. That is, it will look for events not just in its child notes but also in the children of these child notes. | When not used in a Journal, the calendar is recursive. That is, it will look for events not just in its child notes but also in the children of these child notes. | ||||||
|  |  | ||||||
| @@ -96,30 +96,28 @@ Based on the `#calendarRoot` (or `#workspaceCalendarRoot`) attribute, the calend | |||||||
| *   Clicking on the empty space on a date will automatically open that day's note or create it if it does not exist. | *   Clicking on the empty space on a date will automatically open that day's note or create it if it does not exist. | ||||||
| *   Direct children of a day note will be displayed on the calendar despite not having a `dateNote` attribute. Children of the child notes will not be displayed. | *   Direct children of a day note will be displayed on the calendar despite not having a `dateNote` attribute. Children of the child notes will not be displayed. | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| ### Using a different attribute as event title | ### Using a different attribute as event title | ||||||
|  |  | ||||||
| By default, events are displayed on the calendar by their note title. However, it is possible to configure a different attribute to be displayed instead. | By default, events are displayed on the calendar by their note title. However, it is possible to configure a different attribute to be displayed instead. | ||||||
|  |  | ||||||
| To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `#name` where `name` can be any label. The attribute can also come through inheritance such as a template attribute. If the note does not have the requested label, the title of the note will be used instead. | To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `name` where `name` can be any label (make not to add the `#` prefix). The attribute can also come through inheritance such as a template attribute. If the note does not have the requested label, the title of the note will be used instead. | ||||||
|  |  | ||||||
| |     |     | | <div class="joplin-table-wrapper"><table><thead><tr><th> </th><th> </th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre></td><td><img src="5_Calendar View_image.png"></td></tr></tbody></table></div> | ||||||
| | --- | --- | |  | ||||||
| |  |  | |  | ||||||
|  |  | ||||||
| ### Using a relation attribute as event title | ### Using a relation attribute as event title | ||||||
|  |  | ||||||
| Similarly to using an attribute, use `#calendar:title` and set it to `~name` where `name` is the name of the relation to use. | Similarly to using an attribute, use `#calendar:title` and set it to `name` where `name` is the name of the relation to use. | ||||||
|  |  | ||||||
| Moreover, if there are more relations of the same name, they will be displayed as multiple events coming from the same note. | Moreover, if there are more relations of the same name, they will be displayed as multiple events coming from the same note. | ||||||
|  |  | ||||||
| |     |     | | |     |     | | ||||||
| | --- | --- | | | --- | --- | | ||||||
| |  |  | | | `#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"` |  | | ||||||
|  |  | ||||||
| Note that it's even possible to have a `#calendar:title` on the target note (e.g. “John Smith”) which will try to render an attribute of it. Note that it's not possible to use a relation here as well for safety reasons (an accidental recursion  of attributes could cause the application to loop infinitely). | Note that it's even possible to have a `#calendar:title` on the target note (e.g. “John Smith”) which will try to render an attribute of it. Note that it's not possible to use a relation here as well for safety reasons (an accidental recursion  of attributes could cause the application to loop infinitely). | ||||||
|  |  | ||||||
| |     |     | | |     |     | | ||||||
| | --- | --- | | | --- | --- | | ||||||
| |  |  | | | `#calendar:title="shortName" #shortName="John S."` |  | | ||||||
| Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 7.9 KiB | 
| Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 7.3 KiB | 
| Before Width: | Height: | Size: 7.9 KiB | 
| Before Width: | Height: | Size: 7.3 KiB | 
| Before Width: | Height: | Size: 7.3 KiB | 
| Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 2.2 KiB | 
| Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 2.3 KiB | 
| Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 9.1 KiB | 
| Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 56 KiB | 
| Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 4.6 KiB | 
| @@ -82,7 +82,7 @@ | |||||||
|         <ul> |         <ul> | ||||||
|           <li>Hovering the mouse over an event will display information about the note. |           <li>Hovering the mouse over an event will display information about the note. | ||||||
|             <br> |             <br> | ||||||
|             <img src="9_Calendar View_image.png"> |             <img src="7_Calendar View_image.png"> | ||||||
|           </li> |           </li> | ||||||
|           <li>Left clicking the event will go to that note. Middle clicking will open |           <li>Left clicking the event will go to that note. Middle clicking will open | ||||||
|             the note in a new tab and right click will offer more options including |             the note in a new tab and right click will offer more options including | ||||||
| @@ -93,53 +93,55 @@ | |||||||
|         </ul> |         </ul> | ||||||
|         <h2>Configuring the calendar</h2> |         <h2>Configuring the calendar</h2> | ||||||
|         <p>The following attributes can be added to the book type:</p> |         <p>The following attributes can be added to the book type:</p> | ||||||
|         <figure class="table"> |         <div> | ||||||
|           <table> |           <figure class="table"> | ||||||
|             <thead> |             <table> | ||||||
|               <tr> |               <thead> | ||||||
|                 <th>Name</th> |                 <tr> | ||||||
|                 <th>Description</th> |                   <th>Name</th> | ||||||
|               </tr> |                   <th>Description</th> | ||||||
|             </thead> |                 </tr> | ||||||
|             <tbody> |               </thead> | ||||||
|               <tr> |               <tbody> | ||||||
|                 <td><code>#calendar:hideWeekends</code> |                 <tr> | ||||||
|                 </td> |                   <td><code>#calendar:hideWeekends</code> | ||||||
|                 <td>When present (regardless of value), it will hide Saturday and Sundays |                   </td> | ||||||
|                   from the calendar.</td> |                   <td>When present (regardless of value), it will hide Saturday and Sundays | ||||||
|               </tr> |                     from the calendar.</td> | ||||||
|               <tr> |                 </tr> | ||||||
|                 <td><code>#calendar:weekNumbers</code> |                 <tr> | ||||||
|                 </td> |                   <td><code>#calendar:weekNumbers</code> | ||||||
|                 <td>When present (regardless of value), it will show the number of the week |                   </td> | ||||||
|                   on the calendar.</td> |                   <td>When present (regardless of value), it will show the number of the week | ||||||
|               </tr> |                     on the calendar.</td> | ||||||
|               <tr> |                 </tr> | ||||||
|                 <td><code>#calendar:view</code> |                 <tr> | ||||||
|                 </td> |                   <td><code>#calendar:view</code> | ||||||
|                 <td> |                   </td> | ||||||
|                   <p>Which view to display in the calendar:</p> |                   <td> | ||||||
|                   <ul> |                     <p>Which view to display in the calendar:</p> | ||||||
|                     <li><code>timeGridWeek</code> for the <em>week</em> view;</li> |                     <ul> | ||||||
|                     <li><code>dayGridMonth</code> for the <em>month</em> view;</li> |                       <li><code>timeGridWeek</code> for the <em>week</em> view;</li> | ||||||
|                     <li><code>multiMonthYear</code> for the <em>year</em> view;</li> |                       <li><code>dayGridMonth</code> for the <em>month</em> view;</li> | ||||||
|                     <li><code>listMonth</code> for the <em>list</em> view.</li> |                       <li><code>multiMonthYear</code> for the <em>year</em> view;</li> | ||||||
|                   </ul> |                       <li><code>listMonth</code> for the <em>list</em> view.</li> | ||||||
|                   <p>Any other value will be dismissed and the default view (month) will be |                     </ul> | ||||||
|                     used instead.</p> |                     <p>Any other value will be dismissed and the default view (month) will be | ||||||
|                   <p>The value of this label is automatically updated when changing the view |                       used instead.</p> | ||||||
|                     using the UI buttons.</p> |                     <p>The value of this label is automatically updated when changing the view | ||||||
|                 </td> |                       using the UI buttons.</p> | ||||||
|               </tr> |                   </td> | ||||||
|               <tr> |                 </tr> | ||||||
|                 <td><code>~child:template</code> |                 <tr> | ||||||
|                 </td> |                   <td><code>~child:template</code> | ||||||
|                 <td>Defines the template for newly created notes in the calendar (via dragging |                   </td> | ||||||
|                   or clicking).</td> |                   <td>Defines the template for newly created notes in the calendar (via dragging | ||||||
|               </tr> |                     or clicking).</td> | ||||||
|             </tbody> |                 </tr> | ||||||
|           </table> |               </tbody> | ||||||
|         </figure> |             </table> | ||||||
|  |           </figure> | ||||||
|  |         </div> | ||||||
|         <p>In addition, the first day of the week can be either Sunday or Monday |         <p>In addition, the first day of the week can be either Sunday or Monday | ||||||
|           and can be adjusted from the application settings.</p> |           and can be adjusted from the application settings.</p> | ||||||
|         <h2>Configuring the calendar events</h2> |         <h2>Configuring the calendar events</h2> | ||||||
| @@ -204,22 +206,22 @@ | |||||||
|                 <td><code>#calendar:title</code> |                 <td><code>#calendar:title</code> | ||||||
|                 </td> |                 </td> | ||||||
|                 <td>Changes the title of an event to point to an attribute of the note other |                 <td>Changes the title of an event to point to an attribute of the note other | ||||||
|                   than the title, either a label (e.g. <code>#assignee</code>) or a relation |                   than the title, can either a label or a relation (without the <code>#</code> or <code>~</code> symbol). | ||||||
|                   (e.g. <code>~for</code>). See <em>Advanced use-cases</em> for more information.</td> |                   See <em>Use-cases</em> for more information.</td> | ||||||
|               </tr> |               </tr> | ||||||
|               <tr> |               <tr> | ||||||
|                 <td><code>#calendar:displayedAttributes</code> |                 <td><code>#calendar:displayedAttributes</code> | ||||||
|                 </td> |                 </td> | ||||||
|                 <td>Allows displaying the value of one or more attributes in the calendar |                 <td>Allows displaying the value of one or more attributes in the calendar | ||||||
|                   like this:   |                   like this:    | ||||||
|                   <br> |                   <br> | ||||||
|                   <br> |                   <br> | ||||||
|                   <img src="11_Calendar View_image.png">  |                   <img src="9_Calendar View_image.png">  | ||||||
|                   <br> |                   <br> | ||||||
|                   <br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code> |                   <br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>  | ||||||
|                   <br> |                   <br> | ||||||
|                   <br>It can also be used with relations, case in which it will display the |                   <br>It can also be used with relations, case in which it will display the | ||||||
|                   title of the target note:  |                   title of the target note:   | ||||||
|                   <br> |                   <br> | ||||||
|                   <br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code> |                   <br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code> | ||||||
|                 </td> |                 </td> | ||||||
| @@ -254,7 +256,7 @@ | |||||||
|           </figure> |           </figure> | ||||||
|           <h2>How the calendar works</h2> |           <h2>How the calendar works</h2> | ||||||
|           <p> |           <p> | ||||||
|             <img src="14_Calendar View_image.png"> |             <img src="11_Calendar View_image.png"> | ||||||
|           </p> |           </p> | ||||||
|           <p>The calendar displays all the child notes of the book that have a <code>#startDate</code>. |           <p>The calendar displays all the child notes of the book that have a <code>#startDate</code>. | ||||||
|             An <code>#endDate</code> can optionally be added.</p> |             An <code>#endDate</code> can optionally be added.</p> | ||||||
| @@ -264,7 +266,7 @@ | |||||||
| #hidePromotedAttributes </code></pre> | #hidePromotedAttributes </code></pre> | ||||||
|           <p>This will result in:</p> |           <p>This will result in:</p> | ||||||
|           <p> |           <p> | ||||||
|             <img src="12_Calendar View_image.png"> |             <img src="10_Calendar View_image.png"> | ||||||
|           </p> |           </p> | ||||||
|           <p>When not used in a Journal, the calendar is recursive. That is, it will |           <p>When not used in a Journal, the calendar is recursive. That is, it will | ||||||
|             look for events not just in its child notes but also in the children of |             look for events not just in its child notes but also in the children of | ||||||
| @@ -289,18 +291,19 @@ | |||||||
|               will not be displayed.</li> |               will not be displayed.</li> | ||||||
|           </ul> |           </ul> | ||||||
|           <p> |           <p> | ||||||
|             <img src="10_Calendar View_image.png"> |             <img src="8_Calendar View_image.png"> | ||||||
|           </p> |           </p> | ||||||
|           <h3>Using a different attribute as event title</h3> |           <h3>Using a different attribute as event title</h3> | ||||||
|           <p>By default, events are displayed on the calendar by their note title. |           <p>By default, events are displayed on the calendar by their note title. | ||||||
|             However, it is possible to configure a different attribute to be displayed |             However, it is possible to configure a different attribute to be displayed | ||||||
|             instead.</p> |             instead.</p> | ||||||
|           <p>To do so, assign <code>#calendar:title</code> to the child note (not the |           <p>To do so, assign <code>#calendar:title</code> to the child note (not the | ||||||
|             calendar/book note), with the value being <code>#name</code> where <code>name</code> can |             calendar/book note), with the value being <code>name</code> where <code>name</code> can | ||||||
|             be any label. The attribute can also come through inheritance such as a |             be any label (make not to add the <code>#</code> prefix). The attribute can | ||||||
|             template attribute. If the note does not have the requested label, the |             also come through inheritance such as a template attribute. If the note | ||||||
|             title of the note will be used instead.</p> |             does not have the requested label, the title of the note will be used instead.</p> | ||||||
|           <figure class="table"> |           <figure | ||||||
|  |           class="table"> | ||||||
|             <table> |             <table> | ||||||
|               <thead> |               <thead> | ||||||
|                 <tr> |                 <tr> | ||||||
| @@ -310,67 +313,64 @@ | |||||||
|               </thead> |               </thead> | ||||||
|               <tbody> |               <tbody> | ||||||
|                 <tr> |                 <tr> | ||||||
|  |                   <td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre> | ||||||
|  |                   </td> | ||||||
|                   <td> |                   <td> | ||||||
|                     <img src="5_Calendar View_image.png"> |                     <img src="5_Calendar View_image.png"> | ||||||
|                   </td> |                   </td> | ||||||
|                   <td> |  | ||||||
|                     <img src="7_Calendar View_image.png"> |  | ||||||
|                   </td> |  | ||||||
|                 </tr> |                 </tr> | ||||||
|               </tbody> |               </tbody> | ||||||
|             </table> |             </table> | ||||||
|           </figure> |             </figure> | ||||||
|           <h3>Using a relation attribute as event title</h3> |             <h3>Using a relation attribute as event title</h3> | ||||||
|           <p>Similarly to using an attribute, use <code>#calendar:title</code> and set |             <p>Similarly to using an attribute, use <code>#calendar:title</code> and set | ||||||
|             it to <code>~name</code> where <code>name</code> is the name of the relation |               it to <code>name</code> where <code>name</code> is the name of the relation | ||||||
|             to use.</p> |               to use.</p> | ||||||
|           <p>Moreover, if there are more relations of the same name, they will be displayed |             <p>Moreover, if there are more relations of the same name, they will be displayed | ||||||
|             as multiple events coming from the same note.</p> |               as multiple events coming from the same note.</p> | ||||||
|           <figure class="table"> |             <figure class="table"> | ||||||
|             <table> |               <table> | ||||||
|               <thead> |                 <thead> | ||||||
|                 <tr> |                   <tr> | ||||||
|                   <th> </th> |                     <th> </th> | ||||||
|                   <th> </th> |                     <th> </th> | ||||||
|                 </tr> |                   </tr> | ||||||
|               </thead> |                 </thead> | ||||||
|               <tbody> |                 <tbody> | ||||||
|                 <tr> |                   <tr> | ||||||
|                   <td> |                     <td><code>#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code> | ||||||
|                     <img src="6_Calendar View_image.png"> |                     </td> | ||||||
|                   </td> |                     <td> | ||||||
|                   <td> |                       <img src="6_Calendar View_image.png"> | ||||||
|                     <img src="8_Calendar View_image.png"> |                     </td> | ||||||
|                   </td> |                   </tr> | ||||||
|                 </tr> |                 </tbody> | ||||||
|               </tbody> |               </table> | ||||||
|             </table> |             </figure> | ||||||
|           </figure> |             <p>Note that it's even possible to have a <code>#calendar:title</code> on the | ||||||
|           <p>Note that it's even possible to have a <code>#calendar:title</code> on the |               target note (e.g. “John Smith”) which will try to render an attribute of | ||||||
|             target note (e.g. “John Smith”) which will try to render an attribute of |               it. Note that it's not possible to use a relation here as well for safety | ||||||
|             it. Note that it's not possible to use a relation here as well for safety |               reasons (an accidental recursion  of attributes could cause the application | ||||||
|             reasons (an accidental recursion  of attributes could cause the application |               to loop infinitely).</p> | ||||||
|             to loop infinitely).</p> |             <figure class="table"> | ||||||
|           <figure class="table"> |               <table> | ||||||
|             <table> |                 <thead> | ||||||
|               <thead> |                   <tr> | ||||||
|                 <tr> |                     <th> </th> | ||||||
|                   <th> </th> |                     <th> </th> | ||||||
|                   <th> </th> |                   </tr> | ||||||
|                 </tr> |                 </thead> | ||||||
|               </thead> |                 <tbody> | ||||||
|               <tbody> |                   <tr> | ||||||
|                 <tr> |                     <td><code>#calendar:title="shortName" #shortName="John S."</code> | ||||||
|                   <td> |                     </td> | ||||||
|                     <img src="13_Calendar View_image.png"> |                     <td> | ||||||
|                   </td> |                       <img src="1_Calendar View_image.png"> | ||||||
|                   <td> |                     </td> | ||||||
|                     <img src="1_Calendar View_image.png"> |                   </tr> | ||||||
|                   </td> |                 </tbody> | ||||||
|                 </tr> |               </table> | ||||||
|               </tbody> |             </figure> | ||||||
|             </table> |  | ||||||
|           </figure> |  | ||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
|   </body> |   </body> | ||||||
|   | |||||||
| @@ -13,62 +13,59 @@ | |||||||
|        <h1 data-trilium-h1>Admonitions</h1> |        <h1 data-trilium-h1>Admonitions</h1> | ||||||
|  |  | ||||||
|       <div class="ck-content"> |       <div class="ck-content"> | ||||||
|         <div> |         <p> | ||||||
|           <div> |           <img src="1_Admonitions_image.png"> | ||||||
|             <figure class="image"> |         </p> | ||||||
|               <img style="aspect-ratio:959/547;" src="1_Admonitions_image.png" width="959" |         <p>Admonitions are a way to highlight information to the reader. Other names | ||||||
|               height="547"> |           for it include <em>call-outs</em> and <em>info/warning/alert boxes</em>.</p> | ||||||
|             </figure> |         <h2>Inserting a new admonition</h2> | ||||||
|             <p>Admonitions are a way to highlight information to the reader. Other names |         <h3>From the UI</h3> | ||||||
|               for it include <em>call-outs</em> and <em>info/warning/alert boxes</em>.</p> |         <p>In the Formatting toolbar:</p> | ||||||
|             <h2>Inserting a new admonition</h2> |         <p> | ||||||
|             <h3>From the UI</h3> |           <img src="Admonitions_image.png"> | ||||||
|             <p>In the Formatting toolbar:</p> |         </p> | ||||||
|             <p> |         <h3>Via the keyboard</h3> | ||||||
|               <img src="Admonitions_image.png" width="202" height="194"> |         <p>It's possible to insert an admonition simply by typing:</p> | ||||||
|             </p> |         <ul> | ||||||
|             <h3>Via the keyboard</h3> |           <li><code>!!! note</code> | ||||||
|             <p>It's possible to insert an admonition simply by typing:</p> |           </li> | ||||||
|             <ul> |           <li><code>!!! tip</code> | ||||||
|               <li><code>!!! note</code> |           </li> | ||||||
|               </li> |           <li><code>!!! important</code> | ||||||
|               <li><code>!!! tip</code> |           </li> | ||||||
|               </li> |           <li><code>!!! caution</code> | ||||||
|               <li><code>!!! important</code> |           </li> | ||||||
|               </li> |           <li><code>!!! warning</code> | ||||||
|               <li><code>!!! caution</code> |           </li> | ||||||
|               </li> |         </ul> | ||||||
|               <li><code>!!! warning</code> |         <p>In addition to that, it's also possible to type <code>!!!</code>  followed | ||||||
|               </li> |           by any text, case in which a default admonition type will appear (note) | ||||||
|             </ul> |           with the entered text inside it.</p> | ||||||
|             <p>In addition to that, it's also possible to type <code>!!! </code> followed |         <h2>Interaction</h2> | ||||||
|               by any text, case in which a default admonition type will appear (note) |         <p>By design, admonitions act very similar to block quotes.</p> | ||||||
|               with the entered text inside it.</p> |         <ul> | ||||||
|             <h2>Interaction</h2> |           <li>Selecting a text and pressing the admonition button will turn that text | ||||||
|             <p>By design, admonitions act very similar to block quotes.</p> |             into an admonition.</li> | ||||||
|             <ul> |           <li>If selecting multiple admonitions, pressing the admonition button will | ||||||
|               <li>Selecting a text and pressing the admonition button will turn that text |             automatically merge them into one.</li> | ||||||
|                 into an admonition.</li> |         </ul> | ||||||
|               <li>If selecting multiple admonitions, pressing the admonition button will |         <p>Inside an admonition:</p> | ||||||
|                 automatically merge them into one.</li> |         <ul> | ||||||
|             </ul> |           <li>Pressing <kbd>Backspace</kbd> while the admonition is empty will remove | ||||||
|             <p>Inside an admonition:</p> |             it.</li> | ||||||
|             <ul> |           <li>Pressing <kbd>Enter</kbd> will start a new paragraph. Pressing it twice | ||||||
|               <li>Pressing <kbd>Backspace</kbd> while the admonition is empty will remove |             will exit out of the admonition.</li> | ||||||
|                 it.</li> |           <li>Headings and other block content including tables can be inserted inside | ||||||
|               <li>Pressing <kbd>Enter</kbd> will start a new paragraph. Pressing it twice |             the admonition.</li> | ||||||
|                 will exit out of the admonition.</li> |         </ul> | ||||||
|               <li>Headings and other block content including tables can be inserted inside |         <h2>Types of admonitions</h2> | ||||||
|                 the admonition.</li> |         <p>There are currently five types of admonitions: <em>Note</em>, <em>Tip</em>, <em>Important</em>, <em>Caution</em>, <em>Warning</em>.</p> | ||||||
|             </ul> |         <p>These types were inspired by GitHub's support for this feature and there | ||||||
|             <h2>Types of admonitions</h2> |           are currently no plans for adjusting it or allowing the user to customize | ||||||
|             <p>There are currently five types of admonitions: <em>Note</em>, <em>Tip</em>, <em>Important</em>, <em>Caution</em>, <em>Warning</em>.</p> |           them.</p> | ||||||
|             <p>These types were inspired by GitHub's support for this feature and there |         <h2>Markdown support</h2> | ||||||
|               are currently no plans for adjusting it or allowing the user to customize |         <p>The Markdown syntax for admonitions as supported by Trilium is the one | ||||||
|               them.</p> |           that GitHub uses, which is as follows:</p><pre><code class="language-text-x-gfm">> [!NOTE] | ||||||
|             <h2>Markdown support</h2> |  | ||||||
|             <p>The Markdown syntax for admonitions as supported by Trilium is the one |  | ||||||
|               that GitHub uses, which is as follows:</p><pre><code class="language-text-x-markdown">> [!NOTE] |  | ||||||
| > This is a note. | > This is a note. | ||||||
|  |  | ||||||
| > [!TIP] | > [!TIP] | ||||||
| @@ -79,10 +76,8 @@ | |||||||
|  |  | ||||||
| > [!CAUTION] | > [!CAUTION] | ||||||
| > This is a caution.</code></pre> | > This is a caution.</code></pre> | ||||||
|             <p>There are currently no plans of supporting alternative admonition syntaxes |         <p>There are currently no plans of supporting alternative admonition syntaxes | ||||||
|               such as <code>!!! note</code>.</p> |           such as <code>!!! note</code>.</p> | ||||||
|           </div> |  | ||||||
|         </div> |  | ||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
|   </body> |   </body> | ||||||
|   | |||||||