Kramdown Cheatsheet

22 July 2021 - 6 mins read time
Tags: Markdown Kramdown GitHub Pages

Only two markdown processors are supported by GitHub pages with jekyll, here we follow the kramdown syntax to create our markdown files. In this note, a few essential contents for creating document will be listed for reference.

Inline formatting

Italics *Italics* or _Italics_
Bold **Bold** or __Bold__
Inline code `Inline code`
Inline code <code>Inline code</code>
*Escaping* \*Escaping\*
Strikethrough <del>Strikethrough</del>
– (en-dash) --
— (em-dash) ---
… (ellipsis) ...
«guillemet» << and >>
:lollipop: :+1: (emojis) :lollipop: :+1:
ESC <kbd>ESC</kbd> (this is pure html)

Generally, markdown doesn’t support text color. The most common workaround is using html.

Here you go: <font color='red'>Text in red</font>

Here you go: Text in red

Another way is using $\LaTeX$ syntax, for example

Here you go: $\color{red}{\text{Text in red}}$

Here you go: $\color{red}{\text{Text in red}}$

⚠️: this doesn’t work for Kramdown \text{\color{red}Text in red}

Paragraph formatting and sectioning

Level 1 header # header {#id}
header with = underline
Level 2 header ## header {#id}
header with - underline
Level 3 header ### header {#id}
Level 4 header #### header {#id}
Block quote > this is a quote
Line break This is a\\
line break
Horizontal rule * * * or ---
Code paragraph Start with four blank indentation.
Delimit with ~~~ or ```
Delimit with ~~~language or ```language for color syntax
Unordered list Items with * or - or +
Ordered list Number and a dot
Definition list Normal paragraph followed by : and space
HTML HTML blocks are accepted
Footnotes [^label] and [^label]: text at the end
Abbreviations *[label]: description at the end
Task lists - [ ] Incomplete - [x] Complete 
Visit [kramdown](https://kramdown.gettalong.org/index.html) for more details in its syntax

Visit kramdown for more details in its syntax

[kramdown][k1] is a Ruby solution of pages generator Reference: [k1]: https://kramdown.gettalong.org/index.html

Images

![title](/assets/img/404.png "title"){:height="100px" width="100px"}

title

Code block

This could be used to demonstrate the source code, for example, Python or bash

    ```python
    import numpy as np

    arr = np.linspace(1, 10, num = 100)
    print(arr)
    ```

  import numpy as np

  arr = np.linspace(1, 10, num = 100)
  print(arr)

    ```bash
    $ sudo add-apt-repository ppa:deadsnakes/ppa
    $ sudo apt update
    $ apt list | grep python3.11
    ```

  $ sudo add-apt-repository ppa:deadsnakes/ppa
  $ sudo apt update
  $ apt list | grep python3.11

There are also the other features supported by similar way, such like mermaid:

    ```mermaid
    flowchart  LR;
    Start-->|scenario,area| M1[Model I] 
    M1-->F1{feasible?}
    F1-->|no| End
    F1-->|yes| M2[Model II]
    M2-->M3[Model III]
    M3-->Complete
    ```

flowchart  LR;
Start-->|scenario,area| M1[Model I] 
M1-->F1{feasible?}
F1-->|no| End
F1-->|yes| M2[Model II]
M2-->M3[Model III]
M3-->Complete

Table

Demonstration of markdown table

|-------------+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----|
| time_bucket |  -3 |  -2 |  -1 |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |
|------------:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|   wafer_out | N/A | N/A | N/A | 100 | 100 | 100 | 150 | 150 | 200 | 200 | 200 | 200 |
|        MTTS |  3  |  3  |  3  |  3  |  3  |  3  |  3  |  3  |  3  |  3  |  3  |  3  |
| wafer_start | 100 | 100 | 100 | 150 | 150 | 200 | 200 | 200 | 200 | N/A | N/A | N/A |

| time_bucket | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | |————:|:—:|:—:|:—:|:—:|:—:|:—:|:—:|:—:|:—:|:—:|:—:|:—:| | wafer_out | N/A | N/A | N/A | 100 | 100 | 100 | 150 | 150 | 200 | 200 | 200 | 200 | | MTTS | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | | wafer_start | 100 | 100 | 100 | 150 | 150 | 200 | 200 | 200 | 200 | N/A | N/A | N/A |

Math

in-line mode

Assume line yield rate $\gamma$ is given

Assume line yield rate $\gamma$ is given

display mode

The total amount $y$ will be
$$
\sum^n_{i=1} x_i
$$

The total amount $y$ will be \(\sum^n_{i=1} x_i\)

Plaintext code block

plaintext won’t really disable all syntax highlight for your code block.
Basically, we apply code block with nohighlight to wrap docstrings for package/module document

>### package.module.class.method()
```nohighlight 
        Args:
            path (str): path to the target file
            cache_mode (bool, optional): allows cache or not(default True)
        Return:
            Dict                                
```

package.module.class.method()

        Args:
            path (str): path to the target file
            cache_mode (bool, optional): allows cache or not(default True)
        Return:
            Dict

Collapsible Code Blocks

{::options parse_block_html="true" /}

<details><summary markdown="span">Let's see some code!</summary>
```python
print('Hello World!')
```
Of course, it has to be Hello World, right?
</details>
<br/>

{::options parse_block_html="false" /}
Let’s see some code! 
print('Hello World!')

Of course, it has to be Hello World, right?


Include a set of backticks within a code block

Here is how you create the markdown tutorials which points out the usage of code blocks :-)

````
```python
import logging
import json
```
````