# Editor usage

### Markdown

openKB uses the CommonMark flavour of Markdown. This means it has a few more things thrown in which the original standard which John Gruber created. CommonMark is the standard used on the popular StackOverflow range of sites, Github, Reddit and many more.

### Markdown reference

I use this Markdown cheatsheet all the time: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

openKB adds to the CommonMark using extensions which might be useful when writing knowledge base articles. These include flowcharts/graphs using Mermaid and a Markdown-it extension called Markdown-it-classy for adding css classes to text/elements.

### Mermaid charts

Mermaid charts can be added to any article using the Mermaid syntax and wrapping the code in a Mermaid div. Eg:

<div class="mermaid"></div>


Chart code can be added to any article through the edit like so:

<div class="mermaid">
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
</div>


The code above renders the following chart:

graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D

More examples can be found on the Mermaid website here.

### Markdown classes - Markdown-it-classy

openKB uses a library called Markdown-it to render all Markdown. This includes server side (NodeJS) and client side (Live preview) rendering. The Markdown-it library allows for extensions and one is the ability to add classes to text/elements.

As openKB uses Bootstrap for styling you can hop on the back of this styling to add it to your articles.

For example. You may want to add a big fat warning message but bold text just doesn’t cut it. You can simply add the following to your article:

Warning: This is a warning message Note: The desired class needs to follow the paragraph of text you want to apply the class to. You simply add the {} wrapping the desired class. The {bg-danger} refers to a Bootstrap class for making the background of some text red.

This renders like:

Warning: This is a warning message

You can also colour any text using:

This is some green text Which renders like:

This is some green text