MarkdownPlus Syntax

This page presents an overview over the Markdown/MarkdownPlus Syntax and how it's used.

→ Find more specific infos in chapt. Reference.

Elements marked like this are Extensions to Markdown/Markdown Extra.
␣ stands for a space character; ↵ denotes a line-break.

Hint:
Whenever one of these syntax patterns interfers with your intention, just shield conflicting elements by prepending a backslash.

E.g. \++X++

Line Breaks

Markdown	Result	HTML
Lorem↵ ipsum	Lorem ipsum	`<p>Lorem ipsum</p>`
Lorem␣↵ ipsum	Lorem ipsum	`<p>Lorem ipsum</p>`
Lorem␣␣↵ ipsum	Lorem ipsum	`<p>Lorem<br>ipsum</p>`
Lorem\ ipsum	Lorem ipsum	`<p>Lorem<br>ipsum</p>`
Lorem␣BR␣ipsum	Lorem ipsum	`<p>Lorem<br>ipsum</p>`

Paragraphs

Markdown Result HTML

Markdown	Result	HTML
Lorem↵ ↵ ipsum	Lorem ipsum	`<p>Lorem</p> <p>ipsum</p>`

Lorem↵
↵
ipsum

Lorem

ipsum

<p>Lorem</p>
<p>ipsum</p>

Headings

Markdown	Result	HTML
# H1 Header	H1 Header	H1 Header
## H2 Header	H2 Header	H2 Header
### H3 Header	H3 Header	H3 Header
etc.

Horizontal Rule

Markdown	Result	HTML
---

Basic Text Styling

Markdown	Result	HTML
bold text	bold text	bold text
italic text	italic text	italic text
*bold italic text*	*bold italic text*	*bold italic text*

Miscellaneous HTML Tags

Markdown	Result	HTML
~sub~script (9 characters max)	_subscript	`<sub>sub</sub>script`
^super^script (20 characters max)	^superscript	`<sup>super</sup>script`
==marked==	marked	`<mark>marked</mark>`
++inserted++	inserted	`<ins>inserted</ins>`
~~deleted~~	~~deleted~~	`<del>deleted</del>`
__underlined__	underlined	`<u>underlined</u>`
^^text^^ (5 characters max)	`text`	`<kbd>text</kbd>`
``samp``	`samp`	`<samp>samp</samp>`
`code`	`code`	`<code>code</code>`
```php code block ```	`code block`	`<pre><code class="php"> Code Block </code></pre>`

Lists

Unordered List

Markdown	Result	HTML
- First item - Second item - Third item	First item Second item Third item	`<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>`

Ordered or Enumerated List

Markdown	Result	HTML
1. First item 1. Second item 1. Third item	First item Second item Third item	`<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>`

Ordered or Enumerated List with Start-Value


Markdown	Result	HTML
4!. Forth item 1. Fifth item 1. Sixth item	Forth item Fifth item Sixth item	`<ol start='4'> <li>Forth item</li> <li>Fifth item</li> <li>Sixth item</li> </ol>`

→ see chapt. Numbered Lists with Counter Preset

Definition List


Markdown	Result	HTML
Term : Description Lorem: : ipsum	Term Description Lorem: ipsum	`<dl> <dt>Term</dt> <dd> Description </dd> <dt>Lorem:</dt> <dd> ipsum </dd> </dl>`

→ see chapt. Definition Lists

Task List


Markdown	Result	HTML
- [x] Done - [ ] To do	Done To do	`<ul class="mdp-todo-list"> <li class="checked">Done</li> <li class="">To do</li> </ul>`

Links

Conventional Markdown

Markdown	Result	HTML
<https://www.example.com>	https://www.example.com	`<a href="https://www.example.com"> https://www.example.com </a>`
<name@domain.net>	name@domain.net	`<a href="mailto:name@domain.net">name@domain.net</a>`
[example.com](https://www.example.com "TITLE")	example.com	`<a href="https://www.example.com" title='TITLE'> example.com </a>`
[e-mail](mailto:name@domain.net)	e-mail	`<a href="mailto:name@domain.net">e-mail</a>`

KirbyTag Link

Markdown Result HTML

(link:https://example.com text:example.com target:_blank)

Markdown	Result	HTML
(link:https://example.com text:example.com target:_blank)	example.com	`<a href="https://example.com" rel="noopener noreferrer" target="_blank"> example.com </a>`
(link:name@domain.net)	name@domain.net	`<a href="mailto:name@domain.net" class="pfy-link pfy-link-mail"> <span class="pfy-link-icon"><svg viewBox="0 0 1000 1000" width="1em"><use href="#pfy-iconset-mail"></use></svg></span> <span class="pfy-link-text">name@domain.net</span> </a>`

example.com

<a href="https://example.com"

  rel="noopener noreferrer" target="_blank">

    example.com

</a>

(link:name@domain.net)

name@domain.net

<a href="mailto:name@domain.net" class="pfy-link  pfy-link-mail">
  <span class="pfy-link-icon"><svg viewBox="0 0 1000 1000" width="1em"><use href="#pfy-iconset-mail"></use></svg></span>
  <span class="pfy-link-text">name@domain.net</span>
</a>

→ see doc KirbyText

Images

Conventional Markdown

Markdown	Result	HTML
![Alt text](leafs.jpg)		`<img src='{path}/leafs.jpg' alt='Alt text' />`

Image with Caption

Markdown	Result	HTML
![Alt text](leafs.jpg "CAPTION")	CAPTION	`<figure> <img src='{path}/leafs.jpg' alt='Alt text' /> <figcaption>CAPTION</figcaption> </figure>`

KirbyTag Image


Markdown	Result	HTML
(image: leafs.jpg)		`<figure> <img alt="" src="{path}/leafs.jpg"> </figure>`
(image: leafs.jpg caption: "CAPTION")	CAPTION	`<figure> <img alt="" src="{path}/leafs.jpg"> <figcaption><p>“CAPTION”</p></figcaption> </figure>`

→ see doc KirbyText

Tabulator

Markdown Result HTML

Markdown	Result	HTML
Lorem␣␣>>␣ipsum L␣␣>>␣ipsum	Lorem ipsum L ipsum	`<div class="mdp-tabulator-outer-wrapper mdp-tabulator-outer-wrapper-1" style="--tt-last: calc(100% - var(--tt1-width, var(--tt-width)))"> <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-1"> <div class="tt1">Lorem</div><div class="tt2 tt-last">ipsum</div> </div> <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-2"> <div class="tt1">L</div><div class="tt2 tt-last">ipsum</div> </div> </div>`
Lorem␣␣4em>>␣ipsum L␣␣>>␣ipsum	Lorem ipsum L ipsum	`<div class="mdp-tabulator-outer-wrapper mdp-tabulator-outer-wrapper-1" style="--tt1-width: 4em;--tt-last: calc(100% - var(--tt1-width, var(--tt-width)))"> <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-1"> <div class="tt1">Lorem</div><div class="tt2 tt-last">ipsum</div> </div> <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-2"> <div class="tt1">L</div><div class="tt2 tt-last">ipsum</div> </div> </div>`

Lorem␣␣>>␣ipsum
L␣␣>>␣ipsum

Lorem

ipsum

<div class="mdp-tabulator-outer-wrapper mdp-tabulator-outer-wrapper-1" style="--tt-last: calc(100% - var(--tt1-width, var(--tt-width)))">
  <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-1">
    <div class="tt1">Lorem</div><div class="tt2 tt-last">ipsum</div>
  </div>
  <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-2">
    <div class="tt1">L</div><div class="tt2 tt-last">ipsum</div>
  </div>
</div>

Lorem␣␣4em>>␣ipsum
L␣␣>>␣ipsum

Lorem

ipsum

<div class="mdp-tabulator-outer-wrapper mdp-tabulator-outer-wrapper-1" style="--tt1-width: 4em;--tt-last: calc(100% - var(--tt1-width, var(--tt-width)))">
  <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-1">
    <div class="tt1">Lorem</div><div class="tt2 tt-last">ipsum</div>
  </div>
  <div class="mdp-tabulator-wrapper mdp-tabulator-wrapper-2">
    <div class="tt1">L</div><div class="tt2 tt-last">ipsum</div>
  </div>
</div>

Note:
The pattern for tabulator is ␣␣>>␣, i.e. it requires at least 2 leading and 1 trailing white spaces.

Optionally prepend a width indicator, e.g. X ␣␣4em>>␣Y.

→ see chapt. Tabulator

Div Blocks


Markdown	Result	HTML
@@@ .box color:red Lorem @@@	Lorem	`<div class='box' style='color:red;'> <p>Lorem</p> </div>`

The text following @@@ can specify attributes and meta-commands to be applied.

Syntax

Syntax for Div-Blocks and Attribute Injection

Basic Arguments
`<tag`	→ tag applied to the block, e.g. `<aside`
`"xyz"` or `'xyz'`	→ content that will be injected into the block
`#my-id`	→ ID applied to the block
`.my-class`	→ class applied to the block
`css-attribute:value`	→ style applied to the block, e.g. `color:red`
`html-attribute=value`	→ attribute applied to the block, e.g. `aria-hidden=true`
Meta Commands
`!off`	→ hides the block (with `style='display:none'`)
`!lang=xy`	→ omits the block unless given language is active
`!inline`	→ compiles the block as inline-markdown (aka not block level)
`!literal`	→ renders text as stated (i.e. included in HTML output as is)
`!showfrom=ISO-Timestamp`	→ omits the block until time is reached
`!showtill=ISO-Timestamp`	→ omits the block after time has passed
`!visible={criteria}`	→ omits the block if admission criteria not met, e.g. `!visible=loggedin`
`!user={username}`	→ omits the block if admission criteria not met, e.g. `!user=alice`
`!role={user-role}`	→ omits the block if admission criteria not met, e.g. `!role=staff`

*ISO-time*: `YYYY-MM-DD` or `YYYY-MM-DDTHH:MM:SS` (e.g. ``2023-01-06T14:23``)

Example

@@@ <aside #my-id.my-class aria-hidden=true !showfrom=2025-01-01 !visible=loggedin
xy
@@@

Hint:
To get this help, write:

@@@ !help
@@@

→ see chapt. Div-Blocks

Accordion

Simple Syntax


Markdown	Result	HTML
Summary <> Details ... <> ...	Summary Details … …	`<div class="mdp-accordion"> <details> <summary>Summary</summary> <div class="mdp-accordion-body"> <p>Details ...<br> ...</p> </div> </details> </div>`

AsciiTables

|=== 'Caption' .myclass // → table start with caption and table attributes
|# Col 1 | Col 2        // → header row
|---                    // → row terminator
| A | B | C             // → 3 cells sep. by |
|---
| D                     // → 2 cells on sep. lines
| E␣␣
Lorem Ipsum
                        // → 3rd cell missing
|===                    // → table end

Caption
Col 1	Col 2
A	B	C
D	E Lorem Ipsum

Note:

Cells always start with |
They can be written on separate lines
Rows are separated by |---
Missing cells are taken care of

→ see chapt. AsciiDoc-Tables

Icons

Markdown Result HTML

:bluetooth:

Markdown	Result	HTML
:bluetooth:		`<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><path d="m0 3.75 7 7.5-3.5 3.75v-15l3.5 3.75-7 7.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(7 3)"/></svg>`

<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><path d="m0 3.75 7 7.5-3.5 3.75v-15l3.5 3.75-7 7.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(7 3)"/></svg>

→ see chapt. Icons

MarkdownPlus Syntax

Line Breaks

Paragraphs

Headings

H1 Header

H1 Header

H2 Header

H2 Header

H3 Header

H3 Header

Horizontal Rule

Basic Text Styling

Miscellaneous HTML Tags

Lists

Unordered List

Ordered or Enumerated List

Ordered or Enumerated List with Start-Value

Definition List

Task List

Links

Conventional Markdown

KirbyTag Link

Images

Conventional Markdown

Image with Caption

KirbyTag Image

Tabulator

Div Blocks

Syntax

Example

Accordion

Simple Syntax

AsciiTables

Icons

MarkdownPlus