Editing a_comprehensive_list_of_formatting

Parent (hide)

Title

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/webjars/wiki%3Axwiki/xwiki-platform-search-webjar/17.1.0/searchSuggest.min.css?evaluate=true" type='text/css' rel='stylesheet'/>
<link href="/webjars/wiki%3Axwiki/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet'/>
<link href="/webjars/wiki%3Axwiki/webjar-blueimp-gallery/3.4.0/css/blueimp-gallery.min.css" type='text/css' rel='stylesheet'/>
<link href="/webjars/wiki%3Axwiki/xwiki-platform-image-lightbox-webjar/17.1.0/less/lightbox.less?evaluate=true" type='text/css' rel='stylesheet'/>
<link href="/webjars/wiki%3Axwiki/xwiki-platform-tree-webjar/17.1.0/tree.min.css?evaluate=true" type='text/css' rel='stylesheet'/>
<link href="/webjars/wiki%3Axwiki/xwiki-platform-ckeditor-plugins/17.1.0/webjar.bundle.min.css?evaluate=true" type='text/css' rel='stylesheet'/>
<link href="/webjars/wiki%3Axwiki/xwiki-platform-tree-webjar/17.1.0/finder.min.css?evaluate=true" type='text/css' rel='stylesheet'/>

</head>
<body id="body" class="skin-flamingo viewbody main wiki-xwiki
space-Guides_and_Help.a_comprehensive_list_of_formatting_options"><h1 id="HFormatting:Advanced" class="wikigeneratedid"><span>Formatting: Advanced</span></h1><p>An introduction to Formatting Blocks, Markdown Elements, Interactive Features, and Text Styling</p><hr/><p>Welcome to the comprehensive guide on formatting content in Wiki.js! This page provides essential tips and tricks to help contributors format content effectively. If you're new to Markdown or Wiki.js, this guide will walk you through the most useful basics and introduce you to advanced formatting techniques.</p><h1 id="HTableofContents" class="wikigeneratedid"><span>Table of Contents</span></h1><ol><li><span class="wikiexternallink"><a href="#blockquotes">Blockquotes</a></span></li><li><span class="wikiexternallink"><a href="#Bold">Bold</a></span></li><li><span class="wikiexternallink"><a href="#code-blocks">Code BLocks</a></span></li><li><span class="wikiexternallink"><a href="#content-tabs">Content Tabs</a></span></li><li><span class="wikiexternallink"><a href="#emojis">Emojis</a></span></li><li><span class="wikiexternallink"><a href="#footnotes">Footnotes</a></span></li><li><span class="wikiexternallink"><a href="#headers">Headers</a></span></li><li><span class="wikiexternallink"><a href="#horizontal-lines">Horizontal Lines</a></span></li><li><span class="wikiexternallink"><a href="#images">Images</a></span></li><li><span class="wikiexternallink"><a href="#inline-code">Inline Code</a></span></li><li><span class="wikiexternallink"><a href="#italic">Italic</a></span></li><li><span class="wikiexternallink"><a href="#keyboard-keys">Keyboard Keys</a></span></li><li><span class="wikiexternallink"><a href="#links">Links</a></span></li><li><span class="wikiexternallink"><a href="#lists">Lists</a></span></li><li><span class="wikiexternallink"><a href="#mermaid-diagrams">Mermaid Diagrams</a></span></li><li><span class="wikiexternallink"><a href="#advanced-formatting">Skip to Advanced Formatting</a></span></li></ol><hr/><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</p><h1 id="HOverview" class="wikigeneratedid"><span>Overview</span></h1><p>Markdown is a lightweight markup language with plain text formatting syntax. It's the de-facto syntax for writing documentation on major code repositories such as GitHub.</p><p>Wiki.js supports the full <span class="wikiexternallink"><a href="https://spec.commonmark.org/">CommonMark specification</a></span> + adds some useful extensions (including the Github Flavored Markdown addons).</p><h1 id="HUserGuide" class="wikigeneratedid"><span>User Guide</span></h1><h2 id="HBlockquotes" class="wikigeneratedid"><span>Blockquotes</span></h2><h3 id="HTab7B.tabset7D" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage" class="wikigeneratedid"><span>Usage</span></h4><p>Using a <strong>greater-than</strong> symbol, followed by a space, before each line of text.</p><h4 id="HShortcuts" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Blockquote]</span>(/assets/ui/ui-markdown-blockquotes.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">&gt; Lorem ipsum dolor sit amet<br/>&gt; Consectetur adipiscing elit</div></div><blockquote><p>Lorem ipsum dolor sit amet Consectetur adipiscing elit</p></blockquote><h4 id="HStylings" class="wikigeneratedid"><span>Stylings</span></h4><p>By adding a class on a separate line, after the blockquote, you can change the look of the blockquote. Note that these stylings are specific to Wiki.js and will fallback to standard blockquote styling in other applications.</p><ul><li>Blue: <span class="box"><span class="code">is-info</span></span></li><li>Green: <span class="box"><span class="code">is-success</span></span></li><li>Yellow: <span class="box"><span class="code">is-warning</span></span></li><li>Red: <span class="box"><span class="code">is-danger</span></span></li></ul><div class="box"><div class="code">&gt; Lorem ipsum dolor sit amet<br/>&gt; Consectetur adipiscing elit<br/>&#123;<span style="border: 1px solid #FF0000; ">.is-info</span>}</div></div><blockquote><p>This is a default unstyled blockquote.</p></blockquote><blockquote><p>This is a <span class="box"><span class="code">&#123;.is-info}</span></span> blockquote. &#123;.is-info}</p></blockquote><blockquote><p>This is a <span class="box"><span class="code">&#123;.is-success}</span></span> blockquote. &#123;.is-success}</p></blockquote><blockquote><p>This is a <span class="box"><span class="code">&#123;.is-warning}</span></span> blockquote. &#123;.is-warning}</p></blockquote><blockquote><p>This is a <span class="box"><span class="code">&#123;.is-danger}</span></span> blockquote. &#123;.is-danger}</p></blockquote><h2 id="HBold" class="wikigeneratedid"><span>Bold</span></h2><h3 id="HTab7B.tabset7D-1" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-1" class="wikigeneratedid"><span>Usage</span></h4><p>Using <strong>double asterisks</strong> symbols before and after the text selection.</p><h4 id="HShortcuts-1" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Bold]</span>(/assets/ui/ui-markdown-bold.png =x30)&#123;.radius-4} button in the toolbar.</li><li>By selecting text, then pressing <kbd>CTRL</kbd> + <kbd>B</kbd></li></ul><h4 id="HExamples-1" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">Lorem **ipsum** dolor</div></div><p>Lorem <strong>ipsum</strong> dolor</p><h2 id="HCodeBlocks" class="wikigeneratedid"><span>Code Blocks</span></h2><h3 id="HTab7B.tabset7D-2" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-2" class="wikigeneratedid"><span>Usage</span></h4><p>Using <strong>triple backticks</strong> symbols before and after the text selection, on dedicated lines.</p><h4 id="HShortcuts-2" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>Using the <strong>Code Block</strong> tool in the left toolbar.</li></ul><h4 id="HExamples-2" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">```<br/><span style="color: #0000ff; ">function</span> lorem (ipsum) <span style="border: 1px solid #FF0000; ">&#123;</span><br/>	const dolor = <span style="color: #a31515; ">'consectetur adipiscing elit'</span><br/><span style="border: 1px solid #FF0000; ">}</span><br/>```</div></div><h4 id="HSyntaxHighlighting" class="wikigeneratedid"><span>Syntax Highlighting</span></h4><p>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:</p><div class="box"><div class="code"><span style="border: 1px solid #FF0000; ">```</span>java<br/><span style="color: #008000; ">// some code here<br/></span><span style="border: 1px solid #FF0000; ">```</span></div></div><p>Refer to the <span class="wikiexternallink"><a href="https://github.com/highlightjs/highlight.js#supported-languages">reference list</a></span> of about 185 supported programming languages.</p><h2 id="HContentTabs" class="wikigeneratedid"><span>Content Tabs</span></h2><h3 id="HTab7B.tabset7D-3" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-3" class="wikigeneratedid"><span>Usage</span></h4><blockquote><p>This feature is only available from version 2.4 and up. &#123;.is-info}</p></blockquote><p>Using headers and adding the <span class="box"><span class="code">&#123;.tabset}</span></span> class to the parent header. The parent header text will not be shown in the final result.</p><p>Note that you can use any header level, as long as the children headers are one level higher. For example, if a parent header is <span class="box"><span class="code">###</span></span> <em>(h3)</em>, the tabs headers must be <span class="box"><span class="code">####</span></span> <em>(h4)</em>. The maximum header level for a parent being 5 and the children 6.</p><h4 id="HExamples-3" class="wikigeneratedid"><span>Examples</span></h4><!--startmacro:code|-|language=""|-|# Tabs \{.tabset}
## First Tab

Any content here will go into the first tab...

## Second Tab

Any content here will go into the second tab...

## Third Tab

Any content here will go into the third tab...--><div class="box"><div class="code"><span style="border: 1px solid #FF0000; ">#</span> Tabs <span style="border: 1px solid #FF0000; ">&#123;</span>.tabset<span style="border: 1px solid #FF0000; ">}</span><br/><span style="border: 1px solid #FF0000; ">##</span> <span style="color: #0000ff; ">First</span> Tab<br/><br/><span style="color: #0000ff; ">Any</span> content here will <span style="color: #0000ff; ">go</span> <span style="color: #0000ff; ">into</span> the <span style="color: #0000ff; ">first</span> tab...<br/><br/><span style="border: 1px solid #FF0000; ">##</span> <span style="color: #0000ff; ">Second</span> Tab<br/><br/><span style="color: #0000ff; ">Any</span> content here will <span style="color: #0000ff; ">go</span> <span style="color: #0000ff; ">into</span> the <span style="color: #0000ff; ">second</span> tab...<br/><br/><span style="border: 1px solid #FF0000; ">##</span> Third Tab<br/><br/><span style="color: #0000ff; ">Any</span> content here will <span style="color: #0000ff; ">go</span> <span style="color: #0000ff; ">into</span> the third tab...</div></div><h2 id="HEmojis" class="wikigeneratedid"><span>Emojis</span></h2><h3 id="HTab7B.tabset7D-4" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-4" class="wikigeneratedid"><span>Usage</span></h4><p>Using the syntax <span class="box"><span class="code">:identifier:</span></span></p><p>See the <span class="wikiexternallink"><a href="https://www.webfx.com/tools/emoji-cheat-sheet/">Emoji Cheat Sheet</a></span> for the full list of possible options.</p><h4 id="HExamples-4" class="wikigeneratedid"><span>Examples</span></h4><!--startmacro:code|-|language="markdown"|-|:apple:

Can be also be used :fire: inline--><div class="box"><div class="code">:apple:<br/><br/>Can be also be used :fire: inline</div></div><p>:apple:</p><p>Can also be used :fire: inline.</p><h2 id="HFootnotes" class="wikigeneratedid"><span>Footnotes</span></h2><h3 id="HTab7B.tabset7D-5" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-5" class="wikigeneratedid"><span>Usage</span></h4><p>Use the syntax <span class="box"><span class="code">[^1]</span></span> for the location of the footnote in the main text, and <span class="box"><span class="code">[^1]: this is a footnote</span></span> for the actual footnote. &nbsp;Footnotes themselves will automatically appear at the bottom of the page under a horizontal line.</p><h4 id="HExamples-5" class="wikigeneratedid"><span>Examples</span></h4><!--startmacro:code|-|language="markdown"|-|This sentence[^1] needs a few footnotes.[^2]

[^1]: A string of syntactic words.
[^2]: A useful example sentence.--><div class="box"><div class="code">This sentence[^1] needs a few footnotes.[^2]<br/><br/>[^1]: A string of syntactic words.<br/>[^2]: A useful example sentence.</div></div><p>This sentence[^1] needs a few footnotes.[^2]</p><p>[^1]: A string of syntactic words. [^2]: A useful example sentence.</p><h2 id="HHeaders" class="wikigeneratedid"><span>Headers</span></h2><h3 id="HTab7B.tabset7D-6" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-6" class="wikigeneratedid"><span>Usage</span></h4><p>Using between 1 and 6 <strong>hashtag</strong> symbol(s), followed by a space, before the text selection.</p><h4 id="HShortcuts-3" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>On the desired line, then clicking the <span class="wikimodel-verbatim">![Header]</span>(/assets/ui/ui-markdown-headers.png =x30)&#123;.radius-4} dropdown button in the toolbar.</li><li>On the desired line, press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + &nbsp;<kbd>Right</kbd> to increase the header level.</li><li>On the desired line, press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + &nbsp;<kbd>Left</kbd> to decrease the header level.</li></ul><h4 id="HExamples-6" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code"># Header 1<br/>## Header 2<br/>### Header 3<br/>#### Header 4<br/>##### Header 5<br/>###### Header 6</div></div><h2 id="HHorizontalLine" class="wikigeneratedid"><span>Horizontal Line</span></h2><h3 id="HTab7B.tabset7D-7" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-7" class="wikigeneratedid"><span>Usage</span></h4><p>Using <strong>triple dash</strong> symbols on a dedicated line.</p><h4 id="HShortcuts-4" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By clicking the <span class="wikimodel-verbatim">![Horizontal Rule]</span>(/assets/ui/ui-markdown-hr.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples-7" class="wikigeneratedid"><span>Examples</span></h4><!--startmacro:code|-|language="js"|-|Lorem ipsum dolor

-\-\-

Consectetur adipiscing elit--><div class="box"><div class="code">Lorem ipsum dolor<br/><br/>---<br/><br/>Consectetur adipiscing elit</div></div><p>Lorem ipsum dolor</p><hr/><p>Consectetur adipiscing elit</p><h2 id="HImages" class="wikigeneratedid"><span>Images</span></h2><h3 id="HTab7B.tabset7D-8" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-8" class="wikigeneratedid"><span>Usage</span></h4><p>Using the syntax <span class="box"><span class="code">![Image alt text](Image source "Image title")</span></span>.</p><p>Image alt text - text that is displayed when the image could not be loaded Image source - file path of image Image title - is displayed when the user hovers over the picture</p><h4 id="HShortcuts-5" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>Using the <strong>Assets</strong> tool in the left toolbar.</li></ul><h4 id="HExamples-8" class="wikigeneratedid"><span>Examples</span></h4><!--startmacro:code|-|language="markdown"|-|![Lorem ipsum](https://dolor.example.com/sit/amet.jpg "Lorem ipsum")

Consectetur ![adipiscing](/link/to/image.jpg) elit--><div class="box"><div class="code">![Lorem ipsum](https://dolor.example.com/sit/amet.jpg "Lorem ipsum")<br/><br/>Consectetur ![adipiscing](/link/to/image.jpg) elit</div></div><h4 id="HDimensions" class="wikigeneratedid"><span>Dimensions</span></h4><p>Sometimes images are too large or maybe you want the image to fill up all the available space.</p><p>Simply at the dimensions at the end of the image path in the following format:</p><div class="box"><div class="code"><span style="border: 1px solid #FF0000; ">!</span>[Image](/link/<span style="color: #0000ff; ">to</span>/<span style="color: #2b91af; ">image</span>.jpg =100x50)</div></div><p>You can also omit one of the values to automatically keep the image ratio:</p><div class="box"><div class="code"><span style="border: 1px solid #FF0000; ">!</span>[Image](/link/<span style="color: #0000ff; ">to</span>/<span style="color: #2b91af; ">image</span>.jpg =100x)<br/><span style="border: 1px solid #FF0000; ">!</span>[Image](/link/<span style="color: #0000ff; ">to</span>/<span style="color: #2b91af; ">image</span>.jpg =x50)</div></div><p>It's also possible to use other units, like %. Useful when you need the image to take all the available space:</p><div class="box"><div class="code"><span style="border: 1px solid #FF0000; ">!</span>[Image](/link/<span style="color: #0000ff; ">to</span>/<span style="color: #2b91af; ">image</span>.jpg =100%x)</div></div><h2 id="HInlineCode" class="wikigeneratedid"><span>Inline Code</span></h2><h3 id="HTab7B.tabset7D-9" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-9" class="wikigeneratedid"><span>Usage</span></h4><p>Using a <strong>backtick</strong> symbol before and after the text selection.</p><h4 id="HShortcuts-6" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Inline Code]</span>(/assets/ui/ui-markdown-inlinecode.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples-9" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">Lorem <span style="color: #a31515; ">`ipsum`</span> dolor</div></div><p>Lorem <span class="box"><span class="code">ipsum</span></span> dolor</p><h2 id="HItalic" class="wikigeneratedid"><span>Italic</span></h2><h3 id="HTab7B.tabset7D-10" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-10" class="wikigeneratedid"><span>Usage</span></h4><p>Using a <strong>single asterisk</strong> symbol before and after the text selection.</p><h4 id="HShortcuts-7" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Italic]</span>(/assets/ui/ui-markdown-italic.png =x30)&#123;.radius-4} button in the toolbar.</li><li>By selecting text, then pressing <kbd>CTRL</kbd> + <kbd>I</kbd></li></ul><h4 id="HExamples-10" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">Lorem *ipsum* dolor</div></div><p>Lorem <em>ipsum</em> dolor</p><h2 id="HKeyboardKeys" class="wikigeneratedid"><span>Keyboard Keys</span></h2><h3 id="HTab7B.tabset7D-11" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-11" class="wikigeneratedid"><span>Usage</span></h4><p>Using <span class="box"><span class="code">&lt;kbd&gt;</span></span> before and <span class="box"><span class="code">&lt;/kbd&gt;</span></span> after the text selection.</p><h4 id="HShortcuts-8" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Keyboard Keys]</span>(/assets/ui/ui-markdown-kbd.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples-11" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">Lorem ipsum dolor &lt;kbd&gt;CTRL&lt;/kbd&gt; + &lt;kbd&gt;C&lt;/kbd&gt;</div></div><p>Lorem ipsum dolor <kbd>CTRL</kbd> + <kbd>C</kbd></p><h2 id="HLinks" class="wikigeneratedid"><span>Links</span></h2><h3 id="HTab7B.tabset7D-12" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-12" class="wikigeneratedid"><span>Usage</span></h4><p>Using the syntax <span class="box"><span class="code">[Link Text](Link Target)</span></span>.</p><h4 id="HShortcuts-9" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>Using the <strong>Link</strong> tool in the left toolbar.</li></ul><h4 id="HExamples-12" class="wikigeneratedid"><span>Examples</span></h4><!--startmacro:code|-|language="markdown"|-|[Lorem ipsum](https://wiki.js.org/about)

Consectetur [adipiscing](/install/requirements) elit--><div class="box"><div class="code">[Lorem ipsum](https://wiki.js.org/about)<br/><br/>Consectetur [adipiscing](/install/requirements) elit</div></div><p><span class="wikiexternallink"><a href="https://wiki.js.org/about">Lorem ipsum</a></span></p><p>Consectetur <span class="wikiexternallink"><a href="/install/requirements">adipiscing</a></span> elit</p><h2 id="HMermaidDiagrams" class="wikigeneratedid"><span>Mermaid Diagrams</span></h2><h3 id="HTab7B.tabset7D-13" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-13" class="wikigeneratedid"><span>Usage</span></h4><p>Using a code block with the language <strong>mermaid</strong>.</p><p>Refer to <span class="wikiexternallink"><a href="https://mermaid-js.github.io/mermaid">Mermaid website</a></span> for the language reference.</p><h4 id="HExamples-13" class="wikigeneratedid"><span>Examples</span></h4><!--startmacro:code|-|language=""|-|```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<\br/>long time, so long<\br/>that the text does<\br/>not fit on a row.

Bob-\->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
```--><div class="box"><div class="code">```mermaid<br/>sequenceDiagram<br/>&nbsp;&nbsp;&nbsp;&nbsp;Alice -&gt;&gt; Bob: Hello Bob, how <span style="color: #0000ff; ">are</span> you?<br/>&nbsp;&nbsp;&nbsp;&nbsp;Bob<span style="color: #008000; ">--&gt;&gt;John: How about you John?<br/></span> &nbsp;&nbsp;&nbsp;Bob<span style="color: #008000; ">--x Alice: I am good thanks!<br/></span> &nbsp;&nbsp;&nbsp;Bob-x John: I am good thanks!<br/>&nbsp;&nbsp;&nbsp;&nbsp;Note <span style="color: #0000ff; ">right</span> <span style="color: #0000ff; ">of</span> John: Bob thinks a long&lt;br/&gt;long time, so long&lt;br/&gt;that the text does&lt;br/&gt;<span style="color: #0000ff; ">not</span> fit <span style="color: #0000ff; ">on</span> a <span style="color: #0000ff; ">row</span>.<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;Bob<span style="color: #008000; ">--&gt;Alice: Checking with John...<br/></span> &nbsp;&nbsp;&nbsp;Alice-&gt;John: Yes... John, how <span style="color: #0000ff; ">are</span> you?<br/>```</div></div><blockquote><p>While you can number each line numerically in order, it's easier to use the number <strong>1</strong> on each line. The final result will be incremented automatically. This way you don't need to re-number every single line when adding or removing a line later on.<br/>&#123;.is-info}</p></blockquote><h2 id="HPlantUMLDiagrams" class="wikigeneratedid"><span>PlantUML Diagrams</span></h2><h3 id="HTab7B.tabset7D-14" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-14" class="wikigeneratedid"><span>Usage</span></h4><p>Using a code block with the language <strong>plantuml</strong>.</p><p>Refer to <span class="wikiexternallink"><a href="https://plantuml.com/">PlantUML website</a></span> for the language reference.</p><h4 id="HExamples-14" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">```plantuml<br/>Bob-&gt;Alice : hello<br/>```</div></div><div class="box"><div class="code">Bob-&gt;Alice : hello</div></div><h2 id="HStrikethrough" class="wikigeneratedid"><span>Strikethrough</span></h2><h3 id="HTab7B.tabset7D-15" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-15" class="wikigeneratedid"><span>Usage</span></h4><p>Using <strong>double tildes</strong> symbols before and after the text selection.</p><h4 id="HShortcuts-10" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Strikethrough]</span>(/assets/ui/ui-markdown-strike.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples-15" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">Lorem ~~ipsum~~ dolor</div></div><p>Lorem <del>ipsum</del> dolor</p><h2 id="HSubscript" class="wikigeneratedid"><span>Subscript</span></h2><h3 id="HTab7B.tabset7D-16" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-16" class="wikigeneratedid"><span>Usage</span></h4><p>Using a <strong>single tilde</strong> symbol before and after the text selection.</p><h4 id="HShortcuts-11" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Subscript]</span>(/assets/ui/ui-markdown-sub.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples-16" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">Lorem ~ipsum~ dolor</div></div><p>Lorem <sub>ipsum</sub> dolor</p><h2 id="HSuperscript" class="wikigeneratedid"><span>Superscript</span></h2><h3 id="HTab7B.tabset7D-17" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-17" class="wikigeneratedid"><span>Usage</span></h4><p>Using a <strong>single caret</strong> symbol before and after the text selection.</p><h4 id="HShortcuts-12" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Superscript]</span>(/assets/ui/ui-markdown-sup.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples-17" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">Lorem ^ipsum^ dolor</div></div><p>Lorem <sup>ipsum</sup> dolor</p><h2 id="HTable" class="wikigeneratedid"><span>Table</span></h2><h3 id="HTab7B.tabset7D-18" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-18" class="wikigeneratedid"><span>Usage</span></h4><p>Using the syntax:</p><div class="box"><div class="code">| Header A1 | Header B1 | Header C1 |<br/>|-----------|-----------|-----------|<br/>| Cell A2 &nbsp;&nbsp;| Cell B2 &nbsp;&nbsp;| Cell C2 &nbsp;&nbsp;|<br/>| Cell A3 &nbsp;&nbsp;| Cell B3 &nbsp;&nbsp;| Cell C3 &nbsp;&nbsp;|<br/>...</div></div><h4 id="HExamples-18" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">| Header 1 | Header 2 | Header 3 |<br/>|----------|----------|----------|<br/>| Foo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| Bar &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| Xyz &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br/>| Abc &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| Def &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| 123 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</div></div><p>will result in:</p><table><tr><th scope="col">Header 1</th><th scope="col">Header 2</th><th scope="col">Header 3</th></tr><tr><td>Foo</td><td>Bar</td><td>Xyz</td></tr><tr><td>Abc</td><td>Def</td><td>123</td></tr></table><h4 id="HStylings-1" class="wikigeneratedid"><span>Stylings</span></h4><p>By adding the class <span class="box"><span class="code">dense</span></span> on a separate line, after the table, you can make the table use a smaller font and smaller padding. For example:</p><div class="box"><div class="code">| Header 1 | Header 2 | Header 3 |<br/>|----------|----------|----------|<br/>| Foo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| Bar &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| Xyz &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br/>| Abc &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| Def &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| 123 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br/>&#123;.dense}</div></div><p>will result in:</p><table><tr><th scope="col">Header 1</th><th scope="col">Header 2</th><th scope="col">Header 3</th></tr><tr><td>Foo</td><td>Bar</td><td>Xyz</td></tr><tr><td>Abc</td><td>Def</td><td>123</td></tr></table><p>&#123;.dense}</p><h2 id="HTaskLists" class="wikigeneratedid"><span>Task Lists</span></h2><h3 id="HTab7B.tabset7D-19" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-19" class="wikigeneratedid"><span>Usage</span></h4><p>Using the syntax <span class="box"><span class="code">- [ ]</span></span> or a <span class="box"><span class="code">- [x]</span></span>.</p><h4 id="HExamples-19" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">- [x] Checked task item<br/>- [x] Another checked task item<br/>- [ ] Unchecked task item</div></div><ul><li>[x] Checked task item</li><li>[x] Another checked task item</li><li>[ ] Unchecked task item</li></ul><h2 id="HLists" class="wikigeneratedid"><span>Lists</span></h2><h3 id="HNumberedLists7B.tabset7D" class="wikigeneratedid"><span>Numbered Lists &#123;.tabset}</span></h3><h4 id="HUsage-20" class="wikigeneratedid"><span>Usage</span></h4><p>Using a <strong>number</strong> followed by a <strong>period</strong> followed by a space,</p><h4 id="HShortcuts-13" class="wikigeneratedid"><span>Shortcuts</span></h4><p>By selecting text, then clicking the List button in the toolbar</p><h4 id="HExamples-20" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">1. pro tip<br/>1. make all of the numbers one<br/>1. and they will automatically rearrange <span style="color: #0000ff; ">if</span> you change line items</div></div><ol><li>pro tip</li><li>make all of the numbers one</li><li>and they will automatically rearrange if you change line items</li></ol><h2 id="HUnorderedLists" class="wikigeneratedid"><span>Unordered Lists</span></h2><h3 id="HTab7B.tabset7D-20" class="wikigeneratedid"><span>Tab &#123;.tabset}</span></h3><h4 id="HUsage-21" class="wikigeneratedid"><span>Usage</span></h4><p>Using an <strong>asterisk</strong> or a <strong>dash</strong> symbol, followed by a space, before each line of text.</p><h4 id="HShortcuts-14" class="wikigeneratedid"><span>Shortcuts</span></h4><ul><li>By selecting text, then clicking the <span class="wikimodel-verbatim">![Unordered List]</span>(/assets/ui/ui-markdown-ul.png =x30)&#123;.radius-4} button in the toolbar.</li></ul><h4 id="HExamples-21" class="wikigeneratedid"><span>Examples</span></h4><div class="box"><div class="code">- Lorem ipsum dolor sit amet<br/>- Consectetur adipiscing elit<br/>- Morbi vehicula aliquam</div></div><ul><li>Lorem ipsum dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Morbi vehicula aliquam</li></ul><h4 id="HStylings-2" class="wikigeneratedid"><span>Stylings</span></h4><p>By adding a class on a separate line, after the list, you can change the look of the list:</p><ul><li><span class="box"><span class="code">links-list</span></span></li><li><span class="box"><span class="code">grid-list</span></span></li></ul><p>For example:</p><!--startmacro:code|-|language="markdown"|-|- Grid Item 1
- Grid Item 2
- Grid Item 3
\{.grid-list}

- [Lorem ipsum dolor sit amet *Subtitle description here*](https://www.google.com)
- [Consectetur adipiscing elit *Another subtitle description here*](https://www.google.com)
- [Morbi vehicula aliquam *Third subtitle description here*](https://www.google.com)
\{.links-list}--><div class="box"><div class="code">- Grid Item 1<br/>- Grid Item 2<br/>- Grid Item 3<br/>&#123;.grid-list}<br/><br/>- [Lorem ipsum dolor sit amet *Subtitle description here*](https://www.google.com)<br/>- [Consectetur adipiscing elit *Another subtitle description here*](https://www.google.com)<br/>- [Morbi vehicula aliquam *Third subtitle description here*](https://www.google.com)<br/>&#123;.links-list}</div></div><p>will result in:</p><ul><li>Grid Item 1</li><li>Grid Item 2</li><li>Grid Item 3 &#123;.grid-list}</li></ul><p>and:</p><ul><li><span class="wikiexternallink"><a href="https://www.google.com">Link Title 1 <em>Subtitle description here</em></a></span></li><li><span class="wikiexternallink"><a href="https://www.google.com">Link Title 2 <em>Another subtitle description here</em></a></span></li><li><span class="wikiexternallink"><a href="https://www.google.com">Link Title 3 <em>Third subtitle description here</em></a></span> &#123;.links-list}</li></ul><blockquote><p>Note that these stylings are specific to Wiki.js and will fallback to standard list styling in other applications. &#123;.is-warning}</p></blockquote><h1 id="HDecorateSyntax" class="wikigeneratedid"><span>Decorate Syntax</span></h1><p>In some cases, using the <span class="box"><span class="code">&#123;.class-name}</span></span> syntax doesn't apply the styling class to the correct element because of ambiguous content. For example:</p><div class="box"><div class="code">&gt; Lorem ipsum<br/>&gt; - Line 1<br/>&gt; - Line 2<br/><span style="border: 1px solid #FF0000; ">&#123;</span>.<span style="color: #0000ff; ">is</span>-info<span style="border: 1px solid #FF0000; ">}</span></div></div><p>Because the parser doesn't know whether the <span class="box"><span class="code">.is-info</span></span> class should be applied to the list or the blockquote, it ends up being applied to the wrong element (the deepest element preceding it).</p><p>You can specify the correct target by using the decorate syntax <span class="box"><span class="code">&lt;!-- &#123;tag-name:.class-name} --&gt;</span></span> instead. For example:</p><div class="box"><div class="code">&gt; Lorem ipsum<br/>&gt; - Line 1<br/>&gt; - Line 2<br/>&lt;!<span style="color: #008000; ">-- &#123;blockquote:.is-info} --&gt;<br/></span></div></div><p>The <span class="box"><span class="code">.is-info</span></span> class will now correctly be applied to the blockquote element.</p></body>
</html>

Minor edit

Editing title and content of a_comprehensive_list_of_formatting_options

Page Information