This is a cheatsheet of formatting with Markdown(Kramdown), HTML and Liquid for Jekyll theme Minimal Mistakes (with plugins and my own customisations).

Basic Markdown Syntax

Headings

H1

H2

H3

H4

H5
H6
1
2
3
4
5
6

# H1
## H2
### H3
#### H4
##### H5
###### H6

Paragraphs and Line Breaks

Two spaces after a line here
or a backslash
or a <br> tag
can make line breaks in a paragraph

An empty line can also make a line break but with a new paragraph. -» «-Typing only one new line can only create a space.

1
2
3
4
5
6
7

Two spaces after a line here  
or a backslash\
or a \<br\> tag <br>
can make line breaks in a paragraph

An empty line can also make a line break but with a new paragraph. ->>
<<-Typing only one new line can only create a space.

Emphasis

Bold and Italic

Strong1
Strong2
strong3
Italic1
Italic2
italic3
Combination
**_Escape with Backslash_**

1
2
3
4
5
6
7
8

**Strong1**   
__Strong2__  
<strong>strong3</strong>  
*Italic1*  
_Italic2_  
<em>italic3</em>  
__*Combination*__  
***\*\*\_Escape with Backslash\_\*\****

Underline

Underline is not supported by kramdown.
Use HTML instead.
HTML and Markdown can be mixed.

1
2
3

**<ins>Underline is not supported by
kramdown.<br>Use HTML instead.  
*HTML and Markdown can be mixed.*</ins>**

Horizontal Rules

above it

below it

1
2
3
4
5

above it

---

below it

Blockquotes

Markdown is a lightweight markup language for creating formatted text using a plain-text editor.
This is a new line after two spaces.

John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form.

Markdown is widely used in blogging, instant messaging, online forums, collaborative software, documentation pages, and readme files.

Blockquotes can contain other elements like lists and headings.

1
2
3
4
5
6
7
8

>Markdown is a lightweight markup language for creating formatted text using a plain-text editor.  
>This is a new line after two spaces.
>
>John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form.
>
>>Markdown is widely used in blogging, instant messaging, online forums, collaborative software, documentation pages, and readme files. 

> Blockquotes can contain other elements like lists and headings.

Lists

Unordered

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
      • can also use *
      • or +
  • Item 3
1
2
3
4
5
6
7

- Item 1
- Item 2
   - Item 2.1
   - Item 2.2
      - can also use *
      - or +
- Item 3

Ordered

  1. Item 1
  2. Item 2
    1. Item 2.1
    2. Item 2.2
  3. Item 3
    • can be combined
    • ABC
1
2
3
4
5
6
7

1. Item 1
2. Item 2
   1. Item 2.1
   2. Item 2.2
3. Item 3
   - can be combined
   - ABC

Many other elements including images can also be nested into lists with proper indentation.

Code

Inline Code

Inline code can be used with backticks.

If we want to denote backticks ` as code,
escaping `backticks` in double ones

1
2
3
4

`Inline code` can be used with backticks.

If we want to denote backticks \` as code,  
``escaping `backticks` `` in double ones

Code Blocks

1
2
3
4
5
6
7

package main

import "fmt"

func main() {
	fmt.Println("Hello, 世界")
}

1
2
3
4
5
6
7
8
9

```go
package main

import "fmt"

func main() {
	fmt.Println("Hello, 世界")
}
``` 

This table shows characters you can escape in Markdown.

With title (hover): Arch Linux.

This anchor link is pointing to the heading with custom-id1.

1
2
3
4
5

This table shows [characters you can escape](https://www.markdownguide.org/basic-syntax/) in Markdown.

With title (hover): [Arch Linux](https://wiki.archlinux.org/title/arch_is_the_best "Arch is the best!").

This [anchor link](#custom-id1) is pointing to the heading with custom-id above.

Images

Image with hover title (optional)
Alt text (optional) will be shown when the image can’t be loaded.

Tux pic

1

![Alt text](https://mdg.imgix.net/assets/images/tux.png?auto=format&fit=clip&q=40&w=100 "My name is Tux")

Add a link to the image by wrapping image within syntax for links.

1

[![](/assets/images/avatar.png)](https://www.hansenh.com)

Use HTML to add images with resizing.

og_image

1

<img src="/assets/images/page-header-og-image.png" width="280px" alt="og_image">

Extended Markdown Syntax

Tables

Left Center Right
cell1 cell2 cell3
cell4 cell5 cell6
link   
1
2
3
4
5

| Left    | Center  | Right   |
|:--------|:-------:|--------:|
| *cell1* | cell2   | **cell3** |
| cell4   | `cell5` | cell6   |
| [link](#) | ![](/favicon.ico) | |

Footnotes

Here’s a simple footnote1, and here’s a longer one2. Click superscript numbers to see the effects.

1
2
3
4
5
6
7
8
9
10
11
12

Here's a simple footnote[^1], and here's a longer one[^somenotes]. Click superscript numbers to see the effects.

[^1]: This is a footnote with number identifier.

[^somenotes]: This is a footnote with text identifier.
    
    Indent paragraphs to include them in the footnote.  
    ```py
    print('try different elements')
    ```
    ![](/favicon.ico)  
    Add a pic in the footnote.

Abbreviations

The SMTP is a communication protocol for email transmission.

1

*[SMTP]: Simple Mail Transfer Protocol.

Definition Lists

term
definition
another definition
another term
and another term
and a definition for the term

Be careful about the indentation.

1
2
3
4
5
6
7
8

term
: definition
: another definition

another term
and another term
: and a definition for the term
  > Be careful about the indentation.

Strikethrough

Strikethrough1
Strikethrough2

1
2

~~Strikethrough1~~  
<del>Strikethrough2<del>

Task Lists

  • Task one is done.
  • Task two is undergoing.
  • Stay awesome!
1
2
3

- [x] Task one is done.
- [ ] Task two is undergoing.
- [ ] Stay awesome!

Comments

1

[This is a comment that will be totally skipped.]: #

Other Useful HTML solutions

Highlight

I need to highlight these very important words.

1

I need to highlight these <mark>very important words</mark>.

Subscript

H2O

1

H<sub>2</sub>O

Superscript

X2

1

X<sup>2</sup>

Indent

    This is an indented paragraph. This is an indented paragraph. This is an indented paragraph. This is an indented paragraph.

1

&nbsp;&nbsp;&nbsp;&nbsp;This is an indented paragraph. This is an indented paragraph. This is an indented paragraph. This is an indented paragraph.

Collapsible Sections

Toggle hidden text


This is a collapsible paragraph.

1
2
3
4

{
  "key": "value",
  "foo": "bar"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<details>
<summary>
Toggle hidden text
{: style="display: inline;"}
</summary>
<br>{: style="display: inline;"}

This is a *collapsible paragraph*.
```json
{
  "key": "value",
  "foo": "bar"
}
``` 
</details>

To make it work for Kramdown, Add following settings in _config.yml to defaultly turn on markdown parsing for block-level HTML tags.

1
2

kramdown:
  parse_block_html: true

Font Awesome Icons


Add fa-fw for fixed width: 

1
2

<i class="fab fa-docker"></i><i class="fas fa-cubes"></i><i class="fab fa-python"></i>  
Add `fa-fw` for fixed width: <i class="fas fa-fw fa-database"></i><i class="fas fa-fw fa-server"></i><i class="fab fa-fw fa-js-square"></i>

Embeded Gist Code

1

<script src="https://gist.github.com/HansenH/3de3c5d79ef97e814a32609beb96658f.js"></script>

Kramdown Features

Kramdown uses IAL tags like {: .class-name} or {: style="color: red;"} to apply CSS and some HTML attributes to Markdown elements.

Kramdown also uses ALD tags like {:refdef: .c1 #id .c2 title="title"} to create references. ALD can be referred in IAL. For example: {: refdef .c3 title="t" #para}

Notices

Notice! This paragraph of text has been emphasized with the {: .notice} class.

Primary! This paragraph of text has been emphasized with the {: .notice--primary} class.

Info! This paragraph of text has been emphasized with the {: .notice--info} class.

Warning! This paragraph of text has been emphasized with the {: .notice--warning} class.

Success! This paragraph of text has been emphasized with the {: .notice--success} class.

Danger! This paragraph of text has been emphasized with the {: .notice--danger} class.

This is an HTML notice solution for more markdown elements

Add following settings in _config.yml to defaultly turn on markdown parsing for block-level HTML tags.

1
2

kramdown:
  parse_block_html: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

**Notice!** This paragraph of text has been emphasized with the `{: .notice}` class.
{: .notice}

**Primary!** This paragraph of text has been emphasized with the `{: .notice--primary}` class.
{: .notice--primary}

**Info!** This paragraph of text has been emphasized with the `{: .notice--info}` class.
{: .notice--info}

**Warning!** This paragraph of text has been emphasized with the `{: .notice--warning}` class.
{: .notice--warning}

**Success!** This paragraph of text has been emphasized with the `{: .notice--success}` class.
{: .notice--success}

**Danger!** This paragraph of text has been emphasized with the `{: .notice--danger}` class.
{: .notice--danger}

<div class="notice--info">

**This is an HTML notice solution for more markdown elements**

Add following settings in `_config.yml` to defaultly turn on markdown parsing for block-level HTML tags.
```yml
kramdown:
  parse_block_html: true
``` 
</div>

Title Attributes

Hover to see title

1
2

> Hover to see title
{: title="This is a blockquote"}

ID and Anchors

Heading with auto-generated ID

Heading with custom-id1 using Kramdown tag

Heading with custom-id2 using HTML

Heading without an ID

1
2
3
4
5
6
7
8

#### Heading with auto-generated ID

#### Heading with custom-id1 using Kramdown tag
{: #custom-id1}

<h4 id="custom-id2">Heading with custom-id2 using HTML</h4>

<h4>Heading without an ID</h4>

Color

This is aqua by Span IAL.

This whole parapraph is purple by Block IAL

1
2
3
4

This is *aqua*{: style="color: aqua"} by Span IAL.

This whole parapraph is purple by Block IAL
{: style="color: purple"}

This link opens a a new tab.

1

This [link](/){: target="_blank"} opens a a new tab.

Image Alignment

image-left

The image above is left-aligned. The image above is left-aligned. The image above is left-aligned. The image above is left-aligned. The image above is left-aligned.

image-right

The image above is right-aligned. The image above is right-aligned. The image above is right-aligned. The image above is right-aligned. The image above is right-aligned.

image-center

The image above is centered, with 60px width.

no-alignment

This image does not set any alignment. And large image will not overflow the content area.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

![image-left](/assets/images/avatar.png){: .align-left}

The image above is **left-aligned**. The image above is **left-aligned**. The image above is **left-aligned**. The image above is **left-aligned**. The image above is **left-aligned**.

![image-right](/assets/images/avatar.png){: .align-right}

The image above is **right-aligned**. The image above is **right-aligned**. The image above is **right-aligned**. The image above is **right-aligned**. The image above is **right-aligned**.

![image-center](/assets/images/avatar.png){: .align-center style="width: 60px;"}

The image above is **centered**, with 60px width.

![no-alignment](/assets/images/header_space.webp)

This image does not set any alignment. And large image will not overflow the content area.

Text Alignment

Left-aligned text.

Center-aligned text.

Right-aligned text.

Justified text.

1
2
3
4
5
6
7
8
9
10
11

Left-aligned text.
{: style="text-align: left;"}  

Center-aligned text.
{: style="text-align: center;"}

Right-aligned text.
{: style="text-align: right;"}

Justified text.
{: style="text-align: justify;"}

Font

text with specified font

1
2

text with specified font
{: style="font-size: 2em; font-family: 'Courier New'; color: #e815ee;"}

Buttons

Default Primary Success Warning Danger Info Inverse Light-Outline

Small Default Large X-Large

1
2
3
4
5
6
7
8
9
10
11
12
13

[Default](#buttons){: .btn}
[Primary](#buttons){: .btn .btn--primary}
[Success](#buttons){: .btn .btn--success}
[Warning](#buttons){: .btn .btn--warning}
[Danger](#buttons){: .btn .btn--danger}
[Info](#buttons){: .btn .btn--info}
[Inverse](#buttons){: .btn .btn--inverse}
[Light-Outline](#buttons){: .btn .btn--light-outline}

[Small](#buttons){: .btn .btn--info .btn--small}
[Default](#buttons){: .btn .btn--info }
[Large](#buttons){: .btn .btn--info .btn--large}
[X-Large](#buttons){: .btn .btn--info .btn--x-large}

Comments in HTML

You can find a comment below in HTML page source code. 

1
2
3
4

You can find a comment below in HTML page source code.
{::comment}
This is a comment.
{:/comment}

nomarkdown

Markdown can be escaped inline **LIKE THIS**!

1

Markdown can be escaped inline {::nomarkdown}**LIKE THIS**{:/}!

Liquid

Liquid is an open-source template language.
It uses a combination of objects, tags, and filters inside template files to display dynamic content.

Embeded Gist Code with filename

Plugin jekyll-gist is required

{% gist 3de3c5d79ef97e814a32609beb96658f %} is equivalent to

1

<script src="https://gist.github.com/HansenH/3de3c5d79ef97e814a32609beb96658f.js"></script>

with the same output, where all files of the Gist will be displayed.

To specify a certain file:

1

{% gist 3de3c5d79ef97e814a32609beb96658f auto-render.html %}

image-gallery.html is required for this no-plugin solution.

1

{% include image-gallery.html folder="/assets/images/exampleAlbum" %}

image-gallery-index.html is required for this no-plugin solution.

Example Album Link to Homepage 

1

{% if page.galleries %}{% include image-gallery-index.html %}{% endif %}

And add the following configs to the Front Matter in the page:

1
2
3
4
5
6
7
8
9

---
galleries:
  - title: Example Album
    image: /assets/images/exampleAlbum/example2.jpg
    url: "#image-gallery"
  - title: Link to Homepage
    image: /assets/images/exampleAlbum/example7.jpg
    url: /
---

Maths Expressions with KaTeX

To enable $\KaTeX$, the following HTML is included in the head of the page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false,
          trust: true
        });
    });
</script>

Also add following settings in _config.yml

1
2

kramdown:
  math_engine: katex

Supported TeX Syntax: https://katex.org/docs/supported.html

Inline: $f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$

Display Mode:

\[\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }\] \[\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)\] 
1
2
3
4
5
6
7

Inline: $f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$

Display Mode:

$$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

  1. This is a footnote with number identifier. ↩

  2. This is a footnote with text identifier.

    Indent paragraphs to include them in the footnote.

    1

    print('try different elements')


    Add a pic in the footnote. ↩


Creative Commons License Licensed under CC BY-SA 4.0

Comments