The Markdown Grimoire

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

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 {#custom-id .custom-class}

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.

sub

H2O

sup

Xn + Yn: Zn

kbd

The standard kbd HTML tag is styled to look like a key. For combo commands, wrap the full command set in a kbd with the .combo class so that it will be styled as a set won’t wrap.

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 site has a shortcode for simplifying keyboard key combos, which accepts one or more parameters. Parameters with non-alphanumeric args must be quoted, for example:

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

Parameters are converted to title case (tab -> Tab), however some may be formatted for consistent output, such as:

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

When more than one parameter is provided, the combination is linked and will not wrap.

Press ctrl+alt+del to access Task Manager.

1
Press {{​< kbd CONTROL ALT DELETE >}} to access Task Manager.

Escf1f2f3f4f5f6f7f8f9­f10­f11­f12
`1234567890=BkSp
tabqwertyuiop[]\
CapsLkasdfghjkl;'return
LShiftzxcvbnm,./RShift
LCtrlLWinLAltspaceRAltRWin­menu­RCtrl

NumLkNum /Num *Num −
Num 7Num 8Num 9Num +
Num 4Num 5Num 6Num =
Num 1Num 2Num 3
Num 0Num .enter

~!@#$%^&*()­_+{}|:"<>?
InshomePgUpDelendPgDn­PrtScScrLkpauseSysReqbreak
FnLCmdRCmdLOpt­ROptclearAltGrhelp

Duplicate keys are removed and recognized modifier keys are sorted for consistency. Apple has explicit guidelines on the modifier order, however things are a little more flexible in Windows. This is the order used by Unity shortcuts, so that’s what I’m going with.

CtrlaltshiftWin
CtrlOptshiftCmd

Control, Alt, Option, Shift, Windows, Command, Fn
Ctrl+Opt+Cmd+Fn+k+shift
Ctrl+Fn+alt+k+win+shift

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

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.