feat(docs): improve documentation for code notes, code blocks
Elian Doran
@ -1,21 +0,0 @@
|
||||
# Code Notes
|
||||
Trilium supports creating "code" notes, i.e. notes which contain some sort of formal code - be it programming language (C++, JavaScript), structured data (JSON, XML) or other types of codes (CSS etc.).
|
||||
|
||||
This can be useful for a few things:
|
||||
|
||||
* computer programmers can store code snippets as notes with syntax highlighting
|
||||
* JavaScript code notes can be executed inside Trilium for some extra functionality
|
||||
* we call such JavaScript code notes "scripts" - see [Scripts](Code%20Notes/Scripts.md)
|
||||
* JSON, XML etc. can be used as storage for structured data (typically used in conjunction with scripting)
|
||||
|
||||
|
||||
|
||||
## Extra languages
|
||||
|
||||
Trilium supports syntax highlighting for many languages, but by default displays only some of them (to reduce the number of items). You can add extra languages in Options -> Code notes.
|
||||
|
||||
## Code blocks
|
||||
|
||||
An alternative to the code note is a "code block" - feature of a text note which can add short snippets of code to the text editor. Starting with TriliumNext v0.90.12, the code blocks also support syntax highlighting.
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Attachments
|
||||
A [note](../Note.md) in Trilium can _own_ one or more attachments, which can be either images or files. These attachments can be displayed or linked within the note that owns them.
|
||||
|
||||
This can be especially useful to include dependencies for your [scripts](../../Advanced%20Usage/Code%20Notes/Scripts.md). The [Weight Tracker](../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md) shows how to use [chartjs](https://chartjs.org/) which is attached to the [script note](#root/HcUYTojFohtb).
|
||||
This can be especially useful to include dependencies for your [scripts](../../Note%20Types/Code/Scripts.md). The [Weight Tracker](../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md) shows how to use [chartjs](https://chartjs.org/) which is attached to the [script note](#root/HcUYTojFohtb).
|
||||
|
||||
Each note exclusively owns its attachments, meaning attachments cannot be shared or linked from one note to another. If an attachment link is copied to a different note, the attachment itself is duplicated, and the copies are managed independently thereafter.
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 682 B |
|
After Width: | Height: | Size: 8.9 KiB |
@ -0,0 +1,4 @@
|
||||
# Refreshing the application
|
||||
Some changes to the application will not take effect immediately and as such it might require to manually reload or refresh the application.
|
||||
|
||||
To do so, simply press Ctrl+Shift+R.
|
||||
@ -1,53 +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>Code Notes</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Code Notes</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<p>Trilium supports creating "code" notes, i.e. notes which contain some
|
||||
sort of formal code - be it programming language (C++, JavaScript), structured
|
||||
data (JSON, XML) or other types of codes (CSS etc.).</p>
|
||||
<p>This can be useful for a few things:</p>
|
||||
<ul>
|
||||
<li>computer programmers can store code snippets as notes with syntax highlighting</li>
|
||||
<li>JavaScript code notes can be executed inside Trilium for some extra functionality
|
||||
<ul>
|
||||
<li>we call such JavaScript code notes "scripts" - see <a href="Code%20Notes/Scripts.html">Scripts</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>JSON, XML etc. can be used as storage for structured data (typically used
|
||||
in conjunction with scripting)</li>
|
||||
</ul>
|
||||
<p>
|
||||
<img src="Code Notes_image.png" alt="" />
|
||||
</p>
|
||||
|
||||
<h2>Extra languages</h2>
|
||||
|
||||
<p>Trilium supports syntax highlighting for many languages, but by default
|
||||
displays only some of them (to reduce the number of items). You can add
|
||||
extra languages in Options -> Code notes.</p>
|
||||
|
||||
<h2>Code blocks</h2>
|
||||
|
||||
<p>An alternative to the code note is a "code block" - feature of a text
|
||||
note which can add short snippets of code to the text editor. Starting
|
||||
with TriliumNext v0.90.12, the code blocks also support syntax highlighting.</p>
|
||||
<p>
|
||||
<img src="1_Code Notes_image.png" alt="" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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>Options</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Options</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,30 @@
|
||||
<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>Ribbon</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Ribbon</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1073/202;" src="Ribbon_image.png" width="1073"
|
||||
height="202">
|
||||
</figure>
|
||||
<p>The ribbon allows changing options, attributes and viewing information
|
||||
about the current note.</p>
|
||||
<h2>Settings</h2>
|
||||
<p>It is possible to change whether some ribbon items will be automatically
|
||||
open when navigating to a new note. To do so, in <a class="reference-link"
|
||||
href="Options.html">Settings</a>, go to <i>Appearance</i> and look for the <i>Ribbon widgets</i> section.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,78 @@
|
||||
<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>Code blocks</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Code blocks</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1078/307;" src="1_Code blocks_image.png" width="1078"
|
||||
height="307">
|
||||
</figure>
|
||||
<p>The code blocks feature allows entering pieces of code in text notes.</p>
|
||||
<p>Note that this feature is meant for generally small snippets of code.
|
||||
For larger files such as an entire log, see the dedicated <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/FVuX89AJuFSw">[missing note]</a> note
|
||||
type instead.</p>
|
||||
<h2>Inserting a code block</h2>
|
||||
<ul>
|
||||
<li>Via the <a class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>,
|
||||
look for the
|
||||
<img src="Code blocks_image.png" width="46" height="33">button.
|
||||
<ul>
|
||||
<li>Pressing directly on the icon will insert a code block with the language
|
||||
that was selected most recently. If this is the first time a code block
|
||||
is inserted, the language will be “Auto-detected” by default.</li>
|
||||
<li>Pressing the arrow next to the icon, which will show a popup with the
|
||||
available languages.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Type <code>```</code> (as in Markdown).
|
||||
<ul>
|
||||
<li>Note that it's not possible to specify the language, as it will default
|
||||
to the last selected language.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<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 class="reference-link" href="../Code.html">Code Notes</a> notes
|
||||
as different technologies are involved.</p>
|
||||
<p>When the language is set to <i>Auto-detected</i>, Trilium will try to identify
|
||||
the programming language (or similar) that corresponds to the given snippet
|
||||
of text and highlight it. If this is problematic, consider changing the
|
||||
language of the code block manually.</p>
|
||||
<p>When the language is set to <i>Plain text</i>, there will be no syntax
|
||||
highlighting.</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 class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>:
|
||||
<br>
|
||||
<img src="2_Code blocks_image.png" width="183" height="156">
|
||||
</p>
|
||||
<h2>Adjusting the list of languages</h2>
|
||||
<p>The code blocks feature shares the list of languages with the
|
||||
<a
|
||||
class="reference-link" href="../Code.html">Code Notes</a> note type.</p>
|
||||
<p>The supported languages can be adjusted by going to <a class="reference-link"
|
||||
href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a>, then <i>Code Notes</i> and
|
||||
looking for the <i>Available MIME types in the dropdown</i> section. Simply
|
||||
check any of the items to add them to the list, or uncheck them to remove
|
||||
them from the list.</p>
|
||||
<p>Note that the list of languages is not immediately refreshed, you'd have
|
||||
to manually <a href="../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 682 B |
@ -0,0 +1,60 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Formatting toolbar</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Formatting toolbar</h1>
|
||||
|
||||
<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 <a class="reference-link" href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a> and
|
||||
look for the <i>Text Notes</i> section. There is a corresponding section
|
||||
called <i>Formatting toolbar</i>.</p>
|
||||
<h2>Floating</h2>
|
||||
<p>The floating bar is a more minimalist option, in which the formatting
|
||||
is hidden behind two different popups.</p>
|
||||
<h3>Block-level popup</h3>
|
||||
<p>The first popup is the block-level popup. This will appear to the left
|
||||
of the current paragraph you are currently editing, as a sequence of dots:
|
||||
<br>
|
||||
<img src="1_Formatting toolbar_image.png" width="281" height="35">
|
||||
</p>
|
||||
<p>Clicking this popup will reveal the formatting options that are specific
|
||||
to the entire paragraph, such as setting a heading, lists, tables, etc.</p>
|
||||
<p>
|
||||
<img src="3_Formatting toolbar_image.png" width="682" height="104">
|
||||
</p>
|
||||
<h3>Inline popup</h3>
|
||||
<p>The inline popup appears automatically when selecting a text:</p>
|
||||
<p>
|
||||
<img src="Formatting toolbar_image.png" width="552" height="99">
|
||||
</p>
|
||||
<p>All the options here apply only to the selected portion of text, such
|
||||
as changing the font size, or making the text bold.</p>
|
||||
<h2>Fixed</h2>
|
||||
<p>The fixed formatting offers a more traditional editing paradigm, usually
|
||||
useful if a lot of formatting is needed.</p>
|
||||
<p>All the options are combined into a single toolbar that will appear as
|
||||
part of the <a class="reference-link" href="../../Basic%20Concepts/UI%20Elements/Ribbon.html">Ribbon</a>.</p>
|
||||
<figure
|
||||
class="image">
|
||||
<img style="aspect-ratio:913/162;" src="2_Formatting toolbar_image.png"
|
||||
width="913" height="162">
|
||||
</figure>
|
||||
<p>By default, if the toolbar does not fit on the screen, the rest of the
|
||||
options will be grouped into a single option at the end. It is possible
|
||||
to display items on multiple lines by checking the corresponding option
|
||||
in the <i>Formatting toolbar</i> section.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 8.9 KiB |
@ -0,0 +1,23 @@
|
||||
<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>Refreshing the application</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Refreshing the application</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<p>Some changes to the application will not take effect immediately and as
|
||||
such it might require to manually reload or refresh the application.</p>
|
||||
<p>To do so, simply press Ctrl+Shift+R.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||