This is the reference for the supported Markdown syntax in Wiki.js.

Tip

To learn about the interface of the Markdown editor itself and its features, check out the Markdown Editor guide instead.

Basic Syntax

Abbreviations

Define abbreviations using the *[<TERM>]: <definition> syntax.

One term definition per line.
Definitions can be placed anywhere in the content.
All matching terms on the page will automatically have the abbreviation styling.

The following code:

The HTML specification
is maintained by the W3C.

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

becomes:

The HTML specification
is maintained by the W3C.

Admonitions

Admonitions are blockquotes used for advice. They are styled to grab attention to show a tip, note, important, warning or caution.

Same syntax as blockquotes but the first line is one of:

> [!NOTE]
> [!TIP]
> [!IMPORTANT]
> [!WARNING]
> [!CAUTION]

Custom Title

The title can be customized by adding a custom string at the end of the first line, e.g.:
> [!NOTE] Custom Title

Shortcuts

On the desired line, then clicking the dropdown button in the top toolbar and choosing one of the 5 admonition options.

The following code:

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

> [!CAUTION] Some custom title
> Negative potential consequences of an action.

becomes:

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Some custom title

Negative potential consequences of an action.

Blockquotes

Blockquotes are useful for citations and asides.

Using a greater-than symbol >, followed by a space, before each line of text.

Shortcuts

On the desired line, then clicking the dropdown button in the top toolbar and choosing Blockquote.

The following code:

> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit

becomes:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit

Warning

This is legacy Wiki.js 2.x syntax. While it will keep working for the foreseable future, it's recommended to use the Admonitions syntax instead, which is supported by various platforms like GitHub/GitLab.

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.

Blue: is-info
Green: is-success
Yellow: is-warning
Red: is-danger

> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
{.is-info}

This is a {.is-info} blockquote.

This is a {.is-success} blockquote.

This is a {.is-warning} blockquote.

This is a {.is-danger} blockquote.

This is a default unstyled blockquote.

Bold

Using double asterisks symbols before and after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.
By selecting text, then pressing CTRL + B

The following code:

Lorem **ipsum** dolor

becomes:

Lorem ipsum dolor

Code Blocks

Using triple backticks symbols before and after the text selection, on dedicated lines.

Shortcuts

By click the button in the left toolbar.

The following code:

```
function lorem (ipsum) {
	const dolor = 'consectetur adipiscing elit'
}
```

becomes:

function lorem (ipsum) {
	const dolor = 'consectetur adipiscing elit'
}

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:

```java
// some code here
```

Refer to the reference list of about 185 supported programming languages.

The code block can be further customized by adding a series of properties on the first line.

Add a space at the end of the first line (after the language id), followed by one or more of the properties listed below. Multiple properties must be separated by a space.

Title: title

Lorem Ipsum

```java title="Lorem Ipsum"
// some code here
```

Line Numbering Offset: linesStart

```java linesStart="3"
// some code here
```

Line Highlighting: linesHighlight

```java linesHighlight="1,3,5-8"
class Main {
  public static void main(String[] args) {
    
    int first = 10;
    int second = 20;

    // add two numbers
    int sum = first + second;
    System.out.println(first + " + " + second + " = "  + sum);
  }
}
```

Tip

If you combine both linesStart and linesHighlight properties, the linesHighlight values should reference the line numbers as they are displayed. For example, with linesStart set to 12 and linesHighlight set to 13, the row labelled 13 will be highlighted, which is the second row being displayed.

Definition Lists

On a new line, enter a term.
On a another new line under it, using a colon symbol, followed by a space, before each line of text.

Tip

A term can have multiple definitions by stacking multiple lines starting with a colon + space.

Shortcuts

By clicking the button in the left toolbar.

The following code:

Term A
: Definition of the term A

Term B
: Definition of the term B
: Another definition of the term B

becomes

Term A: Definition of the term A
Term B: Definition of the term B; Another definition of the term B

Headers

Headers are used to build the table of contents shown optionally on the right.

Using between 1 and 6 hashtag symbol(s), followed by a space, before the text selection.

Tip

It's recommended to use the page title as what would traditionally be the "Header 1" level in a classic word processor, rather than duplicate the title in the page contents.

Shortcuts

On the desired line, then clicking the dropdown button in the top toolbar.
On the desired line, press CTRL + ALT + Right to increase the header level.
On the desired line, press CTRL + ALT + Left to decrease the header level.

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Highlight

Using double equal symbols before and after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.

The following code:

Lorem ==ipsum== dolor

becomes:

Lorem ipsum dolor

Horizontal Line

Using triple dash symbols on a dedicated line.

Shortcuts

On the desired line, clicking the button in the left toolbar.

Lorem ipsum dolor

---

Consectetur adipiscing elit

Lorem ipsum dolor

Consectetur adipiscing elit

Images

Using the syntax ![Image Alt Text](Image Path/URL).

Shortcuts

By clicking the button in the left toolbar.

![Lorem ipsum](https://dolor.example.com/sit/amet.jpg)

Consectetur ![Some image](/link/to/image.jpg) elit

Sometimes images are too large or maybe you want the image to fill up all the available space.

Simply at the dimensions at the end of the image path in the following format:

![Image](/link/to/image.jpg =100x50)

You can also omit one of the values to automatically keep the image ratio:

![Image](/link/to/image.jpg =100x)
![Image](/link/to/image.jpg =x50)

It's also possible to use other units, like %. Useful when you need the image to take all the available space:

![Image](/link/to/image.jpg =100%x)

Inline Code

Using a backtick symbol before and after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.

The following code:

Lorem `ipsum` dolor

becomes:

Lorem ipsum dolor

Italic

Using a single asterisk symbol before and after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.
By selecting text, then pressing CTRL + I

The following code:

Lorem *ipsum* dolor

becomes:

Lorem ipsum dolor

Keyboard Keys

Using <kbd> before and </kbd> after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.

The following code:

Lorem *ipsum* dolor

becomes:

Lorem ipsum dolor

Links

Using the syntax [Link Text](Link Target).

Note

Links to external targets will show an "external" icon at the end of the link.

Open in New Tab

To make a link open in a new tab, add {target=_blank} at the end of the link, e.g.:

[Link Text](Link Target){target=_blank}

Shortcuts

Using the button in the left toolbar.

The following code:

[Lorem ipsum](https://js.org)
Consectetur [adipiscing](/setup/requirements) elit
To open a link in a new tab: [Foo Bar](https://js.org){target="_blank"}

becomes:

Lorem ipsum
Consectetur adipiscing elit
To open a link in a new tab: Foo Bar

Ordered Lists

Using an number, followed by a dot symbol, followed by a space, before each line of text.

Tip

While you can number each line numerically in order, it's easier to use the number 1 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.

Shortcuts

By clicking the button in the top toolbar.

The following code:

1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Morbi vehicula aliquam

becomes

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Morbi vehicula aliquam

Strikethrough

Using double tildes symbols before and after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.

The following code:

Lorem ~~ipsum~~ dolor

becomes:

Lorem ~~ipsum~~ dolor

Subscript

Using a single tilde symbol before and after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.

The following code:

Lorem ~ipsum~ dolor

becomes

Lorem _ipsum dolor

Superscript

Using a single caret symbol before and after the text selection.

Shortcuts

By selecting text, then clicking the button in the top toolbar.

The following code:

Lorem ^ipsum^ dolor

becomes

Lorem ^ipsum dolor

Task Lists

Using the - [ ] (unchecked) or - [x] (checked) syntax. One per line.

Shortcuts

By clicking the button in the top toolbar.

The following code:

- [x] Checked task item
- [x] Another checked task item
- [ ] Unchecked task item

becomes

x Checked task item
x Another checked task item
Unchecked task item

Unordered Lists

Using an asterisk or a dash symbol, followed by a space, before each line of text.

Shortcuts

By clicking the button in the top toolbar.

The following code:

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Morbi vehicula aliquam

becomes

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Morbi vehicula aliquam

Content Blocks

Dynamic content like diagrams, infoboxes, indexes, players, spoilers, etc. can be inserted into pages using Content Blocks.

Click on the button in the left toolbar to list the available blocks and parameters.

Refer to the Content Blocks page to learn about each block.

Block Syntax

Content Blocks are using the Markdown Component (MDC) syntax.

::block-name{foo="abc" bar="xyz"}
Some content
::

In the above code:

::block-name is the opening tag, specifying the name of the block. All blocks are prefixed with block-.
{foo="abc" bar="xyz"} is a list of properties. Property "foo" is set to "abc" and "bar" is set to "xyz".
Some content is the content of the block. Note that not all blocks have content.
:: is the closing tag.

Block Example

For example, you can define a spoilers block as:

::block-spoiler
The super **secret** content to hide. :scream:
::

whichs produces:

The super secret content to hide.

Content as Code

Some blocks (like diagrams) require their content to be wrapped into code blocks. This is to ensure the content is only interpreted by the block and not the Markdown engine.

In the example below, the diagram source is embedded into a mermaid code block:

::block-diagram
```mermaid
flowchart LR
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A
```
::

Emojis

To display the emoji picker dialog, click the button in the left toolbar.

Upon selecting an emoji, it's shortcode will be inserted at the current cursor position.

For example, :smiley: will render as .

Note

You can still use emojis directly (without the shortcodes), but they will render in the user system's emoji style.
Meanwhile, the shortcodes render the emojis identically for all users, regardless of their operating system.

Footnotes

Use the syntax [^1] for the location of the footnote in the main text, and [^1]: this is a footnote for the actual footnote. Footnotes themselves will automatically appear at the bottom of the page under a horizontal line. Increment the number for additional footnotes.

Shortcuts

By selecting text, then clicking the button in the left toolbar.

The following code:

This sentence[^1] needs a few footnotes.[^2]

[^1]: A string of syntactic words.
[^2]: A useful example sentence.

becomes:

This sentence^[1] needs a few footnotes.^[2]

Icons

To display the icon picker dialog, click the button in the left toolbar.

Upon selecting an icon, it's shortcode will be inserted at the current cursor position.

For example, :mdi:candy: will render as .

Tables

To create a table, click on the button in the left toolbar. This will launch the Table Editor which is a convenient way to create and edit tables without writing table code syntax.

Basic Table Syntax

Using the following example:

| Column 1 | Column 2 | Column 3 |
| :-- | :-: | --: |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |

All columns are separated by a pipe | symbol.
The first line describes the table header columns.
The second line states the text alignment to use for each column:
- :-- or -- for left alignment (default)
- :--: for center alignment
- --: for right alignment
The third and forth lines are table body rows. You can add as many rows as needed.

The above example would produce:

Column 1	Column 2	Column 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

MultiMarkdown Table Syntax

When the MultiMarkdown Table module is enabled (on by default), the following extended syntax is also available:

Warning

Note that using this extended syntax (with the exception of headerless) will not allow you to use the visual Table Editor.

Headerless

The first line defining the header row of a table can be omitted to display a headerless table.

Rowspan / Colspan

Rowspan: Use ^^ in a cell to merge it with the cell above it.
Colspan: Don't use any space between the pipe | symbols of a cell (e.g. ||) to merge it with the cell to the left.

Tall cell	Long cell
	Cell	Cell

Multiline

Add a backslash \ at the end of a line to merge it with the one below it.

Using the following example:

|   Markdown   | Rendered HTML |
|--------------|---------------|
|    *Italic*  | *Italic*      | \
|              |               |
|    - Item 1  | - Item 1      | \
|    - Item 2  | - Item 2      |
|    ```python | ```python       \
|    .1 + .2   | .1 + .2         \
|    ```       | ```           |

would produce:

Markdown	Rendered HTML
`Italic`	Italic
`- Item 1 - Item 2`	Item 1 Item 2
```python .1 + .2 ```	`.1 + .2`

Tabs

To create a tabset, click on the button in the left toolbar. The following template is automatically inserted at the current cursor position:

:::block-tabs
::block-tab{label="First tab"}
Content of the first tab.
::

::block-tab{label="Second tab"}
Content of the second tab.
::
:::

Exploring what each line does:

The :::block-tabs line is the opening tag of the tabset.
The ::block-tab{label="First tab"} line is the opening tag of the first tab. Change the label value.
The Content of the first tab. line is standard Markdown content. It can be of any length, on multiple lines and even include content blocks.
The :: line is the closing tag of the first tab.
The same three lines are repeated for the second tab. You can add as many tabs as desired.
The ::: line is the closing tag of the tabset.

Note

Notice the block-tabs opening and closing lines use 3 colons while each tab inside it use 2 colons.

The code above produces the following tabset:

Content of the first tab.

Content of the second tab.

Headers inside tabs are still displayed in the table of contents.

Tab Label as Header

You can make a tab label act as a header so that it appears in the table of contents by using the header property to define the header level. For example:
::block-tab{label="Foo bar" header="2"}
will act the same as a H2 header. Clicking it in the table of contents will automatically scroll to it and reveal it if not currently focused.

Decorate Syntax

You can apply CSS classes to elements by using the {.class-name} syntax.

Examples

Inline Elements

To add the text-primary CSS class to the bold element, add {.text-primary} directly after it:

Lorem **ipsum**{.text-primary} dolor sit amet

Block Elements

To add the is-info CSS class to the blockquote element, add {.is-info} on a line directly below the blockquote:

> Lorem ipsum
> Line 1
> Line 2
{.is-info}

Handling Ambiguity

In some cases, using the {.class-name} syntax doesn't apply the styling class to the correct element because of ambiguous content. For example:

> Lorem ipsum
> - Line 1
> - Line 2
{.is-info}

Because the parser doesn't know whether the .is-info class should be applied to the list or the blockquote, it ends up being applied to the wrong element (the deepest element preceding it).

You can specify the correct target by using the decorate syntax  instead. For example:

> Lorem ipsum
> - Line 1
> - Line 2
<!-- {blockquote:.is-info} -->

The .is-info class will now correctly be applied to the blockquote element.

A string of syntactic words. ↩︎
A useful example sentence. ↩︎