Editor usage


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

Added functionality

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

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

Was this article helpful? Votes: 16
Article details:
Published date: 26/01/2020 10:10AM
Last updated: 26/01/2020 10:23AM (Mark)
Share article: 
Author: Mark
Permalink: http://openkb.markmoffat.com/kb/editor-usage
editor |