The Markdown Grimoire

 ·   ·  ☕ 15 min read  ·  ✍️ Abdul Alhazred
🏷️
This page looks best with JavaScript enabled

Transcribed from the crumbling vellum discovered beneath the shifting sands of Rub’ al Khali, 730 CE

Bound in a leather not quite animal, stained with the ink of bygone intellects, this manuscript was unearthed from the shattered ruins of a ziggurat whose shape defied Euclidean geometry. It is said that Abdul Alhazred, driven mad by revelations glimpsed beyond the veil of time, encoded forbidden truths in what modern scholars feebly call “Markdown.”

This grimoire is not mere reference — it is revelation. A cipher for structuring knowledge and shaping the very fabric of digital reality. Each symbol, each header and bullet point, calls upon hidden order — arcane patterns that whisper to the subconscious and gnaw at the fragile partition between comprehension and madness.

Use it not lightly. Glance too long at the triple backtick, and you may hear the chanting from behind the stars. Understand too deeply the nested list, and your dreams shall be stained with sigils and syntax you dare not reproduce.

Proceed, Initiate. The glyphs await.

Gathered from various sources, including The Markdown Guide, GitHub, and others.

Personal reference and for testing this site’s theme to ensure markdown is rendered correctly.

This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic syntax and extended syntax.

Basic Syntax

These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.

Paragraphs are separated by a blank line.

Emphasis is given with italic, bold, and monospace.

1
Emphasis is given with *italic*, **bold**, and `monospace`.

Headings

There are six heading levels (h1 -> h6).

To insert a heading, start a line with one or more hash (#) characters, followed by a space character and the heading label. The number of hash characters used will determine the heading level.

# h1
## h2
### h3
#### h4
##### h5
###### h6

Alternatively, a line of text may be converted to a level 1 heading by placing one or more equals (=) characters on the line beneath it. A level 2 heading can be created by using minus (-) characters instead.

h1
================

h2
----------------

Emphasis

This text will be italic
This will also be italic
This text will be bold
This will also be bold
This text will have a strikethrough it
You can sometimes combine them

1
2
3
4
5
6
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
~~This text will have a strikethrough it~~
_You **can ~~sometimes~~** combine them_

Block Quotation

Block quotes are
written like so.

They can span multiple paragraphs,
if you like.

> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.

Lists

Unordered list items use * or - at the start of the line, and are indented with two or more spaces to increase the level:

  • Item 1
  • Item 2
    • Item 2a
    • Item 2b
1
2
3
4
* Item 1
* Item 2
  * Item 2a
  * Item 2b

Ordered list items are preceded by one or more digits, followed by a . and a space (1. ). Numbering increases with each successive item at the same indent level. Items may be indented with two or more spaces. Increasing the indent level will restart number at the new level.

  1. First item
  2. Second item
    1. Item 2a
    2. Item 2b
      1. Item 2b.1
      2. Item 2b.2
  3. Third item

  1. Explicitly resumed previous numbering.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
1. First item
1. Second item
   1. Item 2a
   1. Item 2b
      1. Item 2b.1
      1. Item 2b.2
1. Third item

...

4. Explicitly resumed previous numbering.

Code

Inline code is wrapped with backticks `.

In C#, int is a built-in type alias for System.Int32.

1
In C#, `int` is a built-in type alias for `System.Int32`.

A “fenced” multi-line code block can be inserted by placing triple backticks ``` before and after the code block. The code language can be optionally set, which may influence syntax highlighting.

1
2
3
4
void DoSomethingCool()
{
    // put some cool code here ...
}
1
2
3
4
5
6
```c#
void DoSomethingCool()
{
    // put some cool code here ...
}
```

You can also simply indent your code by four spaces, however this method does not allow the language to be set and no syntax highlighting will be shown:

1
2
3
4
    void DoSomethingCool()
    {
      // put some cool code here ...
    }

To include a non-code formatted backtick, escape it with a \.

This is a backtick outside of code: `

1
This is a backtick outside of code: \`

To include a backtick in formatted code, wrap the character in a double-backtick.

This is a backtick in code: `

1
This is a backtick in code: `` ` ``

Horizontal Line

You can insert a line with ---

1
---

Any URL (like http://example.com/) will be automatically converted into a clickable link.

Inline

Use this format [title](https://www.example.com) to set the inline link title and address separately.

http://github.com - automatic!

Here is a relative link to the local readme file
An external link to the unity documentation
A link to the top of this document (section header)

1
2
3
4
5
http://github.com - automatic!

Here is a relative link to the local [readme](readme.md) file
An an external link to the [unity documentation](https://unity3d.com/)
An link to [the top](#root) of this document (section header)

Reference

Place link definitions anywhere in your Markdown document, such as immediately after the paragraph in which they’re used, or together at the end of the document, sort of like footnotes.

The optional title attribute must be enclosed in single quotes, double quotes, or parentheses, and it may be placed on the next line, which tends to look better with longer URLs:

1
2
3
4
5
6
[id]:     http://example.com/  'Optional Title Here'

[google]: http://google.com/ "Google"

[c64]:    https://en.wikipedia.org/wiki/Commodore_64
          (Commodore 64)

Reference the link using the double or single set of square brackets. The reference label is case-insensitive and multiple links can reference the same definition.

Did you search for that already?

The Commodore 64 is the best selling single computer model of all time.
I 💗 my C64.

1
2
3
4
Did you [search][google] for that already?

The [Commodore 64][c64] is the best selling single computer model of all time.
I :heartpulse: my [C64].

Image

Images may be inserted using the following markdown syntax.

![alt text](/path/to/image.png "MouseOver tooltip text")

The “alt text” is used by screen readers and rendered when the image fails to load. The tooltip text following the image address is optional and will only appear when the mouse cursor hovers over the image.

random photo

1
![random photo](https://loremflickr.com/320/240 "An image!")

Nesting

You can nest items in a list …

  1. First, get these ingredients:

    • carrots
    • celery
    • lentils
  2. Boil some water.

  3. Dump everything in the pot and follow
    this algorithm:

    find wooden spoon
    uncover pot
    stir
    cover pot
    balance wooden spoon precariously on pot handle
    wait 10 minutes
    goto first step (or shut off burner when done)
    

    Do not bump wooden spoon or it will fall.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
1. First, get these ingredients:

    * carrots
    * celery
    * lentils

2. Boil some water.

3. Dump everything in the pot and follow
   this algorithm:

       find wooden spoon
       uncover pot
       stir
       cover pot
       balance wooden spoon precariously on pot handle
       wait 10 minutes
       goto first step (or shut off burner when done)

   Do not bump wooden spoon or it will fall.

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Table

A table consists of one or more columns and rows, as well as a required header row.

Use pipes (|) to separate columns and three or more hyphens (---) to separate the header row from all other rows. For compatibility, a pipe should also be used at the beginning and end of each row.

Column 1 HeaderColumn 2 Header
Column 1 Row 1Column 2 Row 1
Column 1 Row 2Column 2 Row 2
1
2
3
4
| Column 1 Header | Column 2 Header |
| --------------- | --------------- |
| Column 1 Row 1  | Column 2 Row 1  |
| Column 1 Row 2  | Column 2 Row 2  |

Nested in a Blockquote

Custom CSS on this site allows table markdown to be used inside a blockquote by wrapping the markup with a div.table-wrapper.

1
2
3
4
5
6
7
<div class="table-wrapper">

> | Column 1 Header | Column 2 Header |
> | --------------- | --------------- |
> | Column 1 Row 1  | Column 2 Row 1  |
> | Column 1 Row 2  | Column 2 Row 2  |
</div>

Hiding Header Rows

While table header rows are required, they may also be hidden by wrapping the markdown with a div.table-wrapper.no-header.

Column 1 HeaderColumn 2 Header
Column 1 Row 1Column 2 Row 1
Column 1 Row 2Column 2 Row 2
Column 1 HeaderColumn 2 Header
Column 1 Row 1Column 2 Row 1
Column 1 Row 2Column 2 Row 2
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="table-wrapper no-header">

> | Column 1 Header | Column 2 Header |
> | --------------- | --------------- |
> | Column 1 Row 1  | Column 2 Row 1  |
> | Column 1 Row 2  | Column 2 Row 2  |
</div>

<div class="table-wrapper no-header">

| Column 1 Header | Column 2 Header |
| --------------- | --------------- |
| Column 1 Row 1  | Column 2 Row 1  |
| Column 1 Row 2  | Column 2 Row 2  |
</div>

Aligning Cell Data

Header and cell data can be aligned to the left, right, or center of a the column by inserting colons between hyphens and pipes on the header separator line.

  • |:--- | Left align with the colon prefix
  • | ---:| Right align with the colon suffix
  • |:---:| Center the data with prefix and suffix colon.
Header1Header2Header3
Left-aligned textRight-aligned textCentered text
column 1column 2column 3
1
2
3
4
| Header1           | Header2            | Header3       |
| :---------------- | -----------------: | :-----------: |
| Left-aligned text | Right-aligned text | Centered text |
| column 1          | column 2           | column 3      |

Emoji

🙈 🙉 🙊

1
:see_no_evil: :hear_no_evil: :speak_no_evil:

The Emoji cheat sheet is a useful reference for emoji shorthand codes.

The emojify function can be called directly in templates or Inline Shortcodes.


N.B. The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.

1
2
3
4
.emoji {
  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji,
               Segoe UI Symbol, Android Emoji, EmojiSymbols;
}

Footnote

Like reference links links, footnote definitions can be placed anywhere in the document, however the id must be prefixed with a caret (^).

The footnotes may include multiple paragraphs and other markdown. Simply indent the lines following the definition to include them.

Footnotes are enumerated in the order they are referenced, so the definition order does not matter. Footnotes that are defined, but not referenced are ignored.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
[^first]: This is the first defined footnote.
[^second]: This is the second defined footnote.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

[^third]: This is the third defined footnote will be unused.

Elsewhere in the document, the footnote may be referenced using the same id.

Reference the second defined footnote. 1
Reference the first defined footnote. 2

1
2
Reference the second defined footnote. [^second]
Reference the first defined footnote. [^first]

At the end of the document, the footnotes will appear in the order in which they are referenced:

1. This is the second defined footnote.

   Indent paragraphs to include them in the footnote.

   { my code }

   Add as many paragraphs as you like. ↩︎
2. This is the first defined footnote. ↩︎

Heading ID

A custom id and class can be added to headers.

My Great Heading

1
#### My Great Heading {#custom-id .custom-class}

Definition List

To create a definition list, type the term on the first line. On the next line, type a colon followed by a space and the definition.

First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.
1
2
3
4
5
6
First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

Task List

  • links, formatting, and tags supported
  • list syntax required (any unordered or ordered list supported)
  • this is a complete item
  • this is an incomplete item

Styled HTML Tags

Use HTML for other Elements — abbr, sub, sup, kbd, mark.

abbr

GIF is a bitmap image format.

1
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

sub

H2O

1
H<sub>2</sub>O

sup

Xn + Yn: Zn

1
X<sup>n</sup> + Y<sup>n</sup>: Z<sup>n</sup>

kbd

The kbd sigil, when invoked alone, manifests as an individual rune — styled to resemble a single physical key upon an unseen altar.

When crafting more elaborate command sequences — chords requiring multiple glyphs pressed in unison — the entire incantation must be bound within a protective span bearing the .kbd-combo ward. This binding ensures the invocation remains whole, resisting fracture across the mortal line breaks of HTML rendering.

Press Enter when finished.
Press CTRL+ALT+DEL to access Task Manager.

1
2
Press <kbd>Enter</kbd> when finished.
Press <span class="kbd-combo"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>DEL</kbd></span> to access Task Manager.


This collection of curiosities conjures such sequences using a custom Hugo shortcode, forged within this grimoire’s hidden depths. Multi-key bindings are thus transmuted into single, unbroken sigils — glyphs held fast, meanings preserved.

Press Ctrl+H for help … while you can.

1
Press {{< kbd CONTROL H >}} for help ... while you can.

The method behind this invocation remains veiled, for now. Yet should you find yourself drawn to its construction, feel free to whisper your request into the æther… and, perhaps, its wretched designs will be revealed.

By default, parameters are transmuted into Title Case (tab → Tab), though certain glyphs demand alternate renderings to remain stable across readings.

print and PrintScreen -> Print
caps and CapsLock -> CapsLk
num= and NUM = -> Num =
DOWN and downArrow ->

Some glyphs cannot be summoned by name alone. Non-alphanumeric sigils — runes slippery and untamed — must be bound within quotations to prevent misinterpretation by the binding engine. Without this warding, they scatter or backfire, refusing to take proper form

"#" -> #
`&` -> &
`"` -> "
"`" -> `

Duplicate runes are cast out. Modifier glyphs — those persistent signal-bearers like Control, Shift, and their kin — are reordered according to the conventions of the dominant realms.

The Apple codices prescribe a strict invocation order; the Microsoft branch is more forgiving, their glyphs prone to shuffling. This Grimoire aligns with the Unity Doctrine, wherein sequence determines clarity, not chaos.

  • Ctrl Alt Shift Win
  • Ctrl Opt Shift Cmd

Control, Alt, Option, Shift, Windows, Command, Fn, AltGr

Ctrl+Opt+Shift+Cmd+Fn+K

Ctrl+Alt+Shift+Win+Fn+K
Ctrl+Alt+Shift+Win+Fn+AltGr+K

1
2
{{< kbd K OPTION CONTROL FUNCTION COMMAND SHIFT >}}
{{< kbd K ALT WIN ALTGR CONTROL FUNCTION SHIFT >}}

The following are recognized glyphs — names and symbols accepted by the binding engine and rendered as individual keys. These may represent physical keys from across the known layouts: alphanumerics, function keys, navigation clusters, numpads, and beyond. Their inclusion ensures faithful rendering when summoned via the kbd shortcode.

Use them precisely. The engine tolerates no ambiguity.

Esc F1 F2 F3 F4 F5 F6 F7 F8 F9­ F10­ F11­ F12
` 1 2 3 4 5 6 7 8 9 0 = BkSp
Tab Q W E R T Y U I O P [ ] \
CapsLk A S D F G H J K L ; ' Return
LShift Z X C V B N M , . / RShift
LCtrl LWin LAlt Space RAlt RWin­ Menu­ RCtrl

NumLk Num / Num * Num -
Num 7 Num 8 Num 9 Num +
Num 4 Num 5 Num 6 Num =
Num 1 Num 2 Num 3
Num 0 Num . Enter

~ ! @ # $ % ^ & * ( )­ _ + { } | : " < > ?
Ins Home PgUp Del End PgDn­ Print ScrLk Pause SysReq Break
Fn LCmd RCmd LOpt­ ROpt Clear AltGr Help

tokenkey
esc escapeCtrl+Esc
esc escapeCtrl+Esc
esc escape
esc escapeÄ
esc escapeÖ
esc escapeÜ
esc escapeß
esc escape§
esc escapeµ
esc escape²
esc escape³

mark

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.


  1. This is the second defined footnote.

    Indent paragraphs to include them in the footnote.

    { my code }

    Add as many paragraphs as you like. ↩︎

  2. This is the first defined footnote. ↩︎

End of Line.