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


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
</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 {bg-danger}

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 {text-success}

Which renders like:

This is some green text

Tables

Tables can be used with standard markdown as per below. See here for more table options.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Note: Table are responsive by default and will take up 100% of the width of parent div. Wrapping tables in Bootstrap Grid code can control table widths.

Eg: This code:

<div class="col-md-6">

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

</div>

Generates this:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

Was this article helpful? Votes: 68
Article details:
Published date: 29/09/2015 6:18AM
Last updated: 27/04/2017 4:25AM (Mark)
Share article: 
Author: Mark Moffat
Permalink: http://openkb.markmoffat.com/kb/editor_usage
usage | documentation | openKB |