feat(docs): color schemes for code notes

This commit is contained in:
Elian Doran 2025-05-13 21:39:15 +03:00
parent 588a9dc78f
commit 3a984ffb2c
No known key found for this signature in database
5 changed files with 33 additions and 11 deletions

View File

@ -36,4 +36,18 @@
<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>
<p>The list of languages is also shared with the&nbsp;<a href="#root/_help_QxEyIjRBizuC">Code blocks</a>&nbsp;feature
of&nbsp;<a href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes.</p>
of&nbsp;<a href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes.</p>
<h2>Color schemes</h2>
<p>Since Trilium 0.94.0 the colors of code notes can be customized by going&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_4TIF1oA4VQRO">Options</a>&nbsp;→ Code Notes and looking for the <em>Appearance</em> section.</p>
<aside
class="admonition note">
<p><strong>Why are there only a few themes whereas the code block themes for text notes have a lot?</strong>
<br>The reason is that Code notes use a different technology than the one
used in Text notes, and as such there is a more limited selection of themes.
If you find a CodeMirror 6 (not 5) theme that you would like to use, let
us know and we might consider adding it to the set of default themes. There
is no possibility of adding new themes (at least for now), since the themes
are defined in JavaScript and not at CSS level.</p>
</aside>

View File

@ -25,7 +25,7 @@
</ul>
</li>
</ul>
<h2>Syntax highlighting</h2>
<h2>Syntax highlighting &amp; color schemes</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/_help_6f9hih2hXXZk">Code</a>&nbsp;notes

View File

@ -87,19 +87,19 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "BRhQZHgwaGyw",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-package",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BRhQZHgwaGyw",
"isInheritable": false,
"position": 20
}
],
"format": "markdown",

View File

@ -24,4 +24,12 @@ Trilium supports syntax highlighting for many languages, but by default displays
Note that the list of languages is not immediately refreshed, you'd have to manually [refresh the application](../Troubleshooting/Refreshing%20the%20application.md).
The list of languages is also shared with the [Code blocks](Text/Developer-specific%20formatting/Code%20blocks.md) feature of [Text](Text.md) notes.
The list of languages is also shared with the [Code blocks](Text/Developer-specific%20formatting/Code%20blocks.md) feature of [Text](Text.md) notes.
## Color schemes
Since Trilium 0.94.0 the colors of code notes can be customized by going <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Options.md">Options</a> → Code Notes and looking for the _Appearance_ section.
> [!NOTE]
> **Why are there only a few themes whereas the code block themes for text notes have a lot?**
> The reason is that Code notes use a different technology than the one used in Text notes, and as such there is a more limited selection of themes. If you find a CodeMirror 6 (not 5) theme that you would like to use, let us know and we might consider adding it to the set of default themes. There is no possibility of adding new themes (at least for now), since the themes are defined in JavaScript and not at CSS level.

View File

@ -13,7 +13,7 @@ Note that this feature is meant for generally small snippets of code. For larger
* Type ` ``` ` (as in Markdown).
* Note that it's not possible to specify the language, as it will default to the last selected language.
## Syntax highlighting
## Syntax highlighting & color schemes
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 class="reference-link" href="../../Code.md">Code</a> notes as different technologies are involved.