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.
Wiki.js supports the full CommonMark specification + adds some useful extensions (including the Github Flavored Markdown addons).
Using a greater-than symbol, followed by a space, before each line of text.
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
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.
is-info
is-success
is-warning
is-danger
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
{.is-info}
This is a default unstyled blockquote.
This is a
{.is-info}
blockquote.
This is a
{.is-success}
blockquote.
This is a
{.is-warning}
blockquote.
This is a
{.is-danger}
blockquote.
Using double asterisks symbols before and after the text selection.
Lorem **ipsum** dolor
Lorem ipsum dolor
Using triple backticks symbols before and after the text selection, on dedicated lines.
```
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.
This feature is only available from version 2.4 and up.
Using headers and adding the {.tabset}
class to the parent header. The parent header text will not be shown in the final result.
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 ###
(h3), the tabs headers must be ####
(h4). The maximum header level for a parent being 5 and the children 6.
# 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...
Using the syntax :identifier:
See the Emoji Cheat Sheet for the full list of possible options.
:apple:
Can be also be used :fire: inline
Can also be used inline.
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.
Using between 1 and 6 hashtag symbol(s), followed by a space, before the text selection.
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
Using triple dash symbols on a dedicated line.
Lorem ipsum dolor
---
Consectetur adipiscing elit
Lorem ipsum dolor
Consectetur adipiscing elit
Using the syntax ![Image Caption](Image Source)
.
![Lorem ipsum](https://dolor.example.com/sit/amet.jpg)
Consectetur ![adipiscing](/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)
Using a backtick symbol before and after the text selection.
Lorem `ipsum` dolor
Lorem ipsum
dolor
Using a single asterisk symbol before and after the text selection.
Lorem *ipsum* dolor
Lorem ipsum dolor
Using <kbd>
before and </kbd>
after the text selection.
Lorem ipsum dolor <kbd>CTRL</kbd> + <kbd>C</kbd>
Lorem ipsum dolor CTRL + C
Using the syntax [Link Text](Link Target)
.
[Lorem ipsum](https://wiki.js.org/about)
Consectetur [adipiscing](/install/requirements) elit
Consectetur adipiscing elit
Using a code block with the language mermaid.
Refer to Mermaid website for the language reference.
```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?
```
Using an number, followed by a dot symbol, followed by a space, before each line of text.
1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Morbi vehicula aliquam
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.
Using a code block with the language plantuml.
Refer to PlantUML website for the language reference.
```plantuml
Bob->Alice : hello
```
Using double tildes symbols before and after the text selection.
Lorem ~~ipsum~~ dolor
Lorem ipsum dolor
Using a single tilde symbol before and after the text selection.
Lorem ~ipsum~ dolor
Lorem ipsum dolor
Using a single caret symbol before and after the text selection.
Lorem ^ipsum^ dolor
Lorem ipsum dolor
Using the syntax - [ ]
or a - [x]
.
- [x] Checked task item
- [x] Another checked task item
- [ ] Unchecked task item
Using an asterisk or a dash symbol, followed by a space, before each line of text.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Morbi vehicula aliquam
By adding a class on a separate line, after the list, you can change the look of the list:
links-list
grid-list
For example:
- 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}
will result in:
and:
Note that these stylings are specific to Wiki.js and will fallback to standard list styling in other applications.