docs(user): improve documentation on sharing

This commit is contained in:
Elian Doran 2025-06-15 23:29:49 +03:00
parent dd647dbb0b
commit e23e5227a4
No known key found for this signature in database
14 changed files with 539 additions and 268 deletions

View File

@ -1,192 +1,346 @@
<p>Trilium allows you to share selected notes as <strong>publicly accessible</strong> read-only <p>Trilium allows you to share selected notes as <strong>publicly accessible</strong> read-only
documents. This feature is particularly useful for publishing content directly documents. This feature is particularly useful for publishing content directly
from your Trilium notes, making it accessible to others online.</p> from your Trilium notes, making it accessible to others online.</p>
<h2>Prerequisites</h2> <figure
<p>To use the sharing feature, you must have a&nbsp;<a class="reference-link" class="image">
href="#root/_help_WOcw2SLH6tbX">Server Installation</a>&nbsp;of Trilium. <img style="aspect-ratio:1144/660;" src="Sharing_image.png" width="1144"
This is necessary because the notes will be hosted from the server.</p> height="660">
<h2>How to Share a Note</h2> </figure>
<ol> <h2>Features, interaction and limitations</h2>
<li> <ul>
<p><strong>Enable Sharing</strong>: To share a note, toggle the <code>Shared</code> switch <li>Searching by note title.</li>
within the note's interface. Once sharing is enabled, an URL will appear, <li>Automatic dark/light mode based on the user's browser settings.</li>
which you can click to access the shared note.</p> <li>Mobile-friendly layout, with sidebar.</li>
<p> <li>Collapsible tree with the same note icons as the application.</li>
<img src="Sharing_share-single-note.png" alt="Share Note"> <li>Customizable logo.</li>
</p> <li>Toggle button for dark/light mode, which also stores the user preferences.</li>
</li> <li>Quick navigation buttons (previous and next note).</li>
<li> <li>Displaying the date of the last update of the note.</li>
<p><strong>Access the Shared Note</strong>: The link provided will open the </ul>
<h3>By note type</h3>
<figure class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:19.92%;">
<col style="width:41.66%;">
<col style="width:38.42%;">
</colgroup>
<thead>
<tr>
<th>&nbsp;</th>
<th>Supported features</th>
<th>Limitations</th>
</tr>
</thead>
<tbody>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_iPIMuisry3hd">Text</a>
</th>
<td>
<ul>
<li>Table of contents.</li>
<li>Syntax highlight of code blocks, provided a language is selected (does
not work if “Auto-detected” is enabled).</li>
<li>Rendering for math equations.</li>
</ul>
</td>
<td>
<ul>
<li>Including notes is not supported.</li>
<li>Inline Mermaid diagrams are not rendered.</li>
</ul>
</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>
</th>
<td>
<ul>
<li>Basic support (displaying the contents of the note in a monospace font).</li>
</ul>
</td>
<td>
<ul>
<li>No syntax highlight.</li>
</ul>
</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_m523cpzocqaD">Saved Search</a>
</th>
<td colspan="2">Not supported.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_iRwzGnHPzonm">Relation Map</a>
</th>
<td colspan="2">Not supported.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_bdUJEHsAPYQR">Note Map</a>
</th>
<td colspan="2">Not supported.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>
</th>
<td colspan="2">Not supported.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_GTwFsgaA0lCt">Book</a>
</th>
<td>
<ul>
<li>The child notes are displayed in a fixed format.&nbsp;</li>
</ul>
</td>
<td>
<ul>
<li>More advanced view types such as the calendar view are not supported.</li>
</ul>
</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>
</th>
<td>
<ul>
<li>The diagram is displayed as a vector image.</li>
</ul>
</td>
<td>
<ul>
<li>No further interaction supported.</li>
</ul>
</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a>
</th>
<td>
<ul>
<li>The diagram is displayed as a vector image.</li>
</ul>
</td>
<td>
<ul>
<li>No further interaction supported.</li>
</ul>
</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_1vHRoWCEjj0L">Web View</a>
</th>
<td colspan="2">Not supported.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_gBbsAeiuUxI5">Mind Map</a>
</th>
<td>The diagram is displayed as a vector image.</td>
<td>
<ul>
<li>No further interaction supported.</li>
</ul>
</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_81SGnPGMk7Xc">Geo Map</a>
</th>
<td colspan="2">Not supported.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_W8vYD3Q1zjCR">File</a>
</th>
<td>Basic interaction (downloading the file).</td>
<td>
<ul>
<li>No further interaction supported.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
<p>While the sharing feature is powerful, it has some limitations:</p>
<ul>
<li><strong>Code Notes</strong>: No syntax highlighting.</li>
<li><strong>Static Note Tree</strong>
</li>
<li><strong>Protected Notes</strong>: Cannot be shared.</li>
<li><strong>Include Notes</strong>: Not supported.</li>
</ul>
<p>Some of these limitations may be addressed in future updates.</p>
<h2>Prerequisites</h2>
<p>To use the sharing feature, you must have a&nbsp;<a class="reference-link"
href="#root/_help_WOcw2SLH6tbX">Server Installation</a>&nbsp;of Trilium.
This is necessary because the notes will be hosted from the server.</p>
<h2>How to Share a Note</h2>
<ol>
<li>
<p><strong>Enable Sharing</strong>: To share a note, toggle the <code>Shared</code> switch
within the note's interface. Once sharing is enabled, an URL will appear,
which you can click to access the shared note.</p>
<p>
<img src="Sharing_share-single-note.png" alt="Share Note">
</p>
</li>
<li><strong>Access the Shared Note</strong>: The link provided will open the
note in your browser. If your server is not configured with a public IP, note in your browser. If your server is not configured with a public IP,
the URL will refer to <code>localhost (127.0.0.1)</code>.</p> the URL will refer to <code>localhost (127.0.0.1)</code>.</li>
<p> </ol>
<img src="Sharing_share-single-note-.png" alt="Shared Note Example"> <h2>Sharing a Note Subtree</h2>
</p> <p>When you share a note, you actually share the entire subtree of notes
</li> beneath it. If the note has child notes, they will also be included in
</ol> the shared content. For example, sharing the "Formatting" subtree will
<h2>Sharing a Note Subtree</h2> display a page with basic navigation for exploring all the notes within
<p>When you share a note, you actually share the entire subtree of notes that subtree.</p>
beneath it. If the note has child notes, they will also be included in <h2>Viewing All Shared Notes</h2>
the shared content. For example, sharing the "Formatting" subtree will <p>You can view a list of all shared notes by clicking on "Show Shared Notes
display a page with basic navigation for exploring all the notes within Subtree." This allows you to manage and navigate through all the notes
that subtree.</p> you have made public.</p>
<p> <h2>Security Considerations</h2>
<img src="Sharing_share-multiple-not.png" alt="Shared Subtree Example"> <p>Shared notes are published on the open internet and can be accessed by
</p> anyone with the URL. The URL's randomness does not provide security, so
<h2>Viewing All Shared Notes</h2> it is crucial not to share sensitive information through this feature.</p>
<p>You can view a list of all shared notes by clicking on "Show Shared Notes <h3>Password Protection</h3>
Subtree." This allows you to manage and navigate through all the notes <p>To protect shared notes with a username and password, you can use the <code>#shareCredentials</code> attribute.
you have made public.</p> Add this label to the note with the format <code>#shareCredentials="username:password"</code>.
<h2>Security Considerations</h2> To protect an entire subtree, make sure the label is <a href="#root/_help_bwZpz2ajCEwO">inheritable</a>.</p>
<p>Shared notes are published on the open internet and can be accessed by <h2>Advanced Sharing Options</h2>
anyone with the URL. The URL's randomness does not provide security, so <h3>Customizing the Appearance of Shared Notes</h3>
it is crucial not to share sensitive information through this feature.</p> <p>The default design should be a good starting point, but you can customize
<h3>Password Protection</h3> it using your own CSS:</p>
<p>To protect shared notes with a username and password, you can use the <code>#shareCredentials</code> attribute. <ul>
Add this label to the note with the format <code>#shareCredentials="username:password"</code>. <li><strong>Custom CSS</strong>: Link a CSS&nbsp;<a class="reference-link"
To protect an entire subtree, make sure the label is <a href="#root/_help_bwZpz2ajCEwO">inheritable</a>.</p> href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note to the shared page by
<h2>Advanced Sharing Options</h2> adding a <code>~shareCss</code> relation to the note. If you want this style
<h3>Customizing the Appearance of Shared Notes</h3> to apply to the entire subtree, make the label inheritable. You can hide
<p>The default shared page is basic in design, but you can customize it using the CSS code note from the tree navigation by adding the <code>#shareHiddenFromTree</code> label.</li>
your own CSS:</p> <li><strong>Omitting Default CSS</strong>: For extensive styling changes,
<ul> use the <code>#shareOmitDefaultCss</code> label to avoid conflicts with Trilium's
<li><strong>Custom CSS</strong>: Link a CSS&nbsp;<a class="reference-link" <a
href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note to the shared page by href="#root/_help_Wy267RK4M69c">default stylesheet</a>.</li>
adding a <code>~shareCss</code> relation to the note. If you want this style </ul>
to apply to the entire subtree, make the label inheritable. You can hide <h3>Adding JavaScript</h3>
the CSS code note from the tree navigation by adding the <code>#shareHiddenFromTree</code> label.</li> <p>You can inject custom JavaScript into the shared note using the <code>~shareJs</code> relation.
<li><strong>Omitting Default CSS</strong>: For extensive styling changes, This allows you to access note attributes or traverse the note tree using
use the <code>#shareOmitDefaultCss</code> label to avoid conflicts with Trilium's the <code>fetchNote()</code> API, which retrieves note data based on its
<a ID.</p>
href="#root/_help_Wy267RK4M69c">default stylesheet</a>.</li> <p>Example:</p><pre><code class="language-application-javascript-env-backend">const currentNote = await fetchNote();
</ul>
<h3>Adding JavaScript</h3>
<p>You can inject custom JavaScript into the shared note using the <code>~shareJs</code> relation.
This allows you to access note attributes or traverse the note tree using
the <code>fetchNote()</code> API, which retrieves note data based on its
ID.</p>
<p>Example:</p><pre><code class="language-application-javascript-env-backend">const currentNote = await fetchNote();
const parentNote = await fetchNote(currentNote.parentNoteIds[0]); const parentNote = await fetchNote(currentNote.parentNoteIds[0]);
for (const attr of parentNote.attributes) { for (const attr of parentNote.attributes) {
console.log(attr.type, attr.name, attr.value); console.log(attr.type, attr.name, attr.value);
}</code></pre> }</code></pre>
<h3>Creating Human-Readable URL Aliases</h3> <h3>Creating Human-Readable URL Aliases</h3>
<p>Shared notes typically have URLs like <code>http://domain.tld/share/knvU8aJy4dJ7</code>, <p>Shared notes typically have URLs like <code>http://domain.tld/share/knvU8aJy4dJ7</code>,
where the last part is the note's ID. You can make these URLs more user-friendly where the last part is the note's ID. You can make these URLs more user-friendly
by adding the <code>#shareAlias</code> label to individual notes (e.g., <code>#shareAlias=highlighting</code>). by adding the <code>#shareAlias</code> label to individual notes (e.g., <code>#shareAlias=highlighting</code>).
This will change the URL to <code>http://domain.tld/share/highlighting</code>.</p> This will change the URL to <code>http://domain.tld/share/highlighting</code>.</p>
<p><strong>Important</strong>:</p> <p><strong>Important</strong>:</p>
<ol> <ol>
<li>Ensure that aliases are unique.</li> <li>Ensure that aliases are unique.</li>
<li>Using slashes (<code>/</code>) within aliases to create subpaths is not <li>Using slashes (<code>/</code>) within aliases to create subpaths is not
supported.</li> supported.</li>
</ol> </ol>
<h3>Viewing and Managing Shared Notes</h3> <h3>Viewing and Managing Shared Notes</h3>
<p>All shared notes are grouped under an automatically managed "Shared Notes" <p>All shared notes are grouped under an automatically managed "Shared Notes"
section. From here, you can view, share, or unshare notes by moving or section. From here, you can view, share, or unshare notes by moving or
cloning them within this section.</p> cloning them within this section.</p>
<p> <p>
<img src="Sharing_shared-list.png" alt="Shared Notes List"> <img src="Sharing_shared-list.png" alt="Shared Notes List">
</p> </p>
<h3>Setting a Custom Favicon</h3> <h3>Setting a Custom Favicon</h3>
<p>To customize the favicon for your shared pages, create a relation <code>~shareFavicon</code> pointing <p>To customize the favicon for your shared pages, create a relation <code>~shareFavicon</code> pointing
to a file note containing the favicon (e.g., in <code>.ico</code> format).</p> to a file note containing the favicon (e.g., in <code>.ico</code> format).</p>
<h3>Sharing a Note as the Root</h3> <h3>Sharing a Note as the Root</h3>
<p>You can designate a specific note or folder as the root of your shared <p>You can designate a specific note or folder as the root of your shared
content by adding the <code>#shareRoot</code> label. This note will be linked content by adding the <code>#shareRoot</code> label. This note will be linked
when visiting <code>[http://domain.tld/share](http://domain/share)</code>, when visiting <code>[http://domain.tld/share](http://domain/share)</code>,
making it easier to use Trilium as a fully-fledged website. Consider combining making it easier to use Trilium as a fully-fledged website. Consider combining
this with the <code>#shareIndex</code> label, which will display a list of this with the <code>#shareIndex</code> label, which will display a list of
all shared notes.</p> all shared notes.</p>
<h2>Limitations</h2> <h2>Attribute reference</h2>
<p>While the sharing feature is powerful, it has some limitations:</p> <figure class="table">
<ul> <table>
<li><strong>No Relation Map Support</strong> <thead>
</li> <tr>
<li><strong>Book Notes</strong>: Only show a list of child notes.</li> <th>Attribute</th>
<li><strong>Code Notes</strong>: No syntax highlighting.</li> <th>Description</th>
<li><strong>Static Note Tree</strong> </tr>
</li> </thead>
<li><strong>Protected Notes</strong>: Cannot be shared.</li> <tbody>
<li><strong>Include Notes</strong>: Not supported.</li> <tr>
</ul> <td><code>shareHiddenFromTree</code>
<p>Some of these limitations may be addressed in future updates.</p> </td>
<h2>Attribute reference</h2> <td>this note is hidden from left navigation tree, but still accessible with
<figure class="table"> its URL</td>
<table> </tr>
<thead> <tr>
<tr> <td><code>shareExternalLink</code>
<th>Attribute</th> </td>
<th>Description</th> <td>note will act as a link to an external website in the share tree</td>
</tr> </tr>
</thead> <tr>
<tbody> <td><code>shareAlias</code>
<tr> </td>
<td><code>shareHiddenFromTree</code> <td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code>
</td> </td>
<td>this note is hidden from left navigation tree, but still accessible with </tr>
its URL</td> <tr>
</tr> <td><code>shareOmitDefaultCss</code>
<tr> </td>
<td><code>shareExternalLink</code> <td>default share page CSS will be omitted. Use when you make extensive styling
</td> changes.</td>
<td>note will act as a link to an external website in the share tree</td> </tr>
</tr> <tr>
<tr> <td><code>shareRoot</code>
<td><code>shareAlias</code> </td>
</td> <td>marks note which is served on /share root.</td>
<td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code> </tr>
</td> <tr>
</tr> <td><code>shareDescription</code>
<tr> </td>
<td><code>shareOmitDefaultCss</code> <td>define text to be added to the HTML meta tag for description</td>
</td> </tr>
<td>default share page CSS will be omitted. Use when you make extensive styling <tr>
changes.</td> <td><code>shareRaw</code>
</tr> </td>
<tr> <td>Note will be served in its raw format, without HTML wrapper. See also&nbsp;
<td><code>shareRoot</code> <a
</td> class="reference-link" href="#root/_help_Qjt68inQ2bRj">Serving directly the content of a note</a>&nbsp;for an alternative method
<td>marks note which is served on /share root.</td> without setting an attribute.</td>
</tr> </tr>
<tr> <tr>
<td><code>shareDescription</code> <td><code>shareDisallowRobotIndexing</code>
</td> </td>
<td>define text to be added to the HTML meta tag for description</td> <td>
</tr> <p>Indicates to web crawlers that the page should not be indexed of this
<tr> note by:</p>
<td><code>shareRaw</code> <ul>
</td> <li>Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li>
<td>Note will be served in its raw format, without HTML wrapper. See also&nbsp; <li>Setting the <code>noindex, follow</code> meta tag.</li>
<a </ul>
class="reference-link" href="#root/_help_Qjt68inQ2bRj">Serving directly the content of a note</a>&nbsp;for an alternative method </td>
without setting an attribute.</td> </tr>
</tr> <tr>
<tr> <td><code>shareCredentials</code>
<td><code>shareDisallowRobotIndexing</code> </td>
</td> <td>require credentials to access this shared note. Value is expected to be
<td> in format <code>username:password</code>. Don't forget to make this inheritable
<p>Indicates to web crawlers that the page should not be indexed of this to apply to child-notes/images.</td>
note by:</p> </tr>
<ul> <tr>
<li>Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li> <td><code>shareIndex</code>
<li>Setting the <code>noindex, follow</code> meta tag.</li> </td>
</ul> <td>Note with this label will list all roots of shared notes.</td>
</td> </tr>
</tr> </tbody>
<tr> </table>
<td><code>shareCredentials</code> </figure>
</td> <h2>Credits</h2>
<td>require credentials to access this shared note. Value is expected to be <p>Since v0.95.0, a new theme was introduced (and enabled by default) which
in format <code>username:password</code>. Don't forget to make this inheritable greatly improves the visual aspect of the Share feature, as well as its
to apply to child-notes/images.</td> functionality (such as mobile support, dark/light mode, collapsible tree,
</tr> etc.). This theme is an adaptation of the <a href="https://github.com/zerebos/trilium.rocks">Trilium Rocks!</a> by
<tr> <a
<td><code>shareIndex</code> href="https://github.com/zerebos">zerebos</a>.</p>
</td>
<td>Note with this label will list all roots of shared notes.</td>
</tr>
</tbody>
</table>
</figure>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -1,25 +1,29 @@
<p>When accessing a shared note, Trilium will render it as a web page. Sometimes <p>When accessing a shared note, Trilium will render it as a web page. Sometimes
it's desirable to serve the content directly so that it can be used in it's desirable to serve the content directly so that it can be used in
a script or downloaded by the user.</p> a script or downloaded by the user.</p>
<table> <figure class="table">
<thead> <table>
<tr> <thead>
<th>A note displayed as a web page (HTML)</th> <tr>
<th>A note displayed as a raw format</th> <th>A note displayed as a web page (HTML)</th>
</tr> <th>A note displayed as a raw format</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td> <tr>
<img src="1_Serving directly the conte.png"> <td>
</td> <figure class="image">
<td> <img style="aspect-ratio:738/275;" src="1_Serving directly the conte.png"
<img src="Serving directly the conte.png"> width="738" height="275">
</td> </figure>
</tr> </td>
</tbody> <td>
</table> <img src="Serving directly the conte.png">
</td>
</tr>
</tbody>
</table>
</figure>
<h2>By adding an attribute to the note</h2> <h2>By adding an attribute to the note</h2>
<p>Simply add the <code>#shareRaw</code> attribute and the note will always <p>Simply add the <code>#shareRaw</code> attribute and the note will always
be rendered <em>raw</em> when accessed from the share URL.</p> be rendered <em>raw</em> when accessed from the share URL.</p>

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

View File

@ -61,6 +61,32 @@
"attachments": [], "attachments": [],
"dirFileName": "Release Notes", "dirFileName": "Release Notes",
"children": [ "children": [
{
"isClone": false,
"noteId": "jthwbL0FdaeU",
"notePath": [
"hD3V4hiu2VW4",
"jthwbL0FdaeU"
],
"title": "v0.95.0",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "template",
"value": "wyurrlcDl416",
"isInheritable": false,
"position": 60
}
],
"format": "markdown",
"dataFileName": "v0.95.0.md",
"attachments": []
},
{ {
"isClone": false, "isClone": false,
"noteId": "7HGYsJbLuhnv", "noteId": "7HGYsJbLuhnv",
@ -69,7 +95,7 @@
"7HGYsJbLuhnv" "7HGYsJbLuhnv"
], ],
"title": "v0.94.1", "title": "v0.94.1",
"notePosition": 10, "notePosition": 20,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -95,7 +121,7 @@
"Neq53ujRGBqv" "Neq53ujRGBqv"
], ],
"title": "v0.94.0", "title": "v0.94.0",
"notePosition": 20, "notePosition": 30,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -121,7 +147,7 @@
"VN3xnce1vLkX" "VN3xnce1vLkX"
], ],
"title": "v0.93.0", "title": "v0.93.0",
"notePosition": 30, "notePosition": 40,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -139,7 +165,7 @@
"WRaBfQqPr6qo" "WRaBfQqPr6qo"
], ],
"title": "v0.92.7", "title": "v0.92.7",
"notePosition": 40, "notePosition": 50,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -165,7 +191,7 @@
"a2rwfKNmUFU1" "a2rwfKNmUFU1"
], ],
"title": "v0.92.6", "title": "v0.92.6",
"notePosition": 50, "notePosition": 60,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -183,7 +209,7 @@
"fEJ8qErr0BKL" "fEJ8qErr0BKL"
], ],
"title": "v0.92.5-beta", "title": "v0.92.5-beta",
"notePosition": 60, "notePosition": 70,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -201,7 +227,7 @@
"kkkZQQGSXjwy" "kkkZQQGSXjwy"
], ],
"title": "v0.92.4", "title": "v0.92.4",
"notePosition": 70, "notePosition": 80,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -219,7 +245,7 @@
"vAroNixiezaH" "vAroNixiezaH"
], ],
"title": "v0.92.3-beta", "title": "v0.92.3-beta",
"notePosition": 80, "notePosition": 90,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -237,7 +263,7 @@
"mHEq1wxAKNZd" "mHEq1wxAKNZd"
], ],
"title": "v0.92.2-beta", "title": "v0.92.2-beta",
"notePosition": 90, "notePosition": 100,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -255,7 +281,7 @@
"IykjoAmBpc61" "IykjoAmBpc61"
], ],
"title": "v0.92.1-beta", "title": "v0.92.1-beta",
"notePosition": 100, "notePosition": 110,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -273,7 +299,7 @@
"dq2AJ9vSBX4Y" "dq2AJ9vSBX4Y"
], ],
"title": "v0.92.0-beta", "title": "v0.92.0-beta",
"notePosition": 110, "notePosition": 120,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -291,7 +317,7 @@
"3a8aMe4jz4yM" "3a8aMe4jz4yM"
], ],
"title": "v0.91.6", "title": "v0.91.6",
"notePosition": 120, "notePosition": 130,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -309,7 +335,7 @@
"8djQjkiDGESe" "8djQjkiDGESe"
], ],
"title": "v0.91.5", "title": "v0.91.5",
"notePosition": 130, "notePosition": 140,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -327,7 +353,7 @@
"OylxVoVJqNmr" "OylxVoVJqNmr"
], ],
"title": "v0.91.4-beta", "title": "v0.91.4-beta",
"notePosition": 140, "notePosition": 150,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -345,7 +371,7 @@
"tANGQDvnyhrj" "tANGQDvnyhrj"
], ],
"title": "v0.91.3-beta", "title": "v0.91.3-beta",
"notePosition": 150, "notePosition": 160,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -363,7 +389,7 @@
"hMoBfwSoj1SC" "hMoBfwSoj1SC"
], ],
"title": "v0.91.2-beta", "title": "v0.91.2-beta",
"notePosition": 160, "notePosition": 170,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -381,7 +407,7 @@
"a2XMSKROCl9z" "a2XMSKROCl9z"
], ],
"title": "v0.91.1-beta", "title": "v0.91.1-beta",
"notePosition": 170, "notePosition": 180,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -399,7 +425,7 @@
"yqXFvWbLkuMD" "yqXFvWbLkuMD"
], ],
"title": "v0.90.12", "title": "v0.90.12",
"notePosition": 180, "notePosition": 190,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -417,7 +443,7 @@
"veS7pg311yJP" "veS7pg311yJP"
], ],
"title": "v0.90.11-beta", "title": "v0.90.11-beta",
"notePosition": 190, "notePosition": 200,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -435,7 +461,7 @@
"sq5W9TQxRqMq" "sq5W9TQxRqMq"
], ],
"title": "v0.90.10-beta", "title": "v0.90.10-beta",
"notePosition": 200, "notePosition": 210,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -453,7 +479,7 @@
"yFEGVCUM9tPx" "yFEGVCUM9tPx"
], ],
"title": "v0.90.9-beta", "title": "v0.90.9-beta",
"notePosition": 210, "notePosition": 220,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -471,7 +497,7 @@
"o4wAGqOQuJtV" "o4wAGqOQuJtV"
], ],
"title": "v0.90.8", "title": "v0.90.8",
"notePosition": 220, "notePosition": 230,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -504,7 +530,7 @@
"i4A5g9iOg9I0" "i4A5g9iOg9I0"
], ],
"title": "v0.90.7-beta", "title": "v0.90.7-beta",
"notePosition": 230, "notePosition": 240,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -522,7 +548,7 @@
"ThNf2GaKgXUs" "ThNf2GaKgXUs"
], ],
"title": "v0.90.6-beta", "title": "v0.90.6-beta",
"notePosition": 240, "notePosition": 250,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -540,7 +566,7 @@
"G4PAi554kQUr" "G4PAi554kQUr"
], ],
"title": "v0.90.5-beta", "title": "v0.90.5-beta",
"notePosition": 250, "notePosition": 260,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -567,7 +593,7 @@
"zATRobGRCmBn" "zATRobGRCmBn"
], ],
"title": "v0.90.4", "title": "v0.90.4",
"notePosition": 260, "notePosition": 270,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -585,7 +611,7 @@
"sCDLf8IKn3Iz" "sCDLf8IKn3Iz"
], ],
"title": "v0.90.3", "title": "v0.90.3",
"notePosition": 270, "notePosition": 280,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -603,7 +629,7 @@
"VqqyBu4AuTjC" "VqqyBu4AuTjC"
], ],
"title": "v0.90.2-beta", "title": "v0.90.2-beta",
"notePosition": 280, "notePosition": 290,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -621,7 +647,7 @@
"RX3Nl7wInLsA" "RX3Nl7wInLsA"
], ],
"title": "v0.90.1-beta", "title": "v0.90.1-beta",
"notePosition": 290, "notePosition": 300,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -639,7 +665,7 @@
"GyueACukPWjk" "GyueACukPWjk"
], ],
"title": "v0.90.0-beta", "title": "v0.90.0-beta",
"notePosition": 300, "notePosition": 310,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",
@ -657,7 +683,7 @@
"wyurrlcDl416" "wyurrlcDl416"
], ],
"title": "Release Template", "title": "Release Template",
"notePosition": 310, "notePosition": 320,
"prefix": null, "prefix": null,
"isExpanded": false, "isExpanded": false,
"type": "text", "type": "text",

View File

@ -9190,6 +9190,90 @@
"value": "bx bx-share-alt", "value": "bx bx-share-alt",
"isInheritable": false, "isInheritable": false,
"position": 30 "position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "m523cpzocqaD",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "iRwzGnHPzonm",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "bdUJEHsAPYQR",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "GTwFsgaA0lCt",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "s1aBHPd79XYj",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "grjYqerjn243",
"isInheritable": false,
"position": 130
},
{
"type": "relation",
"name": "internalLink",
"value": "1vHRoWCEjj0L",
"isInheritable": false,
"position": 140
},
{
"type": "relation",
"name": "internalLink",
"value": "gBbsAeiuUxI5",
"isInheritable": false,
"position": 150
},
{
"type": "relation",
"name": "internalLink",
"value": "81SGnPGMk7Xc",
"isInheritable": false,
"position": 160
},
{
"type": "relation",
"name": "internalLink",
"value": "W8vYD3Q1zjCR",
"isInheritable": false,
"position": 170
} }
], ],
"format": "markdown", "format": "markdown",
@ -9204,20 +9288,12 @@
"dataFileName": "Sharing_shared-list.png" "dataFileName": "Sharing_shared-list.png"
}, },
{ {
"attachmentId": "DFUCyGDOpqOt", "attachmentId": "ibqWQUOCMhIE",
"title": "share-multiple-notes-web.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "Sharing_share-multiple-not.png" "dataFileName": "Sharing_image.png"
},
{
"attachmentId": "Il8udowRLald",
"title": "share-single-note-web.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Sharing_share-single-note-.png"
}, },
{ {
"attachmentId": "ShhsPSZVMQKx", "attachmentId": "ShhsPSZVMQKx",
@ -9258,10 +9334,10 @@
"dataFileName": "Serving directly the conte.png" "dataFileName": "Serving directly the conte.png"
}, },
{ {
"attachmentId": "xicVjsf2Kmaz", "attachmentId": "ixkXFTSSkdpL",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/jpg", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "1_Serving directly the conte.png" "dataFileName": "1_Serving directly the conte.png"
} }

View File

@ -1,6 +1,32 @@
# Sharing # Sharing
Trilium allows you to share selected notes as **publicly accessible** read-only documents. This feature is particularly useful for publishing content directly from your Trilium notes, making it accessible to others online. Trilium allows you to share selected notes as **publicly accessible** read-only documents. This feature is particularly useful for publishing content directly from your Trilium notes, making it accessible to others online.
<figure class="image"><img style="aspect-ratio:1144/660;" src="Sharing_image.png" width="1144" height="660"></figure>
## Features, interaction and limitations
* Searching by note title.
* Automatic dark/light mode based on the user's browser settings.
* Mobile-friendly layout, with sidebar.
* Collapsible tree with the same note icons as the application.
* Customizable logo.
* Toggle button for dark/light mode, which also stores the user preferences.
* Quick navigation buttons (previous and next note).
* Displaying the date of the last update of the note.
### By note type
<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:19.92%;"><col style="width:41.66%;"><col style="width:38.42%;"></colgroup><thead><tr><th>&nbsp;</th><th>Supported features</th><th>Limitations</th></tr></thead><tbody><tr><th><a class="reference-link" href="../Note%20Types/Text.md">Text</a></th><td><ul><li>Table of contents.</li><li>Syntax highlight of code blocks, provided a language is selected (does not work if “Auto-detected” is enabled).</li><li>Rendering for math equations.</li></ul></td><td><ul><li>Including notes is not supported.</li><li>Inline Mermaid diagrams are not rendered.</li></ul></td></tr><tr><th><a class="reference-link" href="../Note%20Types/Code.md">Code</a></th><td><ul><li>Basic support (displaying the contents of the note in a monospace font).</li></ul></td><td><ul><li>No syntax highlight.</li></ul></td></tr><tr><th><a class="reference-link" href="../Note%20Types/Saved%20Search.md">Saved Search</a></th><td colspan="2">Not supported.</td></tr><tr><th><a class="reference-link" href="../Note%20Types/Relation%20Map.md">Relation Map</a></th><td colspan="2">Not supported.</td></tr><tr><th><a class="reference-link" href="../Note%20Types/Note%20Map.md">Note Map</a></th><td colspan="2">Not supported.</td></tr><tr><th><a class="reference-link" href="../Note%20Types/Render%20Note.md">Render Note</a></th><td colspan="2">Not supported.</td></tr><tr><th><a class="reference-link" href="../Note%20Types/Book.md">Book</a></th><td><ul><li>The child notes are displayed in a fixed format.&nbsp;</li></ul></td><td><ul><li>More advanced view types such as the calendar view are not supported.</li></ul></td></tr><tr><th><a class="reference-link" href="../Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a></th><td><ul><li>The diagram is displayed as a vector image.</li></ul></td><td><ul><li>No further interaction supported.</li></ul></td></tr><tr><th><a class="reference-link" href="../Note%20Types/Canvas.md">Canvas</a></th><td><ul><li>The diagram is displayed as a vector image.</li></ul></td><td><ul><li>No further interaction supported.</li></ul></td></tr><tr><th><a class="reference-link" href="../Note%20Types/Web%20View.md">Web View</a></th><td colspan="2">Not supported.</td></tr><tr><th><a class="reference-link" href="../Note%20Types/Mind%20Map.md">Mind Map</a></th><td>The diagram is displayed as a vector image.</td><td><ul><li>No further interaction supported.</li></ul></td></tr><tr><th><a class="reference-link" href="../Note%20Types/Geo%20Map.md">Geo Map</a></th><td colspan="2">Not supported.</td></tr><tr><th><a class="reference-link" href="../Note%20Types/File.md">File</a></th><td>Basic interaction (downloading the file).</td><td><ul><li>No further interaction supported.</li></ul></td></tr></tbody></table></figure>
While the sharing feature is powerful, it has some limitations:
* **Code Notes**: No syntax highlighting.
* **Static Note Tree**
* **Protected Notes**: Cannot be shared.
* **Include Notes**: Not supported.
Some of these limitations may be addressed in future updates.
## Prerequisites ## Prerequisites
To use the sharing feature, you must have a <a class="reference-link" href="../Installation%20%26%20Setup/Server%20Installation.md">Server Installation</a> of Trilium. This is necessary because the notes will be hosted from the server. To use the sharing feature, you must have a <a class="reference-link" href="../Installation%20%26%20Setup/Server%20Installation.md">Server Installation</a> of Trilium. This is necessary because the notes will be hosted from the server.
@ -12,14 +38,10 @@ To use the sharing feature, you must have a <a class="reference-link" href="../
![Share Note](Sharing_share-single-note.png) ![Share Note](Sharing_share-single-note.png)
2. **Access the Shared Note**: The link provided will open the note in your browser. If your server is not configured with a public IP, the URL will refer to `localhost (127.0.0.1)`. 2. **Access the Shared Note**: The link provided will open the note in your browser. If your server is not configured with a public IP, the URL will refer to `localhost (127.0.0.1)`.
![Shared Note Example](Sharing_share-single-note-.png)
## Sharing a Note Subtree ## Sharing a Note Subtree
When you share a note, you actually share the entire subtree of notes beneath it. If the note has child notes, they will also be included in the shared content. For example, sharing the "Formatting" subtree will display a page with basic navigation for exploring all the notes within that subtree. When you share a note, you actually share the entire subtree of notes beneath it. If the note has child notes, they will also be included in the shared content. For example, sharing the "Formatting" subtree will display a page with basic navigation for exploring all the notes within that subtree.
![Shared Subtree Example](Sharing_share-multiple-not.png)
## Viewing All Shared Notes ## Viewing All Shared Notes
You can view a list of all shared notes by clicking on "Show Shared Notes Subtree." This allows you to manage and navigate through all the notes you have made public. You can view a list of all shared notes by clicking on "Show Shared Notes Subtree." This allows you to manage and navigate through all the notes you have made public.
@ -36,7 +58,7 @@ To protect shared notes with a username and password, you can use the `#shareCre
### Customizing the Appearance of Shared Notes ### Customizing the Appearance of Shared Notes
The default shared page is basic in design, but you can customize it using your own CSS: The default design should be a good starting point, but you can customize it using your own CSS:
* **Custom CSS**: Link a CSS <a class="reference-link" href="../Note%20Types/Code.md">Code</a> note to the shared page by adding a `~shareCss` relation to the note. If you want this style to apply to the entire subtree, make the label inheritable. You can hide the CSS code note from the tree navigation by adding the `#shareHiddenFromTree` label. * **Custom CSS**: Link a CSS <a class="reference-link" href="../Note%20Types/Code.md">Code</a> note to the shared page by adding a `~shareCss` relation to the note. If you want this style to apply to the entire subtree, make the label inheritable. You can hide the CSS code note from the tree navigation by adding the `#shareHiddenFromTree` label.
* **Omitting Default CSS**: For extensive styling changes, use the `#shareOmitDefaultCss` label to avoid conflicts with Trilium's [default stylesheet](../Basic%20Concepts%20and%20Features/Themes.md). * **Omitting Default CSS**: For extensive styling changes, use the `#shareOmitDefaultCss` label to avoid conflicts with Trilium's [default stylesheet](../Basic%20Concepts%20and%20Features/Themes.md).
@ -79,19 +101,10 @@ To customize the favicon for your shared pages, create a relation `~shareFavicon
You can designate a specific note or folder as the root of your shared content by adding the `#shareRoot` label. This note will be linked when visiting `[http://domain.tld/share](http://domain/share)`, making it easier to use Trilium as a fully-fledged website. Consider combining this with the `#shareIndex` label, which will display a list of all shared notes. You can designate a specific note or folder as the root of your shared content by adding the `#shareRoot` label. This note will be linked when visiting `[http://domain.tld/share](http://domain/share)`, making it easier to use Trilium as a fully-fledged website. Consider combining this with the `#shareIndex` label, which will display a list of all shared notes.
## Limitations
While the sharing feature is powerful, it has some limitations:
* **No Relation Map Support**
* **Book Notes**: Only show a list of child notes.
* **Code Notes**: No syntax highlighting.
* **Static Note Tree**
* **Protected Notes**: Cannot be shared.
* **Include Notes**: Not supported.
Some of these limitations may be addressed in future updates.
## Attribute reference ## Attribute reference
<figure class="table"><table><thead><tr><th>Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>shareHiddenFromTree</code></td><td>this note is hidden from left navigation tree, but still accessible with its URL</td></tr><tr><td><code>shareExternalLink</code></td><td>note will act as a link to an external website in the share tree</td></tr><tr><td><code>shareAlias</code></td><td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code></td></tr><tr><td><code>shareOmitDefaultCss</code></td><td>default share page CSS will be omitted. Use when you make extensive styling changes.</td></tr><tr><td><code>shareRoot</code></td><td>marks note which is served on /share root.</td></tr><tr><td><code>shareDescription</code></td><td>define text to be added to the HTML meta tag for description</td></tr><tr><td><code>shareRaw</code></td><td>Note will be served in its raw format, without HTML wrapper. See also&nbsp;<a class="reference-link" href="Sharing/Serving%20directly%20the%20content%20o.md">Serving directly the content of a note</a>&nbsp;for an alternative method without setting an attribute.</td></tr><tr><td><code>shareDisallowRobotIndexing</code></td><td><p>Indicates to web crawlers that the page should not be indexed of this note by:</p><ul><li>Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li><li>Setting the <code>noindex, follow</code> meta tag.</li></ul></td></tr><tr><td><code>shareCredentials</code></td><td>require credentials to access this shared note. Value is expected to be in format <code>username:password</code>. Don't forget to make this inheritable to apply to child-notes/images.</td></tr><tr><td><code>shareIndex</code></td><td>Note with this label will list all roots of shared notes.</td></tr></tbody></table></figure> <figure class="table"><table><thead><tr><th>Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>shareHiddenFromTree</code></td><td>this note is hidden from left navigation tree, but still accessible with its URL</td></tr><tr><td><code>shareExternalLink</code></td><td>note will act as a link to an external website in the share tree</td></tr><tr><td><code>shareAlias</code></td><td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code></td></tr><tr><td><code>shareOmitDefaultCss</code></td><td>default share page CSS will be omitted. Use when you make extensive styling changes.</td></tr><tr><td><code>shareRoot</code></td><td>marks note which is served on /share root.</td></tr><tr><td><code>shareDescription</code></td><td>define text to be added to the HTML meta tag for description</td></tr><tr><td><code>shareRaw</code></td><td>Note will be served in its raw format, without HTML wrapper. See also&nbsp;<a class="reference-link" href="Sharing/Serving%20directly%20the%20content%20o.md">Serving directly the content of a note</a>&nbsp;for an alternative method without setting an attribute.</td></tr><tr><td><code>shareDisallowRobotIndexing</code></td><td><p>Indicates to web crawlers that the page should not be indexed of this note by:</p><ul><li>Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li><li>Setting the <code>noindex, follow</code> meta tag.</li></ul></td></tr><tr><td><code>shareCredentials</code></td><td>require credentials to access this shared note. Value is expected to be in format <code>username:password</code>. Don't forget to make this inheritable to apply to child-notes/images.</td></tr><tr><td><code>shareIndex</code></td><td>Note with this label will list all roots of shared notes.</td></tr></tbody></table></figure>
## Credits
Since v0.95.0, a new theme was introduced (and enabled by default) which greatly improves the visual aspect of the Share feature, as well as its functionality (such as mobile support, dark/light mode, collapsible tree, etc.). This theme is an adaptation of the [Trilium Rocks!](https://github.com/zerebos/trilium.rocks) by [zerebos](https://github.com/zerebos).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -1,9 +1,7 @@
# Serving directly the content of a note # Serving directly the content of a note
When accessing a shared note, Trilium will render it as a web page. Sometimes it's desirable to serve the content directly so that it can be used in a script or downloaded by the user. When accessing a shared note, Trilium will render it as a web page. Sometimes it's desirable to serve the content directly so that it can be used in a script or downloaded by the user.
| A note displayed as a web page (HTML) | A note displayed as a raw format | <figure class="table"><table><thead><tr><th>A note displayed as a web page (HTML)</th><th>A note displayed as a raw format</th></tr></thead><tbody><tr><td><figure class="image"><img style="aspect-ratio:738/275;" src="1_Serving directly the conte.png" width="738" height="275"></figure></td><td><img src="Serving directly the conte.png"></td></tr></tbody></table></figure>
| --- | --- |
| ![](1_Serving%20directly%20the%20conte.png) | ![](Serving%20directly%20the%20conte.png) |
## By adding an attribute to the note ## By adding an attribute to the note

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB