mirror of
https://github.com/zadam/trilium.git
synced 2026-03-25 21:30:14 +01:00
chore(docs): merge syntax highlight docs
This commit is contained in:
Elian Doran
28
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
28
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
@@ -4982,13 +4982,6 @@
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "QxEyIjRBizuC",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
@@ -4996,13 +4989,6 @@
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "4TIF1oA4VQRO",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
@@ -5023,6 +5009,20 @@
|
||||
"value": "bx bx-code",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CoFPLs3dRlXc",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "4TIF1oA4VQRO",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
}
|
||||
],
|
||||
"format": "html",
|
||||
|
||||
@@ -18,11 +18,12 @@
|
||||
</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 <a href="#root/_help_QxEyIjRBizuC">Code blocks</a> note
|
||||
For larger files such as an entire log, see the <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a> note
|
||||
type instead.</p>
|
||||
<h2>Inserting a code block</h2>
|
||||
<ul>
|
||||
<li>Via the <a href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>,
|
||||
<li>Via the <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_nRhnJkTT8cPs">Formatting toolbar</a>,
|
||||
look for the
|
||||
<img src="Code blocks_image.png">button.
|
||||
<ul>
|
||||
@@ -43,25 +44,63 @@
|
||||
<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 <a href="#root/_help_6f9hih2hXXZk">Code Notes</a> notes
|
||||
different than the one in <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a> notes
|
||||
as different technologies are involved.</p>
|
||||
<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>
|
||||
<p>Interaction:</p>
|
||||
<ul>
|
||||
<li>When the language is set to <em>Auto-detected</em> (by default), 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.</li>
|
||||
<li>When the language is set to <em>Plain text</em>, there will be no syntax
|
||||
highlighting.</li>
|
||||
</ul>
|
||||
<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 <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_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>
|
||||
<ul>
|
||||
<li>It is possible to disable the syntax highlighting for all the notes by
|
||||
selecting “No syntax highlighting” in the “Color scheme” option.</li>
|
||||
<li>Word wrapping is disabled by default, but can be configured from the same
|
||||
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
|
||||
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
|
||||
search results for example). Nevertheless, we haven't noticed any major
|
||||
issues during the development of the feature, but feel free to report any
|
||||
issues you might have.</p>
|
||||
<p>Most of the work to achieve the syntax highlight itself was already done
|
||||
by <a href="https://github.com/antoniotejada">antoniotejada</a> in <a href="https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget">https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget</a>.
|
||||
On our side we added customization but also additional functionality.</p>
|
||||
</aside>
|
||||
<h3>Migrating from existing syntax highlight plugins</h3>
|
||||
<p>If you are already using a syntax highlighting plugin such as the <a href="https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget">Trilium-SyntaxHighlightWidget</a> we
|
||||
are basing off of, it is important to disable that plugin before upgrading
|
||||
in order for it not to conflict with our implementation.</p>
|
||||
<p>Should you encounter any issues after the migration, try running Trilium
|
||||
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 <a href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>:
|
||||
button in the <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_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
|
||||
<a
|
||||
href="#root/_help_6f9hih2hXXZk">Code Notes</a> note type.</p>
|
||||
<p>The supported languages can be adjusted by going to <a href="#root/_help_4TIF1oA4VQRO">Options</a>,
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a> note type.</p>
|
||||
<p>The supported languages can be adjusted by going to <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>
|
||||
|
||||
Reference in New Issue
Block a user