diff --git a/editors/markdown.md b/editors/markdown.md index f6bbac9b0..6ea4ea79c 100644 --- a/editors/markdown.md +++ b/editors/markdown.md @@ -105,6 +105,12 @@ function lorem (ipsum) { ``` ```` +``` +function lorem (ipsum) { + const dolor = 'consectetur adipiscing elit' +} +``` + #### Syntax Highlighting By default, a code block is rendered as plain preformatted text. It's however preferable to use syntax highlighting for programming code, allowing for easier readability. To specify the programming language used in the code block, simply add the language keyword right after the opening triple backticks: @@ -196,7 +202,7 @@ This sentence[^1] needs a few footnotes.[^2] #### Usage -Using between 1 and 6 **hashtag** symbol(s), followed by a space, before the text selection. +Using between 1 and 6 **hashtag** symbol(s), followed by a space, before the text selection. Headers in levels 1 an 2 automatically appear in the ToC on the left-hand side of the page. #### Shortcuts - On the desired line, then clicking the ![Header](/assets/ui/ui-markdown-headers.png =x30){.radius-4} dropdown button in the toolbar. @@ -255,11 +261,14 @@ Using the syntax `![Image Caption](Image Source)`. #### Examples ```markdown -![Lorem ipsum](https://dolor.example.com/sit/amet.jpg) +![Lorem ipsum](https://picsum.photos/200) Consectetur ![adipiscing](/link/to/image.jpg) elit ``` +![Lorem ipsum](https://picsum.photos/200) +Consectetur ![adipiscing](https://picsum.photos/200) elit + #### Dimensions Sometimes images are too large or maybe you want the image to fill up all the available space. @@ -390,6 +399,18 @@ sequenceDiagram ``` ```` +```mermaid +sequenceDiagram + Alice ->> Bob: Hello Bob, how are you? + Bob-->>John: How about you John? + Bob--x Alice: I am good thanks! + Bob-x John: I am good thanks! + Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. + + Bob-->Alice: Checking with John... + Alice->John: Yes... John, how are you? +``` + ## Ordered Lists ### Tab {.tabset}