Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-16 02:05:53 +01:00
Code Issues Packages Projects Releases Activity

feat(docs): document most features of text notes

Browse Source
This commit is contained in:
Elian Doran
2025-04-11 23:15:30 +03:00
parent 15f415efeb
commit 7c88681e70
167 changed files with 3969 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

13
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.html generated
View File

@@ -45,12 +45,15 @@
<p>Apart from that, Trilium also has its own set of specific plugins such
as:</p>
<ul>
<li>Cut to note</li>
<li>Include note</li>
<li><a class="reference-link" href="#root/_help_2x0ZAX9ePtzV">Cut to subnote</a>
</li>
<li><a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>
</li>
<li>Mentions, for linking pages.</li>
<li>Markdown import.</li>
<li>Reference links.</li>
<li>etc.</li>
<li><a class="reference-link" href="#root/_help_Oau6X9rCuegd">Markdown</a>
</li>
<li><a href="#root/_help_QEAPj01N5f7w">Reference links</a>
</li>
</ul>
</div>
</div>

8
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Keyboard Shortcuts.html generated
View File

@@ -85,11 +85,11 @@
<li><kbd>Del</kbd> - delete note / sub-tree</li>
</ul>
<h2>Editing notes</h2>
<p>Trilium uses CKEditor 5 for the <a href="#root/_help_iPIMuisry3hd">text notes</a> and
CodeMirror 5 for <a href="#root/_help_6f9hih2hXXZk">code notes</a>. Check
the documentation of these projects to see all their built-in keyboard
shortcuts.</p>
<ul>
<li>For&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_iPIMuisry3hd">Text</a>&nbsp;notes,
refer to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_oiVPnW8QfnvS">Keyboard shortcuts</a>&nbsp;and&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_QrtTYPmdd1qq">Markdown-like formatting</a>.</li>
<li><kbd>Alt</kbd>-<kbd>F10</kbd> - bring up inline formatting toolbar (arrow
keys <kbd><span>←</span></kbd>,<kbd><span>→</span></kbd> to navigate, <kbd>Enter</kbd> to
apply)</li>

4
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Read-Only Notes.html generated
View File

@@ -37,11 +37,11 @@
<ul>
<li><strong>Auto</strong>
<br>This is the default behavior in which the note will be editable by default,
unless it becomes large enough to trigger read-only mode. &nbsp;</li>
unless it becomes large enough to trigger read-only mode.</li>
<li><strong>Read-only</strong>
<br>The note will be always marked as read-only, regardless of its size. Nevertheless,
it's still possible to temporarily edit the note if needed. This is generally
useful for notes that are not prone to change. &nbsp;</li>
useful for notes that are not prone to change.</li>
<li><strong>Always Editable</strong>
<br>This option will bypass the automatic read-only activation for this particular
note. It's useful for large notes that are frequently edited.</li>

19
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Zoom.html generated Normal file
View File

@@ -0,0 +1,19 @@
<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>Zoom</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Zoom</h1>
<div class="ck-content"></div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/1_Text_text-notes-formatting.png generated
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 53 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

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

@@ -13,74 +13,178 @@
<h1 data-trilium-h1>Text</h1>
<div class="ck-content">
<p>Trilium utilizes the powerful <a href="https://ckeditor.com/ckeditor-5/">CKEditor 5</a> as
its text editing component.</p>
<h2>Formatting Options</h2>
<p>The Trilium text note interface does not display toolbars or formatting
options by default. These can be accessed by:</p>
<p>
<img src="1_Text_text-notes-formatting.png" alt="inline note formatting">
</p>
<ol>
<li>Selecting text to bring up an inline toolbar.</li>
</ol>
<p>
<img src="Text_text-notes-formatting.png" alt="formating note block">2. Clicking on the block toolbar.</p>
<h2>Read-Only vs. Editing Mode</h2>
<p>Text notes are usually opened in edit mode. However, they may open in
read-only mode if the note is too big or the note is explicitly marked
as read-only. For more information, see&nbsp;<a href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>.</p>
<h2>General Formatting</h2>
<p>Since Trilium uses CKEditor, all of its formatting options are available
here. You may use the graphical toolbar shown above, or enter formatting
such as markdown markdown directly in the text. Examples include:</p>
<p>The default note type in Trilium, text notes allow for rich formatting,
tables, images, admonitions and a handful of other features.</p>
<h2>Formatting bars</h2>
<p>Most of the interaction with text notes is done via the built-in toolbars.
Depending on preference, there are two different layouts:</p>
<ul>
<li><strong>Bold</strong>: Type <code>**text**</code> or <code>__text__</code>
<li>The <em>Floating toolbar</em> is hidden by default and only appears when
needed. In this mode there are actually two different toolbars:
<br>
<img src="1_Text_image.png" width="496" height="91">
<img src="2_Text_image.png" width="812" height="114">
</li>
<li><em>Italic</em>: Type <code>*text*</code> or <code>_text_</code>
</li>
<li><del>Strikethrough</del>: Type <code>~~text~~</code>
<li>A toolbar that appears when text is selected. This provides text-level
formatting such as bold, italic, text colors, inline code, etc.
<br><em><img src="Text_image.png" width="1109" height="124"></em>
</li>
</ul>
<h3>Lists</h3>
<p>See&nbsp;<a href="#root/_help_S6Xx8QIWTV66">Lists</a>.</p>
<h3>Blocks</h3>
<ul>
<li>Block quote: Start a line with <code>&gt;</code> followed by a space</li>
</ul>
<h2>Developer-specific formatting</h2>
<p>The following features are supported:</p>
<ul>
<li>Inline code</li>
<li><a href="#root/_help_QxEyIjRBizuC">Code blocks</a>
</li>
</ul>
<p>See&nbsp;<a href="#root/_help_UYuUB1ZekNQU">Developer-specific formatting</a>&nbsp;for
more information.</p>
<h3>Headings</h3>
<p>Create headings by starting a line with <code>##</code> for heading 2, <code>###</code> for
heading 3, and so on up to heading 6. Note that <code>#</code> is reserved
for the title.</p>
<h3>Horizontal Line</h3>
<p>Insert a horizontal line by starting a line with <code>---</code>.</p>
<h2>Markdown &amp; Autoformat</h2>
<p>CKEditor supports a markdown-like editing experience, recognising syntax
and automatically converting it to rich text.</p>
<p>
<img src="Text_image.png">
</p>
<p>Complete documentation for this feature is available in the <a href="https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html">CKEditor documentation</a>.</p>
<p>If autoformatting is not desirable, press <kbd>Ctrl</kbd> + <kbd>Z</kbd> to
revert the text to its original form.</p>
<p>Note: The use of <code>#</code> for Heading 1 is not supported because it
is reserved for the title. Start with <code>##</code> for Heading 2. More
information is available <a href="https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#heading-levels">here</a>.</p>
<h2>Math Support</h2>
<p>Trilium provides math support through <a href="https://katex.org/">KaTeX</a>.</p>
<p>Fore more information see&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>.</p>
<h2>Features and formatting</h2>
<p>Here's a list of various features supported by text notes:</p>
<figure
class="image image_resized">
<img style="aspect-ratio:812/585;" src="Text_math.gif" width="812" height="585">
class="table">
<table>
<thead>
<tr>
<th>Dedicated article</th>
<th>Feature</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="reference-link" href="#root/_help_Gr6xFaF6ioJ5">General formatting</a>
</td>
<td>
<ul>
<li>Headings (section titles, paragraph)</li>
<li>Font size</li>
<li>Bold, italic, underline, strike-through</li>
<li>Superscript, subscript</li>
<li>Font color &amp; background color</li>
<li>Remove formatting</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_S6Xx8QIWTV66">Lists</a>
</td>
<td>
<ul>
<li>Bulleted lists</li>
<li>Numbered lists</li>
<li>To-do lists</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_NwBbFdNZ9h7O">Block quotes &amp; admonitions</a>
</td>
<td>
<ul>
<li>Block quotes</li>
<li>Admonitions</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_NdowYOC1GFKS">Tables</a>
</td>
<td>
<ul>
<li>Basic tables</li>
<li>Merging cells</li>
<li>Styling tables and cells.</li>
<li>Table captions</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_UYuUB1ZekNQU">Developer-specific formatting</a>
</td>
<td>
<ul>
<li>Inline code</li>
<li>Code blocks</li>
<li>Keyboard shortcuts</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_AgjCISero73a">Footnotes</a>
</td>
<td>
<ul>
<li>Footnotes</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_mT0HEkOsz6i1">Images</a>
</td>
<td>
<ul>
<li>Images</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_QEAPj01N5f7w">Links</a>
</td>
<td>
<ul>
<li>External links</li>
<li>Internal Trilium links</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>
</td>
<td>
<ul>
<li>Include note</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_CohkqWQC1iBv">Insert buttons</a>
</td>
<td>
<ul>
<li>Symbols</li>
<li><a class="reference-link" href="#root/_help_YfYAtQBcfo5V">Math Equations</a>
</li>
<li>Mermaid diagrams</li>
<li>Horizontal ruler</li>
<li>Page break</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_dEHYtoWWi8ct">Other features</a>
</td>
<td>
<ul>
<li>Indentation</li>
<li>Markdown import</li>
<li><a class="reference-link" href="#root/_help_2x0ZAX9ePtzV">Cut to subnote</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
<h2>Read-Only vs. Editing Mode</h2>
<p>Text notes are usually opened in edit mode. However, they may open in
read-only mode if the note is too big or the note is explicitly marked
as read-only. For more information, see&nbsp;<a class="reference-link"
href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>.</p>
<h2>Keyboard shortcuts</h2>
<p>There are numerous keyboard shortcuts to format the text without having
to use the mouse. For a reference of all the key combinations, see&nbsp;
<a
class="reference-link" href="#root/_help_A9Oc6YKKc65v">Keyboard Shortcuts</a>. In addition, see&nbsp;<a class="reference-link"
href="#root/_help_QrtTYPmdd1qq">Markdown-like formatting</a>&nbsp;as an
alternative to the keyboard shortcuts.</p>
<h2>Technical details</h2>
<p>For the text editing functionality, Trilium uses a commercial product
(with an open-source base) called&nbsp;<a class="reference-link" href="#root/_help_MI26XDLSAlCD">CKEditor</a>.
This brings the benefit of having a powerful WYSIWYG (What You See Is What
You Get) editor.</p>
</div>
</div>
</body>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 344 B

0
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Admonitions_image.png → src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/1_Block quotes & admonitions.png generated
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 B

0
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/1_Admonitions_image.png → src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/2_Block quotes & admonitions.png generated
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/2_Developer-specific formatt.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 231 B

After

Width:  |  Height:  |  Size: 319 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 216 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/3_Developer-specific formatt.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 231 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/3_Lists_image.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/4_Developer-specific formatt.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 30 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/4_Lists_image.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/5_Developer-specific formatt.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 352 B

After

Width:  |  Height:  |  Size: 35 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/5_Lists_image.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/6_Developer-specific formatt.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 363 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

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

@@ -1,85 +0,0 @@
<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>Admonitions</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Admonitions</h1>
<div class="ck-content">
<p>
<img src="1_Admonitions_image.png">
</p>
<p>Admonitions are a way to highlight information to the reader. Other names
for it include <em>call-outs</em> and <em>info/warning/alert boxes</em>.</p>
<h2>Inserting a new admonition</h2>
<h3>From the UI</h3>
<p>In the Formatting toolbar:</p>
<p>
<img src="Admonitions_image.png">
</p>
<h3>Via the keyboard</h3>
<p>It's possible to insert an admonition simply by typing:</p>
<ul>
<li><code>!!! note</code>
</li>
<li><code>!!! tip</code>
</li>
<li><code>!!! important</code>
</li>
<li><code>!!! caution</code>
</li>
<li><code>!!! warning</code>
</li>
</ul>
<p>In addition to that, it's also possible to type <code>!!!</code>&nbsp;
followed by any text, case in which a default admonition type will appear
(note) with the entered text inside it.</p>
<h2>Interaction</h2>
<p>By design, admonitions act very similar to block quotes.</p>
<ul>
<li>Selecting a text and pressing the admonition button will turn that text
into an admonition.</li>
<li>If selecting multiple admonitions, pressing the admonition button will
automatically merge them into one.</li>
</ul>
<p>Inside an admonition:</p>
<ul>
<li>Pressing <kbd>Backspace</kbd> while the admonition is empty will remove
it.</li>
<li>Pressing <kbd>Enter</kbd> will start a new paragraph. Pressing it twice
will exit out of the admonition.</li>
<li>Headings and other block content including tables can be inserted inside
the admonition.</li>
</ul>
<h2>Types of admonitions</h2>
<p>There are currently five types of admonitions: <em>Note</em>, <em>Tip</em>, <em>Important</em>, <em>Caution</em>, <em>Warning</em>.</p>
<p>These types were inspired by GitHub's support for this feature and there
are currently no plans for adjusting it or allowing the user to customize
them.</p>
<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-trilium-auto">&gt; [!NOTE]
&gt; This is a note.
&gt; [!TIP]
&gt; This is a tip.
&gt; [!IMPORTANT]
&gt; This is a very important information.
&gt; [!CAUTION]
&gt; This is a caution.</code></pre>
<p>There are currently no plans of supporting alternative admonition syntaxes
such as <code>!!! note</code>.</p>
</div>
</div>
</body>
</html>

98
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Block quotes & admonitions.html generated Normal file
View File

@@ -0,0 +1,98 @@
<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>Block quotes &amp; admonitions</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Block quotes &amp; admonitions</h1>
<div class="ck-content">
<h2>Block quotes</h2>
<p>As the name suggests, block quotes can be useful to cite one or more paragraphs.</p>
<p>To create a block quote, press
<img src="Block quotes & admonitions.png"
width="15" height="12">from the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>.
It's also possible to type <kbd>&gt;</kbd>, followed by a space to create
one (but only if the cursor is at the beginning of a line).</p>
<p>Inside the quote block, other block items can be inserted such as tables,
images, or even other block quotes or admonitions.</p>
<h2>Admonitions</h2>
<p>Admonitions are a way to highlight information to the reader. Other names
for it include <em>call-outs</em> and <em>info/warning/alert boxes</em>.</p>
<figure
class="image image-style-align-center">
<img style="aspect-ratio:959/547;" src="2_Block quotes & admonitions.png"
width="959" height="547">
</figure>
<p>From a functional point of view, admonitions act very similarly to a block
quote, just with different styling. This includes the ability to insert
other elements in it such as headings, tables, images, etc.</p>
<h3>Inserting a new admonition</h3>
<p>In the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>:</p>
<p>
<img src="1_Block quotes & admonitions.png">
</p>
<p>It's possible to insert an admonition simply by typing:</p>
<ul>
<li><code>!!! note</code>
</li>
<li><code>!!! tip</code>
</li>
<li><code>!!! important</code>
</li>
<li><code>!!! caution</code>
</li>
<li><code>!!! warning</code>
</li>
</ul>
<p>In addition to that, it's also possible to type <code>!!!</code>&nbsp;
followed by any text, case in which a default admonition type will appear
(note) with the entered text inside it.</p>
<h3>Interaction</h3>
<p>By design, admonitions act very similar to block quotes.</p>
<ul>
<li>Selecting a text and pressing the admonition button will turn that text
into an admonition.</li>
<li>If selecting multiple admonitions, pressing the admonition button will
automatically merge them into one.</li>
</ul>
<p>Inside an admonition:</p>
<ul>
<li>Pressing <kbd>Backspace</kbd> while the admonition is empty will remove
it.</li>
<li>Pressing <kbd>Enter</kbd> will start a new paragraph. Pressing it twice
will exit out of the admonition.</li>
<li>Headings and other block content including tables can be inserted inside
the admonition.</li>
</ul>
<h3>Types of admonitions</h3>
<p>There are currently five types of admonitions: <em>Note</em>, <em>Tip</em>, <em>Important</em>, <em>Caution</em>, <em>Warning</em>.</p>
<p>These types were inspired by GitHub's support for this feature and there
are currently no plans for adjusting it or allowing the user to customize
them.</p>
<h3>Markdown support</h3>
<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-trilium-auto">&gt; [!NOTE]
&gt; This is a note.
&gt; [!TIP]
&gt; This is a tip.
&gt; [!IMPORTANT]
&gt; This is a very important information.
&gt; [!CAUTION]
&gt; This is a caution.</code></pre>
<p>There are currently no plans of supporting alternative admonition syntaxes
such as <code>!!! note</code>.</p>
</div>
</div>
</body>
</html>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Block quotes & admonitions.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 B

14
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Developer-specific formatting.html generated
View File

@@ -17,7 +17,7 @@
<p>Inline code formats text using a monospace font to indicate technical
content in a sentence such as code, paths, etc.</p>
<p>
<img src="4_Developer-specific formatt.png">
<img src="5_Developer-specific formatt.png">
</p>
<p>Example of inline code being used to illustrate file system paths as well
as shell commands (<code>git</code> in this case).</p>
@@ -25,14 +25,14 @@
<ul>
<li>Via the&nbsp;<a href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>,
look for the
<img src="2_Developer-specific formatt.png">button.</li>
<img src="3_Developer-specific formatt.png">button.</li>
<li>Type `code` where <code>code</code> is the desired text to be automatically
formatted as inline code.</li>
</ul>
<h3>Code blocks</h3>
<p>Code blocks display a snippet of code as a dedicated block:</p>
<p>
<img src="3_Developer-specific formatt.png">
<img src="4_Developer-specific formatt.png">
</p>
<p>A code block with JavaScript syntax highlight enabled.</p>
<p>Note that these are not meant for very large portions of code. Use the
@@ -46,9 +46,15 @@
<img src="Developer-specific formatt.png">
</p>
<p>To apply this style, press the
<img src="5_Developer-specific formatt.png">button in
<img src="6_Developer-specific formatt.png">button in
<img src="1_Developer-specific formatt.png">group from the&nbsp;<a href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>.
On the floating toolbar, the buttons appear when selecting a text.</p>
<p>Alternatively, press the <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>K</kbd> combination
to apply keyboard shortcut formatting to the current text selection.</p>
<p>The formatting can be removed by pressing again the button (from the UI
or from the keyboard), or by using the
<img src="2_Developer-specific formatt.png"
width="17" height="16"> <em>Remove formatting</em> button.</p>
</div>
</div>
</body>

29
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Developer-specific formatting/Code blocks.html generated
View File

@@ -19,11 +19,10 @@
<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&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;note
type instead.</p>
href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note type instead.</p>
<h2>Inserting a code block</h2>
<ul>
<li>Via the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_nRhnJkTT8cPs">Formatting toolbar</a>,
<li>Via the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>,
look for the
<img src="Code blocks_image.png">button.
<ul>
@@ -44,7 +43,7 @@
<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="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;notes
different than the one in&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes
as different technologies are involved.</p>
<p>Interaction:</p>
<ul>
@@ -58,8 +57,8 @@
<p>Note that when editing a text note, syntax highlighting is automatically
disabled if the code block is too big (somewhere around 500 lines). This
value is currently not configurable. For&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_CoFPLs3dRlXc">Read-Only Notes</a>,
this limitation is not applied.</p>
href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>, this limitation is
not applied.</p>
<p>In order to configure this new feature, a section has been added in Options
→ Appearance to control the syntax highlighting. There the color scheme
can be chosen, from a builtin selection of themes from Highlight.js.</p>
@@ -70,9 +69,9 @@
section.</li>
</ul>
<aside class="admonition note">
<p><strong>Context regarding syntax highlighting</strong>
<br>
<br>In order to achieve the syntax highlight, the Highlight.js library is
<p><strong>Context regarding syntax highlighting</strong>
</p>
<p>In order to achieve the syntax highlight, the Highlight.js library is
being used. Do note that support for syntax highlighting in code blocks
is not a supported feature of the text editor we are using CKEditor), but
rather a hack which makes use of the highlights API (used for highlighting
@@ -91,19 +90,19 @@
in safe mode.</p>
<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="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_nRhnJkTT8cPs">Formatting toolbar</a>:
button in the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>:
<br>
<img src="2_Code blocks_image.png">
</p>
<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="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;note type.</p>
class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note type.</p>
<p>The supported languages can be adjusted by going to&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_4TIF1oA4VQRO">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>
href="#root/_help_4TIF1oA4VQRO">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="#root/_help_s8alTXmpFR61">refresh the application</a>.</p>
</div>

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

@@ -0,0 +1,41 @@
<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>Footnotes</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Footnotes</h1>
<div class="ck-content">
<figure class="image image-style-align-right">
<img style="aspect-ratio:199/187;" src="1_Footnotes_image.png" width="199"
height="187">
</figure>
<p>Footnotes are a good place to insert references to a paragraph or details
that are displayed at the bottom of the note.</p>
<h2>Interaction</h2>
<ul>
<li>To insert a new footnote, press
<img src="Footnotes_image.png" width="17"
height="12">(or press the right arrow and select <em>New footnote</em>).</li>
<li>To insert a reference to an existing footnote, press the right arrow and
select <em>Insert footnote</em>, followed by the number of the footnote
to insert.</li>
<li>Hovering over a reference (e.g. <code>[1]</code>) will display the content
of the footnote in a tooltip for easy reference.</li>
<li>Clicking on a reference in the text (e.g. <code>[1]</code>) will navigate
to the corresponding footnote.</li>
<li>Similarly, clicking on the <code>^</code> button of a footnote will navigate
to the corresponding reference in the text.</li>
</ul>
</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 B

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

@@ -15,9 +15,10 @@
<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 href="#root/_help_4TIF1oA4VQRO">Options</a>&nbsp;and
look for the <em>Text Notes</em> section. There is a corresponding section
called <em>Formatting toolbar</em>.</p>
<p>The type of formatting toolbar can be changed by going to&nbsp;<a class="reference-link"
href="#root/_help_4TIF1oA4VQRO">Options</a>&nbsp;and then looking for the&nbsp;
<a
class="reference-link" href="#root/_options/_help__optionsTextNotes">Text Notes</a>&nbsp;section. In it, look for the <em>Formatting toolbar</em> category.</p>
<h2>Floating</h2>
<p>The floating bar is a more minimalist option, in which the formatting
is hidden behind two different popups.</p>

114
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/General formatting.html generated Normal file
View File

@@ -0,0 +1,114 @@
<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>General formatting</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>General formatting</h1>
<div class="ck-content">
<h2>Headings</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:255/284;" src="3_General formatting_image.png"
width="255" height="284">
</figure>
<p>Trilium provides headings to define sections within text. Headings are
numbered from 2 to 6.</p>
<p>The reason why Heading 1 is missing from the list is that it is being
reserved for the title of note.</p>
<p>To turn a heading back into a normal text, select <em>Paragraph</em> from
the list.</p>
<p>Apart from using the UI, it is also possible to quickly insert headings
using the Markdown-like shortcuts:</p>
<ul>
<li><code>##</code> for Heading 2</li>
<li><code>###</code> for Heading 3</li>
<li><code>####</code> for Heading 4</li>
<li><code>#####</code> for Heading 5</li>
<li><code>######</code> for Heading 6</li>
</ul>
<h2>Font size</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:363/249;" src="General formatting_image.png"
width="363" height="249">
</figure>
<p>One way to highlight a portion of text is to increase the size of the
font.</p>
<p>To do so, select some text and choose an option from the <em>Font size</em> selector
(as pictured to the right).</p>
<p>Unlike other text editors such as Microsoft Word, the font size is relative
(i.e. “Tiny”, “Small” instead of a number like 12).</p>
<p>Avoid using this feature just to simply make all text bigger. In that
case it's generally better to adjust the font size for all notes in&nbsp;
<a
class="reference-link" href="#root/_help_4TIF1oA4VQRO">Options</a>&nbsp;or by zooming.</p>
<h2>Bold, italic, underline, strike-through</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:215/71;" src="4_General formatting_image.png"
width="215" height="71">
</figure>
<p>Text can be formatted as <strong>Bold,</strong> <em>Italic,</em> Underline
or <del>Strike-through</del> via the dedicated buttons in the formatting
toolbar.</p>
<p>This formatting can be easily removed using the <em>Remove formatting</em> item.</p>
<p>The following keyboard shortcuts can be used here:</p>
<ul>
<li><kbd>Ctrl</kbd>+<kbd>B</kbd> for bold</li>
<li><kbd>Ctrl</kbd>+<kbd>I</kbd> for italic</li>
<li><kbd>Ctrl</kbd>+<kbd>U</kbd> for underline</li>
</ul>
<p>Alternatively, Markdown-like formatting can be used:</p>
<ul>
<li><strong>Bold</strong>: Type <code>**text**</code> or <code>__text__</code>
</li>
<li><em>Italic</em>: Type <code>*text*</code> or <code>_text_</code>
</li>
<li><del>Strikethrough</del>: Type <code>~~text~~</code>
</li>
</ul>
<h2>Superscript, subscript</h2>
<p>This allows writing superscript or subscript text.</p>
<p>This is mostly useful for units of measure (e.g. cm3 for cubic centimeters)
and chemical notations (e.g. NaHCO3)</p>
<p>For mathematical formulas, prefer the&nbsp;<a class="reference-link" href="#root/_help_YfYAtQBcfo5V">Math Equations</a>&nbsp;feature
instead.</p>
<h2>Font color and background color</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:167/204;" src="2_General formatting_image.png"
width="167" height="204">
</figure>
<p>Selected text can be colored with one of the predefined colors from a
palette or any color can be selected using the color picker.</p>
<p>Once there is at least one color defined in the document, it will appear
in the list for easy reuse.</p>
<p>When selecting a foreground or a background color, consider the contrast
if switching between a dark theme or a light <a href="#root/_help_Wy267RK4M69c">theme</a>.</p>
<p>To remove either the background or foreground color of a text, select
the corresponding formatting button and press <em>Remove color</em> or use
the <em>Remove formatting</em> toolbar item.</p>
<h2>Remove formatting</h2>
<p>The
<img src="1_General formatting_image.png" width="17" height="16"> <em>Remove formatting</em> button is a quick way to eliminate the general
formatting styling of a particular text.</p>
<p>Simply select the text and press the button to remove the formatting (bold,
italic, colors, sizes, etc.). If the text does not have any removable formatting,
the button will appear disabled.</p>
<p>Note that heading styles are not taken into consideration, these must
be manually changed back to a paragraph according to the <em>Headings</em> section.</p>
<p>When pasting content that comes with undesired formatting, an alternative
to pasting and then removing formatting is pasting as plain text via <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.</p>
<h2>Support for Markdown</h2>
<p>When exported to&nbsp;<a class="reference-link" href="#root/_help_Oau6X9rCuegd">Markdown</a>,
most of the general formatting is maintained such as headings, bold, italic,
underline, etc.</p>
</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

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

@@ -39,72 +39,86 @@
</p>
<h3>Alignment</h3>
<p>The first set of options configure the alignment are, in order:</p>
<table>
<thead>
<tr>
<th>Icon</th>
<th>Option</th>
<th>Preview</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="5_Images_image.png">
</td>
<td>Inline</td>
<td>
<img src="1_Images_image.png">
</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="10_Images_image.png">
</td>
<td>Centered image</td>
<td>
<img src="2_Images_image.png">
</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="4_Images_image.png">
</td>
<td>Wrap text</td>
<td>
<img src="7_Images_image.png">
</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">
</td>
<td>Block align</td>
<td>
<img src="3_Images_image.png">
</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>
<figure
class="table">
<table>
<thead>
<tr>
<th>Icon</th>
<th>Option</th>
<th>Preview</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="5_Images_image.png">
</td>
<td>Inline</td>
<td>
<img src="1_Images_image.png">
</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="10_Images_image.png">
</td>
<td>Centered image</td>
<td>
<img src="2_Images_image.png">
</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="4_Images_image.png">
</td>
<td>Wrap text</td>
<td>
<img src="7_Images_image.png">
</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">
</td>
<td>Block align</td>
<td>
<img src="3_Images_image.png">
</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>
</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>
<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&nbsp;<a class="reference-link"
href="#root/_help_4TIF1oA4VQRO">Options</a>&nbsp;→ Other.</p>
<p>If you want to save images in their original resolution, it is recommended
to save them as attachment to note (look for the contextual menu in&nbsp;
<a
class="reference-link" href="#root/_help_8YBEPzcpUgxw">Note buttons</a>&nbsp;→ <em>Import files</em>).</p>
<h2>Aligning images side-by-side</h2>
<p>There are generally two ways to display images side by side:</p>
<ul>
<li>If they are roughly the same size, simply make the two images in-line,
according to the alignment section above. The images can be dragged &amp;
dropped onto the same line.</li>
<li>If they are on different size, create a <a href="#root/_help_NdowYOC1GFKS">table</a> with
invisible borders.</li>
</ul>
</div>
</div>
</body>

80
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Insert buttons.html generated Normal file
View File

@@ -0,0 +1,80 @@
<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>Insert buttons</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Insert buttons</h1>
<div class="ck-content">
<p>Press the
<img src="4_Insert buttons_image.png" width="34" height="16">button in the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>&nbsp;to
reveal special inserable items and blocks such as symbols, Math expressions
and separators.</p>
<h2>Symbols</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:346/322;" src="1_Insert buttons_image.png" width="346"
height="322">
</figure>
<p>Pressing the
<img src="7_Insert buttons_image.png" width="18" height="15">button will reveal a popup window displaying a list of characters that
are generally more difficult to insert directly from the keyboard, such
as a subset of emojis, quotation characters, etc.</p>
<p>Interaction:</p>
<ul>
<li>Click on a character to insert it at the current cursor position.</li>
<li>The window can be dragged around by the top bar where the title is, to
avoid it getting in the way of the text.</li>
<li>Click on the <em>Category</em> selector to filter the characters.</li>
</ul>
<h2>Math equations</h2>
<p>See the dedicated&nbsp;<a class="reference-link" href="#root/_help_YfYAtQBcfo5V">Math Equations</a>&nbsp;page.</p>
<h2>Mermaid diagram</h2>
<p>Press the
<img src="2_Insert buttons_image.png" width="16" height="17">button to create an inline Mermaid diagram.</p>
<p>This feature is quite similar to the&nbsp;<a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>&nbsp;note
types and is meant as an alternative to it for simple diagrams. For more
complex diagrams, use the&nbsp;<a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>&nbsp;feature
for a dedicated Mermaid note.</p>
<figure class="image">
<img style="aspect-ratio:1174/358;" src="6_Insert buttons_image.png" width="1174"
height="358">
</figure>
<h2>Horizontal ruler</h2>
<p>This feature will display a horizontal line, generally useful to separate
different sections of the text. To do so, press the
<img src="5_Insert buttons_image.png"
width="18" height="16">button in the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>.</p>
<img
src="3_Insert buttons_image.png" width="502" height="95">
<p>Alternatively, it's possible to insert a horizontal ruler by typing <code>---</code>.</p>
<h2>Page break</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:371/79;" src="8_Insert buttons_image.png" width="371"
height="79">
</figure>
<p>Page breaks provide a way to force the next paragraph or block (table,
image, etc.) to be displayed onto the next page when printing (either to
a real printer to <a href="#root/_help_NRnIZmSMc5sj">when exporting to PDF</a>).</p>
<p>Page breaks are marked in the editor with the words <em>Page break</em>,
but they will not actually be shown when printed.</p>
<ul>
<li>To insert a page break, press the
<img src="Insert buttons_image.png" width="20"
height="19">in the formatting toolbar.</li>
<li>To insert many page breaks at once, insert a page break first, click on
it and press <kbd>Ctrl</kbd>+<kbd>C</kbd>. Then use <kbd>Ctrl</kbd>+<kbd>V</kbd>,
to paste as many times as needed.</li>
</ul>
</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 B

355
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Keyboard shortcuts.html generated Normal file
View File

@@ -0,0 +1,355 @@
<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>Keyboard shortcuts</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Keyboard shortcuts</h1>
<div class="ck-content">
<aside class="admonition tip">
<p>This section of keyboard shortcuts presents a subset of the keyboard shortcuts
as supported by the editor technology we are using,&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/1YeN2MzFUluU/_help_MI26XDLSAlCD">CKEditor</a>.
The shortcuts were taken from the <a href="https://ckeditor.com/docs/ckeditor5/latest/features/accessibility.html#keyboard-shortcuts">official documentation</a>.
Note that not all the shortcuts in the original documentation are applicable
(due to using a different configuration).</p>
</aside>
<h3>Content editing</h3>
<figure class="table">
<table>
<thead>
<tr>
<th>Action</th>
<th>PC</th>
<th>Mac</th>
</tr>
</thead>
<tbody>
<tr>
<td>Insert a hard break (a new paragraph)</td>
<td><kbd>Enter</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Insert a soft break (a <code>&lt;br&gt;</code> element)</td>
<td><kbd>Shift</kbd>+<kbd>Enter</kbd>
</td>
<td><kbd>⇧Enter</kbd>
</td>
</tr>
<tr>
<td>Copy selected content</td>
<td><kbd>Ctrl</kbd>+<kbd>C</kbd>
</td>
<td><kbd>⌘C</kbd>
</td>
</tr>
<tr>
<td>Paste content</td>
<td><kbd>Ctrl</kbd>+<kbd>V</kbd>
</td>
<td><kbd>⌘V</kbd>
</td>
</tr>
<tr>
<td>Paste content as plain text</td>
<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>
</td>
<td><kbd>⌘⇧V</kbd>
</td>
</tr>
<tr>
<td>Undo</td>
<td><kbd>Ctrl</kbd>+<kbd>Z</kbd>
</td>
<td><kbd>⌘Z</kbd>
</td>
</tr>
<tr>
<td>Redo</td>
<td><kbd>Ctrl</kbd>+<kbd>Y</kbd>, <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd>
</td>
<td><kbd>⌘Y</kbd>, <kbd>⌘⇧Z</kbd>
</td>
</tr>
<tr>
<td>Bold text</td>
<td><kbd>Ctrl</kbd>+<kbd>B</kbd>
</td>
<td><kbd>⌘B</kbd>
</td>
</tr>
<tr>
<td>Change text case</td>
<td><kbd>Shift</kbd>+<kbd>F3</kbd>
</td>
<td><kbd>⇧F3</kbd> (may require <kbd>Fn</kbd>)</td>
</tr>
<tr>
<td>Create link</td>
<td><kbd>Ctrl</kbd>+<kbd>K</kbd>
</td>
<td><kbd>⌘K</kbd>
</td>
</tr>
<tr>
<td>Move out of a link</td>
<td><kbd>←←</kbd>, <kbd>→→</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Move out of an inline code style</td>
<td><kbd>←←</kbd>, <kbd>→→</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Select all</td>
<td><kbd>Ctrl</kbd>+<kbd>A</kbd>
</td>
<td><kbd>⌘A</kbd>
</td>
</tr>
<tr>
<td>Find in the document</td>
<td><kbd>Ctrl</kbd>+<kbd>F</kbd>
</td>
<td><kbd>⌘F</kbd>
</td>
</tr>
<tr>
<td>Copy text formatting</td>
<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd>
</td>
<td><kbd>⌘⇧C</kbd>
</td>
</tr>
<tr>
<td>Paste text formatting</td>
<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>
</td>
<td><kbd>⌘⇧V</kbd>
</td>
</tr>
<tr>
<td>Italic text</td>
<td><kbd>Ctrl</kbd>+<kbd>I</kbd>
</td>
<td><kbd>⌘I</kbd>
</td>
</tr>
<tr>
<td>Strikethrough text</td>
<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>
</td>
<td><kbd>⌘⇧X</kbd>
</td>
</tr>
<tr>
<td>Underline text</td>
<td><kbd>Ctrl</kbd>+<kbd>U</kbd>
</td>
<td><kbd>⌘U</kbd>
</td>
</tr>
<tr>
<td>Revert autoformatting action</td>
<td><kbd>Backspace</kbd>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</figure>
<h3>Interacting with blocks</h3>
<p>Blocks are images, tables, blockquotes, annotations.</p>
<figure class="table">
<table>
<thead>
<tr>
<th>Action</th>
<th>PC</th>
<th>Mac</th>
</tr>
</thead>
<tbody>
<tr>
<td>Insert a new paragraph directly after a widget</td>
<td><kbd>Enter</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Insert a new paragraph directly before a widget</td>
<td><kbd>Shift</kbd>+<kbd>Enter</kbd>
</td>
<td><kbd>⇧Enter</kbd>
</td>
</tr>
<tr>
<td>Move the caret to allow typing directly before a widget</td>
<td><kbd>↑</kbd>, <kbd>←</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Move the caret to allow typing directly after a widget</td>
<td><kbd>↓</kbd>, <kbd>→</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>After entering a nested editable, move the selection to the closest ancestor
widget. For example: move from an image caption to the whole image widget.</td>
<td><kbd>Tab</kbd> then <kbd>Esc</kbd>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</figure>
<p>Specifically for lists:</p>
<figure class="table">
<table>
<thead>
<tr>
<th>Action</th>
<th>PC</th>
<th>Mac</th>
</tr>
</thead>
<tbody>
<tr>
<td>Increase list item indent</td>
<td><kbd>⇥</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Decrease list item indent</td>
<td><kbd>Shift</kbd>+<kbd>⇥</kbd>
</td>
<td><kbd>⇧⇥</kbd>
</td>
</tr>
</tbody>
</table>
</figure>
<p>In tables:</p>
<figure class="table">
<table>
<thead>
<tr>
<th>Action</th>
<th>PC</th>
<th>Mac</th>
</tr>
</thead>
<tbody>
<tr>
<td>Move the selection to the next cell</td>
<td><kbd>⇥</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Move the selection to the previous cell</td>
<td><kbd>Shift</kbd>+<kbd>⇥</kbd>
</td>
<td><kbd>⇧⇥</kbd>
</td>
</tr>
<tr>
<td>Insert a new table row (when in the last cell of a table)</td>
<td><kbd>⇥</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Navigate through the table</td>
<td><kbd>↑</kbd>, <kbd>→</kbd>, <kbd>↓</kbd>, <kbd>←</kbd>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</figure>
<h3>General UI shortcuts</h3>
<figure class="table">
<table>
<thead>
<tr>
<th>Action</th>
<th>PC</th>
<th>Mac</th>
</tr>
</thead>
<tbody>
<tr>
<td>Close contextual balloons, dropdowns, and dialogs</td>
<td><kbd>Esc</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Open the accessibility help dialog</td>
<td><kbd>Alt</kbd>+<kbd>0</kbd>
</td>
<td><kbd>⌥0</kbd>
</td>
</tr>
<tr>
<td>Move focus between form fields (inputs, buttons, etc.)</td>
<td><kbd>⇥</kbd>, <kbd>Shift</kbd>+<kbd>⇥</kbd>
</td>
<td><kbd>⇥</kbd>, <kbd>⇧⇥</kbd>
</td>
</tr>
<tr>
<td>Move focus to the toolbar, navigate between toolbars</td>
<td><kbd>Alt</kbd>+<kbd>F10</kbd>
</td>
<td><kbd>⌥F10</kbd> (may require <kbd>Fn</kbd>)</td>
</tr>
<tr>
<td>Navigate through the toolbar or menu bar</td>
<td><kbd>↑</kbd>, <kbd>→</kbd>, <kbd>↓</kbd>, <kbd>←</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Navigate to the next focusable field or an element outside the editor</td>
<td><kbd>Tab</kbd>, <kbd>Shift</kbd>+<kbd>Tab</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Execute the currently focused button. Executing buttons that interact
with the editor content moves the focus back to the content.</td>
<td><kbd>Enter</kbd>, <kbd>Space</kbd>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Move focus in and out of an active dialog window</td>
<td><kbd>Ctrl</kbd>+<kbd>F6</kbd>
</td>
<td><kbd>⌘F6</kbd> (may require <kbd>Fn</kbd>)</td>
</tr>
</tbody>
</table>
</figure>
</div>
</div>
</body>
</html>

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

@@ -15,69 +15,100 @@
<div class="ck-content">
<p>There are three types of lists supported by text notes:</p>
<ul>
<li>Bulleted lists (also known as unordered lists).</li>
<li>Numbered lists (or ordered lists).</li>
<li>To-do lists</li>
<li>
<img src="7_Lists_image.png" width="17" height="13">Bulleted lists (also known as unordered lists).</li>
<li>
<img src="8_Lists_image.png" width="18" height="16">Numbered lists (or ordered lists).</li>
<li>
<img src="10_Lists_image.png" width="19" height="13">To-do lists</li>
</ul>
<h2>Keyboard shortcuts</h2>
<p>For bulleted and numbered lists, it's possible to configure an alternative
marker such as squares or Roman numbering by pressing the
<img src="9_Lists_image.png"
width="10" height="6">icon. For numbered lists, it's also possible to specify the number to
start at or whether to count in reverse order.</p>
<h2>Keyboard interaction</h2>
<ul>
<li>Bulleted list: Start a line with <code>*</code> or <code>-</code> followed
by a space;</li>
<li>Numbered list: Start a line with <code>1.</code> or <code>1)</code> followed
by a space;</li>
<li>To-do list: Start a line with <code>[ ]</code> for an unchecked item or <code>[x]</code> for
a checked item.</li>
<li>To create a new list:
<ul>
<li>Bulleted list: Start a line with <code>*</code> or <code>-</code> followed
by a space;</li>
<li>Numbered list: Start a line with <code>1.</code> or <code>1)</code> followed
by a space;</li>
<li>To-do list: Start a line with <code>[ ]</code> for an unchecked item or <code>[x]</code> for
a checked item.</li>
</ul>
</li>
<li>To create a new item in the list, press <kbd>Enter</kbd>.</li>
<li>To create a blank line within a list item, press <kbd>Shift</kbd>+<kbd>Enter</kbd>.</li>
<li>To exit out of the list, press <kbd>Enter</kbd> twice.</li>
<li>To merge two lists, simply delete the gap between them.</li>
<li>To create nested lists, simply use the
<img src="2_Lists_image.png" width="17"
height="14">button (see <em>Indentation</em> in&nbsp;<a class="reference-link" href="#root/_help_dEHYtoWWi8ct">Other features</a>)
or the <kbd>Tab</kbd> key. To decrease the nesting level for the current
element, press <kbd>Shift</kbd>+<kbd>Tab</kbd>.</li>
</ul>
<h2>Headings, code blocks within lists</h2>
<p>It possible to add content-level blocks such as headings, code blocks,
tables within lists, as follows:</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="5_Lists_image.png">
</td>
<td>First, create a list.</td>
</tr>
<tr>
<td>
<img src="3_Lists_image.png">
</td>
<td>Press Enter to create a new list item.</td>
</tr>
<tr>
<td>
<img src="4_Lists_image.png">
</td>
<td>Press Backspace to get rid of the bullet point. Notice the cursor position.</td>
</tr>
<tr>
<td>
<img src="1_Lists_image.png">
</td>
<td>At this point, insert any desired block-level item such as a code block.</td>
</tr>
<tr>
<td>
<img src="Lists_image.png">
</td>
<td>To continue with a new bullet point, press Enter until the cursor moves
to a new blank position.</td>
</tr>
<tr>
<td>
<img src="2_Lists_image.png">
</td>
<td>Press Enter once more to create the new bullet.</td>
</tr>
</tbody>
</table>
<figure class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:4.79%;">
<col style="width:57.19%;">
<col style="width:38.02%;">
</colgroup>
<tbody>
<tr>
<th>1</th>
<td>
<img src="6_Lists_image.png">
</td>
<td>First, create a list.</td>
</tr>
<tr>
<th>2</th>
<td>
<img src="4_Lists_image.png">
</td>
<td>Press Enter to create a new list item.</td>
</tr>
<tr>
<th>3</th>
<td>
<img src="5_Lists_image.png">
</td>
<td>Press Backspace to get rid of the bullet point. Notice the cursor position.</td>
</tr>
<tr>
<th>4</th>
<td>
<img class="image_resized" style="aspect-ratio:676/112;width:98.29%;"
src="1_Lists_image.png" width="676" height="112">
</td>
<td>At this point, insert any desired block-level item such as a code block.</td>
</tr>
<tr>
<th>5</th>
<td>
<img class="image_resized" style="aspect-ratio:675/129;width:94.22%;"
src="Lists_image.png" width="675" height="129">
</td>
<td>To continue with a new bullet point, press Enter until the cursor moves
to a new blank position.</td>
</tr>
<tr>
<th>6</th>
<td>
<img class="image_resized" style="aspect-ratio:675/129;width:100%;" src="3_Lists_image.png"
width="675" height="129">
</td>
<td>Press Enter once more to create the new bullet.</td>
</tr>
</tbody>
</table>
</figure>
<p>The same principle applies to all three list types (bullet, numbered and
to-do).</p>
</div>

84
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Markdown-like formatting.html generated Normal file
View File

@@ -0,0 +1,84 @@
<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>Markdown-like formatting</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Markdown-like formatting</h1>
<div class="ck-content">
<p>Markdown-like formatting allows inserting some basic formatting by typing
the Markdown equivalent. Note that this does not mean that&nbsp;<a class="reference-link"
href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes supports Markdown,
these are just some convenience shortcuts.</p>
<p>To import more complex formatting into text notes, consider using the
<a
href="#root/_help_dEHYtoWWi8ct"><em>Import from Markdown</em>
</a>function. For fully-fleged Markdown notes imports, consider using the
dedicated <a href="#root/_help_Oau6X9rCuegd">import</a> function.</p>
<ul>
<li>For <a href="#root/_help_Gr6xFaF6ioJ5">headings:</a>
<ul>
<li><code>##</code> for Heading 2 (the first-level heading is reserved for
the note title).</li>
<li><code>###</code> for Heading 3</li>
<li><code>####</code> for Heading 4</li>
<li><code>#####</code> for Heading 5</li>
<li><code>######</code> for Heading 6</li>
</ul>
</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_Gr6xFaF6ioJ5">General formatting</a>:
<ul>
<li><strong>Bold</strong>: Type <code>**text**</code> or <code>__text__</code>
</li>
<li><em>Italic</em>: Type <code>*text*</code> or <code>_text_</code>
</li>
<li><del>Strikethrough</del>: Type <code>~~text~~</code>
</li>
</ul>
</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_S6Xx8QIWTV66">Lists</a>:
<ul>
<li>Bulleted list: Start a line with <code>*</code> or <code>-</code> followed
by a space;</li>
<li>Numbered list: Start a line with <code>1.</code> or <code>1)</code> followed
by a space;</li>
<li>To-do list: Start a line with <code>[ ]</code> for an unchecked item or <code>[x]</code> for
a checked item.</li>
</ul>
</li>
<li>For <a href="#root/_help_NwBbFdNZ9h7O">block quotes</a>, press <code>&gt;</code>,
followed by a space.</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_QxEyIjRBizuC">Code blocks</a>,
type <code>```</code>.</li>
<li>For a <a href="#root/_help_dEHYtoWWi8ct">horizontal line</a>, type <code>---</code>.</li>
<li>For <a href="#root/_help_NwBbFdNZ9h7O">admonitions</a>:
<ul>
<li><code>!!! note</code>
</li>
<li><code>!!! tip</code>
</li>
<li><code>!!! important</code>
</li>
<li><code>!!! caution</code>
</li>
<li><code>!!! warning</code>
</li>
<li>Starting any other text with <code>!!!</code> will insert a note admonition
with the text inside of it.</li>
</ul>
</li>
</ul>
<p>If auto-formatting is not desirable, press <kbd>Ctrl</kbd> + <kbd>Z</kbd> to
revert the text to its original form.</p>
</div>
</div>
</body>
</html>

53
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Math Equations.html generated Normal file
View File

@@ -0,0 +1,53 @@
<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>Math Equations</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Math Equations</h1>
<div class="ck-content">
<figure class="image image-style-align-right">
<img style="aspect-ratio:350/193;" src="Math Equations_image.png" width="350"
height="193">
</figure>
<p>Within text notes, it's possible to enter mathematical equations using
the
<img src="1_Math Equations_image.png" width="20" height="15">button from the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>&nbsp;(generally
found under the&nbsp;<a class="reference-link" href="#root/_help_CohkqWQC1iBv">Insert buttons</a>).</p>
<p>If inserting equations frequently, using the <kbd>Ctrl</kbd>+<kbd>M</kbd> keyboard
shortcut can be more comfortable.</p>
<p>There is currently no quick way to insert an equation, such as surrounding
it with <code>$</code> or pressing <kbd>Ctrl</kbd>+<kbd>M</kbd> on an already
typed-out equation.</p>
<p>The mathematical expression must be written in the TeX format. There is
no visual editor for the math equations, only a preview.&nbsp;</p>
<p>Enabling <em>Display mode</em> will render the equation slightly bigger
(especially if using big operators such as summation, or fractions) and
center it. Display mode equations will act as blocks (i.e. like paragraphs,
or tables) and can be inserted for example in lists. Non-display equations
can be part of the text.</p>
<h2>Supported math features</h2>
<p>Technically we are using the KaTeX library which allows for a subset of
the TeX format. To see the full list of supported features, consult the
<a
href="https://katex.org/docs/supported">Supported Functions</a>and the <a href="https://katex.org/docs/support_table">Support Table</a> from
the official documentation.</p>
<h2>Markdown support</h2>
<p>Math equations will be preserved when exporting to or importing from Markdown,
surrounded by <code><span class="math-tex">\(</span></code> characters for
inline math expressions, and <code>$\)</code> for display mode.</p>
<p>If you notice any issue with the Markdown import/export for equations,
feel free to <a href="#root/_help_wy8So3yZZlH9">report</a> it while providing
the equation that causes issues.</p>
</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

71
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Other features.html generated Normal file
View File

@@ -0,0 +1,71 @@
<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>Other features</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Other features</h1>
<div class="ck-content">
<h2>Indentation</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:201/124;" src="6_Other features_image.png" width="201"
height="124">
</figure>
<p>Paragraphs can be indented to the right using the &nbsp;button from the&nbsp;
<a
class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>.</p>
<ul>
<li>Press
<img src="5_Other features_image.png" width="17" height="14">to increase the indentation of the current paragraph by one. Can be pressed
multiple times if needed.</li>
<li>Press
<img src="1_Other features_image.png" width="17" height="14">to decrease the indentation of a current paragraph. The button will be
disabled if it is already at the minimum indentation level.</li>
<li>For convenience, keyboard shortcuts are also available. Press <kbd>Tab</kbd> to
indent or <kbd>Shift</kbd>+<kbd>Tab</kbd> to decrease the indentation. These
shortcuts work even if the cursor is not at the beginning of a paragraph
or a list.</li>
<li>Apart from paragraphs, the indent button is also enabled in&nbsp;<a class="reference-link"
href="#root/_help_S6Xx8QIWTV66">Lists</a>, where it can be used to create
nested lists.</li>
</ul>
<h2>Markdown import</h2>
<p>If the clipboard contains Markdown text, it can be easily imported into
text notes. Simply copy a Markdown-formatted text and press the
<img src="2_Other features_image.png"
width="20" height="14">to insert its visual representation.</p>
<p>Note that this only works with raw Markdown (e.g. <code># Heading 1</code> to
generate a heading) and not the visual representation of the Markdown (e.g.
as in the preview pane of an application). In that case, simply use the
paste function which already accepts HTML-formatted content.</p>
<p>This is mostly useful for snippets of text, for entire Markdown documents
use the dedicated&nbsp;<a class="reference-link" href="#root/_help_Oau6X9rCuegd">Markdown</a>&nbsp;import/export
function.</p>
<p>If accessing Trilium with a web browser, the Markdown import action will
ask for the content to be inserted into a dedicated screen since it does
not have access to the clipboard.</p>
<h2>Cut to subnote</h2>
<p>The
<img src="Other features_image.png" width="16" height="20">button will create a child note with the selected text. For more information,
see&nbsp;<a class="reference-link" href="#root/_help_2x0ZAX9ePtzV">Cut to subnote</a>.</p>
<h2>Find and replace</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:394/203;" src="4_Other features_image.png" width="394"
height="203">
</figure>
<p>The
<img src="3_Other features_image.png" width="18" height="17">button will open the editor's dedicated search and replace functionality.</p>
<p>Alternatively, the <kbd>Ctrl</kbd>+<kbd>F</kbd> combination can be pressed
to show the dialog.</p>
</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 440 B

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

@@ -0,0 +1,168 @@
<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>Tables</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Tables</h1>
<div class="ck-content">
<p>Tables are a powerful feature for&nbsp;<a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes,
since editing them is generally easy.</p>
<figure class="image image-style-align-right">
<img style="aspect-ratio:176/204;" src="6_Tables_image.png" width="176"
height="204">
</figure>
<p>To create a table, simply press the table button and select with the mouse
the desired amount of columns and rows, as indicated in the adjacent figure.</p>
<h2>Formatting toolbar</h2>
<p>When a table is selected, a special formatting toolbar will appear:</p>
<img
src="9_Tables_image.png" width="384" height="100">
<h2>Navigating a table</h2>
<ul>
<li>Using the mouse:
<ul>
<li>Click on a cell to focus it.</li>
<li>Click the
<img src="10_Tables_image.png" width="28" height="27">button at the top or the bottom of a table to insert an empty paragraph
near it.</li>
<li>Click the
<img src="5_Tables_image.png" width="24" height="26">button at the top-left of the table to select it entirely (for easy copy-pasting
or cutting) or drag and drop it to relocate the table.</li>
</ul>
</li>
<li>Using the keyboard:
<ul>
<li>Use the arrow keys on the keyboard to easily navigate between cells.</li>
<li>It's also possible to use <kbd>Tab</kbd> to go to the next cell and Shift+Tab
to go to the previous cell.</li>
<li>Unlike arrow keys, pressing <kbd>Tab</kbd> at the end of the table (last
row, last column) will create a new row automatically.</li>
<li>To select multiple cells, hold <kbd>Shift</kbd> while using the arrow keys.</li>
</ul>
</li>
</ul>
<h2>Resizing cells</h2>
<ul>
<li>Columns can be resized by hovering the mouse over the border of two adjacent
cells and dragging it.</li>
<li>By default, the row height is not adjustable using the mouse, but it can
be configured from the cell settings (see below).</li>
<li>To adjust exactly the width (in pixels or percentages) of a cell, select
the
<img src="8_Tables_image.png" width="19" height="19">button.</li>
</ul>
<h2>Inserting new rows and new columns</h2>
<ul>
<li>To insert a new column, click on a desired location, then press the
<img
src="Tables_image.png" width="18" height="20">button from the formatting toolbar and select <em>Insert column left or right.</em>
</li>
<li>To insert a new row, click on a desired location, then press the
<img src="7_Tables_image.png"
width="20" height="18">button and select <em>Insert row above</em> or <em>below</em>.
<ul>
<li>A quicker alternative to creating a new row while at the end of the table
is to press the <kbd>Tab</kbd> key.</li>
</ul>
</li>
</ul>
<h2>Merging cells</h2>
<p>To merge two or more cells together, simply select them via drag &amp;
drop and press the
<img src="1_Tables_image.png" width="19" height="19">button from the formatting toolbar.</p>
<p>More options are available by pressing the arrow next to it:</p>
<ul>
<li>Click on a single cell and select Merge cell up/down/right/left to merge
with an adjacent cell.</li>
<li>Select <em>Split cell vertically</em> or <em>horizontally</em>, to split
a cell into multiple cells (can also be used to undo a merge).</li>
</ul>
<h2>Table properties</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:312/311;" src="2_Tables_image.png" width="312"
height="311">
</figure>
<p>The table properties can be accessed via the
<img src="12_Tables_image.png"
width="19" height="19">button and allows for the following adjustments:</p>
<ul>
<li>Border (not the border of the cells, but the outer rim of the table),
which includes the style (single, double), color and width.</li>
<li>The background color, with none set by default.</li>
<li>The width and height of the table in percentage (must end with <code>%</code>)
or pixels (must end with <code>px</code>).</li>
<li>The alignment of the table.
<ul>
<li>Left or right-aligned, case in which the text will flow next to it.</li>
<li>Centered, case in which text will avoid the table, regardless of the table
width.</li>
</ul>
</li>
</ul>
<p>The table will immediately update to reflect the changes, but the <em>Save</em> button
must be pressed for the changes to persist.</p>
<h2>Cell properties</h2>
<figure class="image image-style-align-right">
<img style="aspect-ratio:320/386;" src="3_Tables_image.png" width="320"
height="386">
</figure>
<p>Similarly to table properties, the
<img src="11_Tables_image.png" width="19"
height="19">button opens a popup which adjusts the styling of one or more cells (based
on the user's selection).</p>
<p>The following options can be adjusted:</p>
<ul>
<li>The border style, color and width (same as table properties), but applying
to the current cell only.</li>
<li>The background color, with none set by default.</li>
<li>The width and height of the cell in percentage (must end with <code>%</code>)
or pixels (must end with <code>px</code>).</li>
<li>The padding (the distance of the text compared to the cell's borders).</li>
<li>The alignment of the text, both horizontally (left, centered, right, justified)
and vertically (top, middle or bottom).</li>
</ul>
<p>The cell will immediately update to reflect the changes, but the <em>Save</em> button
must be pressed for the changes to persist.</p>
<h2>Caption</h2>
<p>Press the
<img src="4_Tables_image.png" width="18" height="17">button to insert a caption or a text description of the table, which is
going to be displayed above the table.</p>
<h2>Tables with invisible borders</h2>
<p>Tables can be set to have invisible borders in order to allow for basic
layouts (columns, grids) of text or <a href="#root/_help_mT0HEkOsz6i1">images</a> without
the distraction of their border:</p>
<ol>
<li>First insert a table with the desired number of columns and rows.</li>
<li>Select the entire table.</li>
<li>In <em>Table properties</em>, set:
<ol>
<li><em>Style</em> to <em>Single</em>
</li>
<li><em>Color</em> to <code>transparent</code>
</li>
<li>Width to <code>1px</code>.</li>
</ol>
</li>
<li>In Cell Properties, set the same as on the previous step.</li>
</ol>
<h2>Markdown import/export</h2>
<p>Simple tables are exported in GitHub-flavored Markdown format (e.g. a
series of <code>|</code> items). If the table is found to be more complex
(it contains HTML elements, has custom sizes or images), the table is converted
to a HTML one instead.</p>
<p>Generally formatting loss should be minimal when exported to Markdown
due to the fallback to HTML formatting.</p>
</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text_image.png generated
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text_math.gif generated
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 61 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text_text-notes-formatting.png generated
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

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

@@ -120,6 +120,9 @@
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Recent%20Changes.html"
target="detail">Recent Changes</a>
</li>
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Zoom.html"
target="detail">Zoom</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/Notes.html" target="detail">Notes</a>
@@ -236,7 +239,8 @@
<ul>
<li><a href="User%20Guide/Note%20Types/Text.html" target="detail">Text</a>
<ul>
<li><a href="User%20Guide/Note%20Types/Text/Admonitions.html" target="detail">Admonitions</a>
<li><a href="User%20Guide/Note%20Types/Text/Block%20quotes%20%26%20admonitions.html"
target="detail">Block quotes &amp; admonitions</a>
</li>
<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>
@@ -251,8 +255,12 @@
</li>
</ul>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Footnotes.html" target="detail">Footnotes</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/General%20formatting.html" target="detail">General formatting</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Highlights%20list.html" target="detail">Highlights list</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Images.html" target="detail">Images</a>
@@ -264,12 +272,25 @@
</li>
<li><a href="User%20Guide/Note%20Types/Text/Include%20Note.html" target="detail">Include Note</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Insert%20buttons.html" target="detail">Insert buttons</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Keyboard%20shortcuts.html" target="detail">Keyboard shortcuts</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Links.html" target="detail">Links</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Lists.html" target="detail">Lists</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Markdown-like%20formatting.html"
target="detail">Markdown-like formatting</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Math%20Equations.html" target="detail">Math Equations</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Other%20features.html" target="detail">Other features</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Table%20of%20contents.html" target="detail">Table of contents</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Tables.html" target="detail">Tables</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Note%20Types/Code.html" target="detail">Code</a>