mirror/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2026-01-06 04:50:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): document formatting keyboard shortcuts + fix broken image

Browse Source
This commit is contained in:
Elian Doran
2025-03-12 19:02:16 +02:00
parent e0cebf1c00
commit d469670a46
23 changed files with 524 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/public/app/doc_notes/en/User Guide/!!!meta.json generated
View File

@@ -9,7 +9,7 @@
"pOsGYCXsbNQG"
],
"title": "User Guide",
"notePosition": 80,
"notePosition": 70,
"prefix": null,
"isExpanded": true,
"type": "text",
@@ -1024,21 +1024,21 @@
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 30
},
@@ -1552,7 +1552,7 @@
"title": "Basic Concepts",
"notePosition": 60,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
@@ -1579,7 +1579,7 @@
"title": "UI Elements",
"notePosition": 10,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
@@ -1642,25 +1642,25 @@
"position": 30
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-layout",
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"value": "_lbSettings",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "_lbSettings",
"type": "label",
"name": "iconClass",
"value": "bx bxs-layout",
"isInheritable": false,
"position": 60
"position": 40
}
],
"format": "html",
@@ -1886,6 +1886,13 @@
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "ivYnonVFBxbQ",
"isInheritable": false,
"position": 50
},
{
"type": "label",
"name": "shareAlias",
@@ -1899,13 +1906,6 @@
"value": "bx bxs-tree-alt",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "ivYnonVFBxbQ",
"isInheritable": false,
"position": 60
}
],
"format": "html",
@@ -1946,23 +1946,30 @@
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-sidebar",
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"value": "p9kXRFAkwN4o",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "OR8WJ7Iz9K4U",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 40
},
@@ -1976,37 +1983,30 @@
{
"type": "relation",
"name": "internalLink",
"value": "OR8WJ7Iz9K4U",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 70
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 80
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "SynTBQiBsdYJ",
"isInheritable": false,
"position": 90
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"type": "label",
"name": "iconClass",
"value": "bx bx-sidebar",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "p9kXRFAkwN4o",
"isInheritable": false,
"position": 110
"position": 10
}
],
"format": "html",
@@ -2063,7 +2063,7 @@
"title": "Note",
"notePosition": 40,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/markdown",
"attributes": [
@@ -2211,14 +2211,14 @@
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"value": "R7abl2fc6Mxi",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "R7abl2fc6Mxi",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 30
},
@@ -2522,21 +2522,21 @@
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 30
},
@@ -2900,28 +2900,28 @@
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"value": "MMiBEQljMQh2",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "MMiBEQljMQh2",
"value": "IakOLONlIfGI",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "IakOLONlIfGI",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 50
},
@@ -3435,14 +3435,21 @@
{
"type": "relation",
"name": "internalLink",
"value": "nRhnJkTT8cPs",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "4TIF1oA4VQRO",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "4TIF1oA4VQRO",
"value": "nRhnJkTT8cPs",
"isInheritable": false,
"position": 30
},
@@ -3459,13 +3466,6 @@
"value": "bx bx-code",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 60
}
],
"format": "html",
@@ -3524,13 +3524,21 @@
"format": "html",
"dataFileName": "Content language & Right-to-le.html",
"attachments": [
{
"attachmentId": "RlBpP2KTDVIK",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Content language & Right-t.png"
},
{
"attachmentId": "TlBagKsAj5ax",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Content language & Right-t.png"
"dataFileName": "1_Content language & Right-t.png"
},
{
"attachmentId": "U9e8SLUEALiR",
@@ -3538,7 +3546,60 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Content language & Right-t.png"
"dataFileName": "2_Content language & Right-t.png"
}
]
},
{
"isClone": false,
"noteId": "UYuUB1ZekNQU",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"iPIMuisry3hd",
"UYuUB1ZekNQU"
],
"title": "Formatting",
"notePosition": 30,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "nRhnJkTT8cPs",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Formatting.html",
"attachments": [
{
"attachmentId": "7tX4ckOSF8jq",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Formatting_image.png"
},
{
"attachmentId": "HP741oAz3ebU",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Formatting_image.png"
},
{
"attachmentId": "yKVC2F773Mg7",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Formatting_image.png"
}
]
},
@@ -3552,7 +3613,7 @@
"nRhnJkTT8cPs"
],
"title": "Formatting toolbar",
"notePosition": 30,
"notePosition": 40,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -3561,23 +3622,23 @@
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"value": "4TIF1oA4VQRO",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-text",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "4TIF1oA4VQRO",
"isInheritable": false,
"position": 30
}
],
"format": "html",
@@ -3627,7 +3688,7 @@
"mT0HEkOsz6i1"
],
"title": "Images",
"notePosition": 40,
"notePosition": 50,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -3781,7 +3842,7 @@
"QEAPj01N5f7w"
],
"title": "Links",
"notePosition": 50,
"notePosition": 60,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -3837,7 +3898,7 @@
"S6Xx8QIWTV66"
],
"title": "Lists",
"notePosition": 60,
"notePosition": 70,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -3921,54 +3982,54 @@
"type": "text",
"mime": "text/markdown",
"attributes": [
{
"type": "label",
"name": "shareAlias",
"value": "code-notes",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 30
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 40
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "QxEyIjRBizuC",
"isInheritable": false,
"position": 50
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 60
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "4TIF1oA4VQRO",
"isInheritable": false,
"position": 70
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 80
"position": 60
},
{
"type": "label",
"name": "shareAlias",
"value": "code-notes",
"isInheritable": false,
"position": 20
},
{
"type": "label",
@@ -4026,57 +4087,57 @@
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"name": "imageLink",
"value": "DVJl4l3T8EG2",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "GLks18SNjxmC",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"value": "GLks18SNjxmC",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "5668rwcirq1t",
"value": "wX4HbRucYSDD",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "GPERMystNGTB",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "imageLink",
"value": "DVJl4l3T8EG2",
"name": "internalLink",
"value": "RDslemsQ6gCp",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "wX4HbRucYSDD",
"value": "5668rwcirq1t",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "RDslemsQ6gCp",
"value": "GPERMystNGTB",
"isInheritable": false,
"position": 80
},
@@ -5204,14 +5265,14 @@
{
"type": "relation",
"name": "internalLink",
"value": "GLks18SNjxmC",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"value": "GLks18SNjxmC",
"isInheritable": false,
"position": 20
},
@@ -6166,14 +6227,14 @@
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"value": "WOcw2SLH6tbX",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "WOcw2SLH6tbX",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 50
},
@@ -6425,35 +6486,35 @@
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"value": "wX4HbRucYSDD",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "wX4HbRucYSDD",
"value": "IakOLONlIfGI",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "IakOLONlIfGI",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"value": "BCkXAVs63Ttv",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "BCkXAVs63Ttv",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 50
},

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/1_Content language & Right-t.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 89 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/1_Formatting_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/2_Content language & Right-t.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/2_Formatting_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 B

61
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Code blocks.html generated
View File

@@ -13,20 +13,20 @@
<h1 data-trilium-h1>Code blocks</h1>
<div class="ck-content">
<figure class="image">
<img style="aspect-ratio:1078/307;" src="1_Code blocks_image.png" width="1078"
height="307">
</figure>
<p>
<img src="1_Code blocks_image.png" alt="" />
</p>
<p>The code blocks feature allows entering pieces of code in text notes.</p>
<p>Note that this feature is meant for generally small snippets of code.
For larger files such as an entire log, see the dedicated&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/FVuX89AJuFSw">[missing note]</a>&nbsp;note
For larger files such as an entire log, see the dedicated&nbsp;<a href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/FVuX89AJuFSw">[missing note]</a>&nbsp;note
type instead.</p>
<h2>Inserting a code block</h2>
<h2>Inserting a code block</h2>
<ul>
<li>Via the&nbsp;<a class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>,
<li>Via the&nbsp;<a href="Formatting%20toolbar.html">Formatting toolbar</a>,
look for the
<img src="Code blocks_image.png" width="46" height="33">button.
<img src="Code blocks_image.png" alt="" />button.
<ul>
<li>Pressing directly on the icon will insert a code block with the language
that was selected most recently. If this is the first time a code block
@@ -42,35 +42,40 @@
</ul>
</li>
</ul>
<h2>Syntax highlighting</h2>
<h2>Syntax highlighting</h2>
<p>Since TriliumNext v0.90.12, Trilium will try to offer syntax highlighting
to the code block. Note that the syntax highlighting mechanism is slightly
different than the one in&nbsp;<a class="reference-link" href="../Code.html">Code Notes</a>&nbsp;notes
different than the one in&nbsp;<a href="../Code.html">Code Notes</a>&nbsp;notes
as different technologies are involved.</p>
<p>When the language is set to <i>Auto-detected</i>, Trilium will try to identify
the programming language (or similar) that corresponds to the given snippet
of text and highlight it. If this is problematic, consider changing the
language of the code block manually.</p>
<p>When the language is set to <i>Plain text</i>, there will be no syntax
<p>When the language is set to <em>Auto-detected</em>, Trilium will try to
identify the programming language (or similar) that corresponds to the
given snippet of text and highlight it. If this is problematic, consider
changing the language of the code block manually.</p>
<p>When the language is set to <em>Plain text</em>, there will be no syntax
highlighting.</p>
<h2>Changing the language of a code block</h2>
<h2>Changing the language of a code block</h2>
<p>Simply click anywhere inside the code block and press again the code block
button in the&nbsp;<a class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>:
<br>
<img src="2_Code blocks_image.png" width="183" height="156">
button in the&nbsp;<a href="Formatting%20toolbar.html">Formatting toolbar</a>:
<br
/>
<img src="2_Code blocks_image.png" alt="" />
</p>
<h2>Adjusting the list of languages</h2>
<h2>Adjusting the list of languages</h2>
<p>The code blocks feature shares the list of languages with the&nbsp;
<a
class="reference-link" href="../Code.html">Code Notes</a>&nbsp;note type.</p>
<p>The supported languages can be adjusted by going to&nbsp;<a class="reference-link"
href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a>, then <i>Code Notes</i> and
looking for the <i>Available MIME types in the dropdown</i> section. Simply
check any of the items to add them to the list, or uncheck them to remove
them from the list.</p>
href="../Code.html">Code Notes</a>&nbsp;note type.</p>
<p>The supported languages can be adjusted by going to&nbsp;<a href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a>,
then <em>Code Notes</em> and looking for the <em>Available MIME types in the dropdown</em> section.
Simply check any of the items to add them to the list, or uncheck them
to remove them from the list.</p>
<p>Note that the list of languages is not immediately refreshed, you'd have
to manually <a href="../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
<p>&nbsp;</p>
</div>
</div>
</body>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Content language & Right-t.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 90 KiB

10
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Content language & Right-to-le.html generated
View File

@@ -13,10 +13,12 @@
<h1 data-trilium-h1>Content language &amp; Right-to-left support</h1>
<div class="ck-content">
<figure class="image image-style-align-center">
<img style="aspect-ratio:906/557;" src="1_Content language & Right-t.png"
alt="" width="906" height="557">
</figure>
<div>
<figure class="image">
<img style="aspect-ratio:906/557;" src="Content language & Right-t.png"
width="906" height="557">
</figure>
</div>
<p>A language hint can be provided for text notes. This option informs the
browser or the desktop application about the language the note is written
in (for example this might help with spellchecking), and it also determines

49
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Formatting toolbar.html generated
View File

@@ -15,44 +15,51 @@
<div class="ck-content">
<p>Trilium allows two different editing experiences for text notes, based
on your preference.</p>
<p>To do so, go to&nbsp;<a class="reference-link" href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a>&nbsp;and
look for the <i>Text Notes</i> section. There is a corresponding section
called <i>Formatting toolbar</i>.</p>
<h2>Floating</h2>
<p>To do so, go to&nbsp;<a href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a>&nbsp;and
look for the <em>Text Notes</em> section. There is a corresponding section
called <em>Formatting toolbar</em>.</p>
<h2>Floating</h2>
<p>The floating bar is a more minimalist option, in which the formatting
is hidden behind two different popups.</p>
<h3>Block-level popup</h3>
<h3>Block-level popup</h3>
<p>The first popup is the block-level popup. This will appear to the left
of the current paragraph you are currently editing, as a sequence of dots:
<br>
<img src="1_Formatting toolbar_image.png" width="281" height="35">
<br
/>
<img src="1_Formatting toolbar_image.png" alt="" />
</p>
<p>Clicking this popup will reveal the formatting options that are specific
to the entire paragraph, such as setting a heading, lists, tables, etc.</p>
<p>
<img src="3_Formatting toolbar_image.png" width="682" height="104">
<img src="3_Formatting toolbar_image.png" alt="" />
</p>
<h3>Inline popup</h3>
<h3>Inline popup</h3>
<p>The inline popup appears automatically when selecting a text:</p>
<p>
<img src="Formatting toolbar_image.png" width="552" height="99">
<img src="Formatting toolbar_image.png" alt="" />
</p>
<p>All the options here apply only to the selected portion of text, such
as changing the font size, or making the text bold.</p>
<h2>Fixed</h2>
<h2>Fixed</h2>
<p>The fixed formatting offers a more traditional editing paradigm, usually
useful if a lot of formatting is needed.</p>
<p>All the options are combined into a single toolbar that will appear as
part of the&nbsp;<a class="reference-link" href="../../Basic%20Concepts/UI%20Elements/Ribbon.html">Ribbon</a>.</p>
<figure
class="image">
<img style="aspect-ratio:913/162;" src="2_Formatting toolbar_image.png"
width="913" height="162">
</figure>
<p>By default, if the toolbar does not fit on the screen, the rest of the
options will be grouped into a single option at the end. It is possible
to display items on multiple lines by checking the corresponding option
in the <i>Formatting toolbar</i> section.</p>
part of the&nbsp;<a href="../../Basic%20Concepts/UI%20Elements/Ribbon.html">Ribbon</a>.</p>
<p>
<img src="2_Formatting toolbar_image.png" alt="" />
</p>
<p>By default, if the toolbar does not fit on the screen, the rest of the
options will be grouped into a single option at the end. It is possible
to display items on multiple lines by checking the corresponding option
in the <em>Formatting toolbar</em> section.</p>
</div>
</div>
</body>

32
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Formatting.html generated Normal file
View File

@@ -0,0 +1,32 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Formatting</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Formatting</h1>
<div class="ck-content">
<h2>Developer-specific formatting</h2>
<h3>Keyboard shortcuts</h3>
<p>This allows marking a portion of text as a shortcut key.</p>
<figure class="image image-style-align-center">
<img style="aspect-ratio:415/42;" src="Formatting_image.png" width="415"
height="42">
</figure>
<p>To apply this style, press the
<img src="2_Formatting_image.png" width="20"
height="14">button in
<img src="1_Formatting_image.png" width="20" height="14">group from the&nbsp;<a class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>.
On the floating toolbar, the buttons appear when selecting a text.</p>
</div>
</div>
</body>
</html>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Formatting_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

174
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images.html generated
View File

@@ -20,112 +20,98 @@
into the <a href="../../Basic%20Concepts/Navigation/Tree%20Concepts.html">note tree</a>.
Its reference can be copied into a text note, in order to display it in
the text itself.</p>
<h2>Uploading images</h2>
<h2>Uploading images</h2>
<p>To add an image to the note, simply drag it from file explorer onto the
note editor inside Trilium and the image will be uploaded.</p>
<p>
<img src="10_Images_image.png" alt="">
<img src="10_Images_image.png" alt="" />
</p>
<p>Alternatively you can click on block toolbar and then on "Insert image":</p>
<p>
<img src="8_Images_image.png" alt="">
<img src="8_Images_image.png" alt="" />
</p>
<p>You can also copy and paste an image from web - the image will be (asynchronously)
downloaded and embedded.</p>
<h2>Configuring the images</h2>
<h2>Configuring the images</h2>
<p>Clicking on an image will reveal a popup with multiple options:
<br>
<img src="11_Images_image.png" width="285" height="35">
<br />
<img src="11_Images_image.png" alt="" />
</p>
<h3>Alignment</h3>
<h3>Alignment</h3>
<p>The first set of options configure the alignment are, in order:</p>
<figure
class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:5.52%;">
<col style="width:13.93%;">
<col style="width:35.94%;">
<col style="width:44.61%;">
</colgroup>
<thead>
<tr>
<th>Icon</th>
<th>Option</th>
<th>Preview</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="7_Images_image.png" width="16" height="13">
</td>
<td>Inline</td>
<td>
<figure class="image">
<img style="aspect-ratio:576/125;" src="2_Images_image.png" width="576"
height="125">
</figure>
</td>
<td>As the name suggests, the name can be put inside a paragraph and moved
around similarly as if it was a block of text. Use drag &amp; drop or cut-paste
to move it around.</td>
</tr>
<tr>
<td>
<img src="12_Images_image.png" width="16" height="13">
</td>
<td>Centered image</td>
<td>
<figure class="image">
<img style="aspect-ratio:564/236;" src="3_Images_image.png" width="564"
height="236">
</figure>
</td>
<td>The image will be displayed as a block and centered, not allowing text
in either the left or right of it.</td>
</tr>
<tr>
<td>
<img src="5_Images_image.png" width="33" height="13">
</td>
<td>Wrap text</td>
<td>
<figure class="image">
<img style="aspect-ratio:577/200;" src="9_Images_image.png" width="577"
height="200">
</figure>
<p>&nbsp;</p>
</td>
<td>The image will be displayed to the left or the right of the text.</td>
</tr>
<tr>
<td>
<img src="Images_image.png" width="16" height="13">
</td>
<td>Block align</td>
<td>
<figure class="image">
<img style="aspect-ratio:578/240;" src="4_Images_image.png" width="578"
height="240">
</figure>
</td>
<td>Similarly to <i>Centered image</i>, the image will be displayed as a block
and aligned either to the left or to the right, but not allowing text to
flow on either of its sides.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Compression</h2>
<p>Since Trilium isn't really meant to be primary storage for image data,
it attempts to compress and resize (with pretty aggressive settings) uploaded
images before storing them to the database. You may then notice some quality
degradation. Basic quality settings is available in Options -&gt; Other.</p>
<p>If you want to save images in their original resolution, it is recommended
to save them as attachment to note (top-right "Note actions -&gt; Import
files").</p>
<table>
<thead>
<tr>
<th>Icon</th>
<th>Option</th>
<th>Preview</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="7_Images_image.png" alt="" />
</td>
<td>Inline</td>
<td>
<img src="2_Images_image.png" alt="" />
</td>
<td>As the name suggests, the name can be put inside a paragraph and moved
around similarly as if it was a block of text. Use drag &amp; drop or cut-paste
to move it around.</td>
</tr>
<tr>
<td>
<img src="12_Images_image.png" alt="" />
</td>
<td>Centered image</td>
<td>
<img src="3_Images_image.png" alt="" />
</td>
<td>The image will be displayed as a block and centered, not allowing text
in either the left or right of it.</td>
</tr>
<tr>
<td>
<img src="5_Images_image.png" alt="" />
</td>
<td>Wrap text</td>
<td>
<img src="9_Images_image.png" alt="" />
</td>
<td>The image will be displayed to the left or the right of the text.</td>
</tr>
<tr>
<td>
<img src="Images_image.png" alt="" />
</td>
<td>Block align</td>
<td>
<img src="4_Images_image.png" alt="" />
</td>
<td>Similarly to <em>Centered image</em>, the image will be displayed as a
block and aligned either to the left or to the right, but not allowing
text to flow on either of its sides.</td>
</tr>
</tbody>
</table>
<h2>Compression</h2>
<p>Since Trilium isn't really meant to be primary storage for image data,
it attempts to compress and resize (with pretty aggressive settings) uploaded
images before storing them to the database. You may then notice some quality
degradation. Basic quality settings is available in Options -&gt; Other.</p>
<p>If you want to save images in their original resolution, it is recommended
to save them as attachment to note (top-right "Note actions -&gt; Import
files").</p>
</div>
</div>
</body>

2
src/public/app/doc_notes/en/User Guide/navigation.html generated
View File

@@ -178,6 +178,8 @@
<li><a href="User%20Guide/Note%20Types/Text/Content%20language%20%26%20Right-to-le.html"
target="detail">Content language &amp; Right-to-left support</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Formatting.html" target="detail">Formatting</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Formatting%20toolbar.html" target="detail">Formatting toolbar</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Images.html" target="detail">Images</a>