mirror of
https://github.com/zadam/trilium.git
synced 2026-05-06 15:26:59 +02:00
docs: add more details to Markdown note type
This commit is contained in:
Elian Doran
117
docs/User Guide/!!!meta.json
vendored
117
docs/User Guide/!!!meta.json
vendored
@@ -3962,6 +3962,83 @@
|
||||
"attachments": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "SL5f1Auq7sVN",
|
||||
"notePath": [
|
||||
"pOsGYCXsbNQG",
|
||||
"gh7bpGYxajRS",
|
||||
"Vc8PjrjAGuOp",
|
||||
"SL5f1Auq7sVN"
|
||||
],
|
||||
"title": "Note types with split view",
|
||||
"notePosition": 230,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "s1aBHPd79XYj",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6RM1Q7ppFVoj",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CoFPLs3dRlXc",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "8YBEPzcpUgxw",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "IjZS7iK5EXtb",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "XpOYSgsLkTJy",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-card",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "note-types-with-split-view",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Note types with split view.md",
|
||||
"attachments": []
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -10094,6 +10171,13 @@
|
||||
"value": "bx bx-selection",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SL5f1Auq7sVN",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@@ -10797,54 +10881,61 @@
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "wy8So3yZZlH9",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SL5f1Auq7sVN",
|
||||
"isInheritable": false,
|
||||
"position": 160
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "NwBbFdNZ9h7O",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
"position": 170
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "YfYAtQBcfo5V",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
"position": 180
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "s1aBHPd79XYj",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
"position": 190
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "nBAXQFj20hS1",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
"position": 200
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "hrZ1D00cLbal",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
"position": 210
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "m1lbrzyKDaRB",
|
||||
"isInheritable": false,
|
||||
"position": 140
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "wy8So3yZZlH9",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
"position": 220
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
|
||||
21
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note types with split view.md
vendored
Normal file
21
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note types with split view.md
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
# Note types with split view
|
||||
Split view is a feature of <a class="reference-link" href="../../Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a> and <a class="reference-link" href="../../Note%20Types/Markdown.md">Markdown</a> notes which displays both the source code on one side and the preview of the content on the other.
|
||||
|
||||
<a class="reference-link" href="../../Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a> also allow changing between a horizontal or a vertical split, to accommodate for the various sizes of diagrams.
|
||||
|
||||
## Display modes and interaction
|
||||
|
||||
The split comes with three different display modes:
|
||||
|
||||
* _Split view_, in which both the source code is available on one side and can be edited, and the preview is available on the other side.
|
||||
* In this mode, the size of either the source pane or the preview pane can be adjusted by dragging the small border between them.
|
||||
* _Source view_ which shows the source code on the entire screen for a more focused editing experience.
|
||||
* _Preview_ which displays only the rendering of the diagram or text in full screen, especially useful for read-only notes.
|
||||
|
||||
These buttons can be found near the <a class="reference-link" href="Note%20buttons.md">Note buttons</a> section on the <a class="reference-link" href="New%20Layout.md">New Layout</a>, or in the <a class="reference-link" href="Floating%20buttons.md">Floating buttons</a> on the old layout.
|
||||
|
||||
The display node is stored at note level.
|
||||
|
||||
## Relation to read-only notes
|
||||
|
||||
If a note is marked as [read-only](../Notes/Read-Only%20Notes.md), the source view will not be editable. While in preview mode, marking a note as read-only has no effect since the preview itself is not editable.
|
||||
@@ -1,7 +1,7 @@
|
||||
# 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.
|
||||
This note type is a split view, meaning that both the source code and a preview of the document are displayed side-by-side. See <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20types%20with%20split%20view.md">Note types with split view</a> for more information.
|
||||
|
||||
## Rationale
|
||||
|
||||
@@ -12,14 +12,15 @@ Even if Markdown is now specially treated by having a preview mechanism, Trilium
|
||||
> [!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
|
||||
## Features
|
||||
|
||||
There are two ways to create a Markdown note:
|
||||
### Source view pane
|
||||
|
||||
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.
|
||||
* Syntax highlighting for the Markdown syntax.
|
||||
* Nested syntax highlighting for code inside code blocks.
|
||||
* When editing larger documents, the preview scrolls along with the source editor.
|
||||
|
||||
## Supported features in preview
|
||||
### Preview pane
|
||||
|
||||
The following features are supported by Trilium's Markdown format and will show up in the preview pane:
|
||||
|
||||
@@ -33,7 +34,7 @@ The following features are supported by Trilium's Markdown format and will show
|
||||
```
|
||||
<section class="include-note" data-note-id="vJDjQm0VK8Na" data-box-size="expandable">
|
||||
|
||||
</section>
|
||||
</section>n
|
||||
```
|
||||
* <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>):
|
||||
|
||||
@@ -41,10 +42,51 @@ The following features are supported by Trilium's Markdown format and will show
|
||||
[[Hg8TS5ZOxti6]]
|
||||
```
|
||||
|
||||
## Sync-scrolling
|
||||
## 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.
|
||||
|
||||
> [!NOTE]
|
||||
> There is no distinction between the new Markdown note type and code notes of type Markdown; internally both are represented as <a class="reference-link" href="Code.md">Code</a> notes with the proper MIME type (e.g. `text/x-markdown`).
|
||||
|
||||
## Import/export
|
||||
|
||||
* By default, when importing a single Markdown file it automatically gets converted to a <a class="reference-link" href="Text.md">Text</a> note. To avoid that and have it imported as a Markdown note instead:
|
||||
|
||||
* Right click the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a> and select _Import into note_.
|
||||
* Select the file normally.
|
||||
* Uncheck _Import HTML, Markdown and TXT as text notes if it's unclear from the metadata_.
|
||||
* When exporting Markdown files, the extension is preserved and the content remains the same as in the source view.
|
||||
* Once exported as a Trilium ZIP, the ZIP will preserve the Markdown type without converting to text notes thanks to the meta-information in it.
|
||||
|
||||
## Conversion between text notes and Markdown notes
|
||||
|
||||
Currently there is no built-in functionality to convert a <a class="reference-link" href="Text.md">Text</a> note into a Markdown note or vice-versa. We do have plans to address this in the future.
|
||||
|
||||
This can be achieved manually, for a single note:
|
||||
|
||||
1. Export the file as Markdown, with single format.
|
||||
2. Import the file again, but unchecking _Import HTML, Markdown and TXT as text notes if it's unclear from the metadata_.
|
||||
|
||||
For multiple notes, the process is slightly more involved:
|
||||
|
||||
1. Export the file as Markdown, ZIP.
|
||||
2. Extract the archive.
|
||||
3. Remove the `!!!meta.json` file.
|
||||
4. Compress the extracted files back into an archive.
|
||||
5. Import the newly create archive, but unchecking _Import HTML, Markdown and TXT as text notes if it's unclear from the metadata_.
|
||||
|
||||
## Sync-scrolling & block highlight
|
||||
|
||||
When scrolling through the editing pane, the preview pane will attempt to synchronize its position to make it easier to see the preview.
|
||||
|
||||
In addition, the block in the preview matching the position of the cursor in the source view will appear slightly highlighted.
|
||||
|
||||
The sync is currently one-way only, scrolling the preview will not synchronize the position of the editor.
|
||||
|
||||
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]
|
||||
|
||||
@@ -4,10 +4,12 @@
|
||||
|
||||
<figure class="image image-style-align-center"><img style="aspect-ratio:886/663;" src="2_Mermaid Diagrams_image.png" width="886" height="663"></figure>
|
||||
|
||||
## Types of diagrams
|
||||
|
||||
Trilium supports Mermaid, which adds support for various diagrams such as flowchart, sequence diagram, class diagram, state diagram, pie charts, etc., all using a text description of the chart instead of manually drawing the diagram.
|
||||
|
||||
This note type is a split view, meaning that both the source code and a preview of the document are displayed side-by-side. See <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20types%20with%20split%20view.md">Note types with split view</a> for more information.
|
||||
|
||||
## Sample diagrams
|
||||
|
||||
Starting with v0.103.0, Mermaid diagrams no longer start with a sample flowchart, but instead a pane at the bottom will show all the supported diagrams with sample code for each:
|
||||
|
||||
* Simply click on any of the samples to apply it.
|
||||
@@ -35,7 +37,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">[missing note]</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">Image references</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.
|
||||
|
||||
|
||||
@@ -60,7 +60,6 @@ If you would like us to work on these features, consider [supporting us](https:/
|
||||
## Known limitations
|
||||
|
||||
* It is possible to share a spreadsheet, case in which a best-effort HTML rendering of the spreadsheet is done.
|
||||
|
||||
* For more advanced use cases, this will most likely not work as intended. Feel free to [report issues](../Troubleshooting/Reporting%20issues.md), but keep in mind that we might not be able to have a complete feature parity with all the features of Univer.
|
||||
* There is currently no export functionality, as stated previously.
|
||||
* There is no dedicated mobile support. Mobile support is currently experimental in Univer and when it becomes stable, we could potentially integrate it into Trilium as well.
|
||||
Reference in New Issue
Block a user