mirror of
https://github.com/zadam/trilium.git
synced 2026-05-06 20:56:26 +02:00
docs: add documentation on the new Markdown type
This commit is contained in:
Elian Doran
111
docs/User Guide/!!!meta.json
vendored
111
docs/User Guide/!!!meta.json
vendored
@@ -10739,6 +10739,117 @@
|
||||
"dataFileName": "Spreadsheets_image.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "6RM1Q7ppFVoj",
|
||||
"notePath": [
|
||||
"pOsGYCXsbNQG",
|
||||
"KSZ04uQ2D1St",
|
||||
"6RM1Q7ppFVoj"
|
||||
],
|
||||
"title": "Markdown",
|
||||
"notePosition": 230,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bxl-markdown",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "markdown",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "Oau6X9rCuegd",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "iPIMuisry3hd",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6f9hih2hXXZk",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "oPVyFC7WL2Lp",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "NwBbFdNZ9h7O",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "YfYAtQBcfo5V",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "s1aBHPd79XYj",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "nBAXQFj20hS1",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "hrZ1D00cLbal",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "m1lbrzyKDaRB",
|
||||
"isInheritable": false,
|
||||
"position": 140
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "wy8So3yZZlH9",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Markdown.md",
|
||||
"attachments": []
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
2
docs/User Guide/User Guide/Note Types.md
vendored
2
docs/User Guide/User Guide/Note Types.md
vendored
@@ -33,7 +33,7 @@ The following note types are supported by Trilium:
|
||||
| <a class="reference-link" href="Note%20Types/Relation%20Map.md">Relation Map</a> | Allows easy creation of notes and relations between them. Can be used for mainly relational data such as a family tree. |
|
||||
| <a class="reference-link" href="Note%20Types/Note%20Map.md">Note Map</a> | Displays the relationships between the notes, whether via relations or their hierarchical structure. |
|
||||
| <a class="reference-link" href="Note%20Types/Render%20Note.md">Render Note</a> | Used in <a class="reference-link" href="Scripting.md">Scripting</a>, it displays the HTML content of another note. This allows displaying any kind of content, provided there is a script behind it to generate it. |
|
||||
| <a class="reference-link" href="Collections.md">Collections</a> | Displays the children of the note either as a grid, a list, or for a more specialized case: a calendar. <br> <br>Generally useful for easy reading of short notes. |
|
||||
| <a class="reference-link" href="Collections.md">Collections</a> | Displays the children of the note either as a grid, a list, or for a more specialized case: a calendar. <br> <br>Generally useful for easy reading of short notes. |
|
||||
| <a class="reference-link" href="Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a> | Displays diagrams such as bar charts, flow charts, state diagrams, etc. Requires a bit of technical knowledge since the diagrams are written in a specialized format. |
|
||||
| <a class="reference-link" href="Note%20Types/Canvas.md">Canvas</a> | Allows easy drawing of sketches, diagrams, handwritten content. Uses the same technology behind [excalidraw.com](https://excalidraw.com). |
|
||||
| <a class="reference-link" href="Note%20Types/Web%20View.md">Web View</a> | Displays the content of an external web page, similar to a browser. |
|
||||
|
||||
51
docs/User Guide/User Guide/Note Types/Markdown.md
vendored
Normal file
51
docs/User Guide/User Guide/Note Types/Markdown.md
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
# Markdown
|
||||
Trilium has always supported Markdown through its [import feature](../Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown.md), however the file was either transformed to a <a class="reference-link" href="Text.md">Text</a> note (converted to Trilium's internal HTML format) or saved as a <a class="reference-link" href="Code.md">Code</a> note with only syntax highlight.
|
||||
|
||||
v0.103.0 introduces a new note type: Markdown which which displays Markdown source and a preview on the right.
|
||||
|
||||
## Rationale
|
||||
|
||||
The goal of this note type is to fill a gap: rendering Markdown but not altering its structure or its whitespace which would inevitably change otherwise through import/export.
|
||||
|
||||
Even if Markdown is now specially treated by having a preview mechanism, Trilium remains at its core a WYSWYG editor so Markdown will not replace text notes.
|
||||
|
||||
> [!NOTE]
|
||||
> Feature requests regarding the Markdown implementation will be considered, but if they are outside the realm of Trilium they will not be implemented. One of the core aspects of the Markdown integration is that it reuses components that are already available through other features of the application.
|
||||
|
||||
## Creating Markdown notes
|
||||
|
||||
There are two ways to create a Markdown note:
|
||||
|
||||
1. Create a new note (e.g. in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a>) and select the type _Markdown_, just like all the other note types.
|
||||
2. Create a note of type <a class="reference-link" href="Code.md">Code</a> and select as the language either _Markdown_ or _GitHub-Flavored Markdown_. This maintains compatibility with your existing notes prior to the introduction of this feature.
|
||||
|
||||
## Supported features in preview
|
||||
|
||||
The following features are supported by Trilium's Markdown format and will show up in the preview pane:
|
||||
|
||||
* All standard and GitHub-flavored syntax (basic formatting, tables, blockquotes)
|
||||
* Code blocks with syntax highlight (e.g. ` ```js `) and automatic syntax highlight
|
||||
* <a class="reference-link" href="Text/Block%20quotes%20%26%20admonitions.md">Block quotes & admonitions</a>
|
||||
* <a class="reference-link" href="Text/Math%20Equations.md">Math Equations</a>
|
||||
* <a class="reference-link" href="Mermaid%20Diagrams.md">Mermaid Diagrams</a> using ` ```mermaid `
|
||||
* <a class="reference-link" href="Text/Include%20Note.md">Include Note</a> (no builtin Markdown syntax, but HTML syntax works just fine):
|
||||
|
||||
```
|
||||
<section class="include-note" data-note-id="vJDjQm0VK8Na" data-box-size="expandable">
|
||||
|
||||
</section>
|
||||
```
|
||||
* <a class="reference-link" href="Text/Links/Internal%20(reference)%20links.md">Internal (reference) links</a> via its HTML syntax, or through a _Wikilinks_\-like format (only <a class="reference-link" href="../Advanced%20Usage/Note%20ID.md">Note ID</a>):
|
||||
|
||||
```
|
||||
[[Hg8TS5ZOxti6]]
|
||||
```
|
||||
|
||||
## Sync-scrolling
|
||||
|
||||
When scrolling through the editing pane, the preview pane will attempt to synchronize its position to make it easier to see the preview.
|
||||
|
||||
This feature cannot be disabled as of now; if the scrolling feels distracting, consider temporarily switching to the editor mode and then switching to preview mode when ready.
|
||||
|
||||
> [!NOTE]
|
||||
> This feature of synchronizing the scroll is based on blocks but it's provided on a best-effort basis since our underlying Markdown library doesn't support this feature natively, so we had to implement our own algorithm. Feel free to [report issues](../Troubleshooting/Reporting%20issues.md), but always provide a sample Markdown file to be able to reproduce it.
|
||||
@@ -35,7 +35,7 @@ It's possible to switch between the two layouts at any time by pressing the ![](
|
||||
* In the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md">Floating buttons</a> area:
|
||||
* The source/preview can be laid out left-right or bottom-top via the _Move editing pane to the left / bottom_ option.
|
||||
* Press _Lock editing_ to automatically mark the note as read-only. In this mode, the code pane is hidden and the diagram is displayed full-size. Similarly, press _Unlock editing_ to mark a read-only note as editable.
|
||||
* Press the _Copy image reference to the clipboard_ to be able to insert the image representation of the diagram into a text note. See <a class="reference-link" href="Text/Images/Image%20references.md">Image references</a> for more information.
|
||||
* Press the _Copy image reference to the clipboard_ to be able to insert the image representation of the diagram into a text note. See <a class="reference-link" href="Text/Images/Image%20references.md">[missing note]</a> for more information.
|
||||
* Press the _Export diagram as SVG_ to download a scalable/vector rendering of the diagram. Can be used to present the diagram without degrading when zooming.
|
||||
* Press the _Export diagram as PNG_ to download a normal image (at 1x scale, raster) of the diagram. Can be used to send the diagram in more traditional channels such as e-mail.
|
||||
|
||||
|
||||
@@ -69,4 +69,4 @@ It's possible to refresh the note via:
|
||||
|
||||
## Examples
|
||||
|
||||
* <a class="reference-link" href="../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a> which is present in the <a class="reference-link" href="../Advanced%20Usage/Database/Demo%20Notes.md">Demo Notes</a>.
|
||||
* <a class="reference-link" href="../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">[missing note]</a> which is present in the <a class="reference-link" href="../Advanced%20Usage/Database/Demo%20Notes.md">[missing note]</a>.
|
||||
Reference in New Issue
Block a user