Markdown Syntax

Updated: Saturday, 12. October 2019 07:41 PM UTC

This document is an example markdown template supported by our system.

Headers

# This is a header (h1)
## This is a header (h2)
### This is a header (h3)
#### This is a header (h4)
##### This is a header (h5)
###### This is a header (h6)

This is a header (h2)

This is a header (h3)

This is a header (h4)

This is a header (h5)
This is a header (h6)

Blockquotes

> This is a blockquote. will become:

This is a blockquote.

and 

<blockquote class="warning"><p>Please give attention and check the warnings</p></blockquote>

will become:

Please give attention and check the warnings

Warning color inside normal blockquote:

> This is warning
{: .warning }

This is warning

Code block

Types:

  1. Fenced code block
  2. Super Fenced code block
  3. Inline code

Note

Fenced blocks should be separated from other blocks by an empty line

Fenced code block

```bash
sudo apt install something
sudo apt purge something
```

will look like:

sudo apt install something
sudo apt purge something

Super fenced code block

Fenced code block inside blockquote:

&gt; ```
  a fenced block
  ```

End of blockquote.

Starting another blockquote:

&gt; ```
  a fenced block

&gt; with blank lines
  ```

will look like:

a fenced block

End of blockquote.

Starting another blockquote:

a fenced block

with blank lines

Super fenced code block with list item

1. Item 1
2. Item 2
    ```
    sudo apt update
    ```
3. Item 3
4. 
    ```
    sudo apt upgrade
    ```

will look like:

  1. Item 1
  2. Item 2 
    sudo apt update
  3. Item 3
  4. sudo apt upgrade

Tabbed fences

```Bash tab=
#!/bin/bash
STR="Hello World!"
echo $STR
```

```C tab=
#include 

int main(void) {
  printf("hello, world\n");
}
```

```C++ tab=
#include &lt;iostream&gt;

int main() {
  std::cout &lt;&lt; "Hello, world!\n";
  return 0;
}
```

```C# tab=
using System;

class Program {
  static void Main(string[] args) {
    Console.WriteLine("Hello, world!");
  }
}
```

will look like:

#!/bin/bash
STR="Hello World!"
echo $STR
#include <stdio.h>

int main(void) {
  printf("hello, world\n");
}
#include <iostream>

int main() {
  std::cout << "Hello, world!\n";
  return 0;
}
using System;

class Program {
  static void Main(string[] args) {
    Console.WriteLine("Hello, world!");
  }
}

Inline code

`sudo apt search something`
will look like:

sudo apt search something

Ordered list

1. List item 1
  1. Item 11
  2. Item 12
  3. Item 13
    1. Item 131
    2. Item 132
2. List item 2
  1. Item 21
  2. Item 22
  3. Item 23
3. List item 3

will look like:

  1. List item 1
    1. Item 11
    2. Item 12
    3. Item 13
      1. Item 131
      2. Item 132
  2. List item 2
    1. Item 21
    2. Item 22
    3. Item 23
  3. List item 3

Unordered list:

* List item
  * List item
  * List item
  * List item
  * List item
  * List item
  * List item
    * List item
    * List item
    * List item
    * List item
    * List item
    * List item
* List item
* List item
* List item
* List item
* List item
* List item

will look like:

  • List item
    • List item
    • List item
    • List item
    • List item
    • List item
    • List item
      • List item
      • List item
      • List item
      • List item
      • List item
      • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Description lists

Apple
:   Pomaceous fruit of plants of the genus Malus in
    the family Rosaceae.

Orange
:   The fruit of an evergreen tree of the genus Citrus.

will be rendered as:

Apple
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
Orange
The fruit of an evergreen tree of the genus Citrus.

Task List

Task List

- [X] item 1
  * [X] item A
  * [ ] item B
    more text
    + [x] item a
    + [ ] item b
    + [x] item c
  * [X] item C
- [ ] item 2
- [ ] item 3

will become:

Task List

  • item 1
    • item A
    • item B more text
      • item a
      • item b
      • item c
    • item C
  • item 2
  • item 3

Footnotes

Footnote with a number[^1], footnote with a label[^mylabel] and another footnote with a dummy content[^3].

[^1]: The first paragraph of the definition.

    Paragraph two of the definition.

    &gt; A blockquote with
    &gt; multiple lines.

        a code block

    A final paragraph.

[^mylabel]: A footnote on the label.

[^3]: Dummy content.

Footnote with a number1, footnote with a label2 and another footnote with a dummy content3.

Table

Simple table

Head A | Head B | Head C | Head D | Head E | Head F | Head G
------ | ------ | ------ | ------ | ------ | ------ | ------
A | B | C | D | E | F | G
A | B | C | D | E | F | G
A | B | C | D | E | F | G
A | B | C | D | E | F | G

will look like

Head A Head B Head C Head D Head E Head F Head G
A B C D E F G
A B C D E F G
A B C D E F G
A B C D E F G

Grid tables


+---------------+---------------+-----------------+
| First Header  | Second Header | Third Header    |
+===============+===============+=================+
| A cell that   | A cell that spans multiple      |
| spans         | columns.                        |
| multiple rows +---------------+-----------------+
|               | One, two cell | Red & blue cell |
+---------------+---------------+-----------------+

will be rendered as:

First Header

Second Header

Third Header

A cell that spans multiple rows

A cell that spans multiple columns.

One, two cell

Red & blue cell

Admonition

Info

!!! info
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Info

Any number of other indented markdown elements.

This is the second paragraph.

And this:

!!! info "Optional explicit title within double quotes"
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Optional explicit title within double quotes

Any number of other indented markdown elements.

This is the second paragraph.

Tip

!!! tip
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Tip

Any number of other indented markdown elements.

This is the second paragraph.

And this:


!!! tip "Optional explicit title within double quotes"
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Optional explicit title within double quotes

Any number of other indented markdown elements.

This is the second paragraph.

Note

!!! note
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Note

Any number of other indented markdown elements.

This is the second paragraph.

And this:

!!! note "Optional explicit title within double quotes"
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Optional explicit title within double quotes

Any number of other indented markdown elements.

This is the second paragraph.

Warning

!!! warning
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Warning

Any number of other indented markdown elements.

This is the second paragraph.

And This:

!!! warning "Optional explicit title within double quotes"
    Any number of other indented markdown elements.

    This is the second paragraph.

will look like:

Optional explicit title within double quotes

Any number of other indented markdown elements.

This is the second paragraph.

Text manipulation

Bold

Bold text written as **Bold text**

Italic

Italic text written as *Italic text*

Superscript

210 (written as 2^10^) is 1024.

Subscript

A2 and B2 (written as A~2~ and B~2~ )

H~2~O is water H~2~SO~4~ is an acid becomes:

H2O is water H2SO4 is an acid

Deleted and inserted text

~~Deleted Text~~ becomes: Deleted Text

++Inserted Text++ becomes: Inserted Text

Mark

==This text is marked== becomes: This text is marked

Smart symbols

Symbol code Symbol
(r) ®
(tm) ™
(c) ©
c/o ℅
1/4 ¼
1/5 ⅕
1st 1st
2nd 2nd
3rd 3rd
4th 4th
+/- ±
--> →
<-- ←
<--> ↔
=/= ≠

Chemical formula

2K+ + O2- written as 2K^+^ + O^2-^

½H2 + 0.5Cl2 written as 1/2H~2~ + 0.5Cl~2~

Custom span class

!!warning| This is a warning!! will look like This is a warning

Abbreviations

The HTML specification
is maintained by the W3C.

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

will be converted to

<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>

and will be rendered as (hover over HTML and W3C):

The HTML specification is maintained by the W3C.

Attribute Lists

An example attribute list might look like this:

{: #someid .someclass somekey='some value' }

Block element

Paragraph

To define attributes for a block level element, the attribute list should be defined on the last line of the block by itself.

This is a paragraph.
{: #an_id .a_class }

The above results in the following output:

<p id="an_id" class="a_class">This is a paragraph.</p>

Headers

The one exception is headers, as they are only ever allowed on one line.

A setext style header {: #setext}
=================================

### A hash style header ### {: #hash }

The above results in the following output:

<h1 id="setext">A setext style header</h1>
<h3 id="hash">A hash style header</h3>

Table cell

+-------+----------+-------------------------------+
| Title            | blabla                        |
+=======+==========+===============================+
| foo   | bar                                      |
|       | {: .warning title="setting attribute" }  |
+-------+------------------------------------------+

will be rendered as:

Title

blabla

foo

bar

Inline

To define attributes on inline elements, the attribute list should be defined immediately after the inline element with no white space.

[link](http://example.com){: class="foo bar" title="Some title!" }

The above results in the following output:

<p><a href="http://example.com" class="foo bar" title="Some title!">link</a></p>

Example Link

Progress bar

[=0% "0%"]
[=5% "5%"]
[=25% "25%"]
[=45% "45%"]
[=65% "65%"]
[=85% "85%"]
[=100% "100%"]

becomes:

0%

5%

25%

45%

65%

85%

100%

And the following:

[=0%]{: .thin}
[=5%]{: .thin}
[=25%]{: .thin}
[=45%]{: .thin}
[=65%]{: .thin}
[=85%]{: .thin}
[=100%]{: .thin}

becomes:

Link

[Link to neurobin.org](https://neurobin.org)

will become:

Link to neurobin.org

https://example.com will become a link: https://example.com

Wikilinks

[[wikilink]] is converted to:

<a href="wikilink" class="wikilink">wikilink</a>

[[/projects/softwares/unix/rnm]] would produce: rnm

[[/docs/web/using-git-to-manage-a-website]] would give you using git to manage a website

[[https://google.com]] would be rendered as google.com

Image

![Minitux Linux Mascot](https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png) will insert the image:

Minitux Linux Mascot

kbd tag

<kbd>Enter</kbd><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>Delete</kbd> will look like:

EnterCtrlAltDelete

Icons

We use fontawesome icons.

<i class="fa fa-info-circle"></i> will look like:

It can also be used by markdown:

&fa-html5; &fa-arrow-right; will look like:

Emojis

We are using Twitter Emoji with the same shorthand names supported by Github emoji and Emojione :sunglasses:

Example:

Emoji code Emoji
:smile: :smile:
:heart: :heart:
:thumbsup: :thumbsup:
:-1: :-1:
:+1: :+1:
:arrow_right: :arrow_right:

UML diagram

```plantuml format="png" classes="uml myDiagram" alt="My super diagram placeholder" title="My super diagram"
  Goofy -&gt;  MickeyMouse: calls
  Goofy &lt;-- MickeyMouse: responds
```

The above will produce:

My super diagram placeholder

Block diagram

blockdiag {
    A -> B -> C -> D;
    A -> E -> F -> G;
}

blockdiag {
    Hello -> World
}

The above will produce:

Info

Styling blockdiag

Include a gist or part of it

You can include a gist or any remote text file or part of it as markdown.

The following:

```cpp
{! https://raw.githubusercontent.com/jpcre2/jpcre2/release/src/jpcre2.hpp[ln:3506-3523] !}
```

will produce:

            return me.setRegexObject(getRegexObject())
                     .setSubject(getSubjectPointer())
                     .setFindAll((getPcre2Option() & PCRE2_SUBSTITUTE_GLOBAL)!=0)
                     .setMatchContext(getMatchContext())
                     .setMatchDataBlock(getMatchDataBlock())
                     .setStartOffset(getStartOffset())
                     .nreplace(true, getJpcre2Option(), last_replace_counter);
        }

        ///PCRE2 compatible replace function that takes a MatchEvaluator.
        ///String returned by callback function is processed by pcre2_substitute,
        ///thus all PCRE2 substitute options are supported by this replace function.
        ///
        ///It always performs a new match.
        ///@param me MatchEvaluator instance, (copied and modified according to this object).
        ///@return resultant string.
        ///@see replace()
        String replace(MatchEvaluator me){

  1. The first paragraph of the definition.

    Paragraph two of the definition.

    A blockquote with multiple lines.

    a code block

    A final paragraph. ↩

  2. A footnote on the label. ↩

  3. Dummy content. ↩