Freedom

Markdown Syntax

·   2 min ·   Gautham Chettiar
Table Of Contents

A comprehensive guide to markdown syntax supported by Hugo. Each element works out-of-the-box for both dark and light mode. Feel free to switch using [ / ] icon at the top to test how each element looks.

Headings #

Headings are created using # prefixes, with the number of hashes corresponding to the heading level (HTML <h1> through <h6>).

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

… which is rendered as:

Heading 1 #

Heading 2 #

Heading 3 #

Heading 4 #

Heading 5 #
Heading 6 #

Text Formatting #

Inline Styles #

SyntaxRendering
**bold**line with bold element
*italic*line with italic element
`code`line with code element
~~deleted~~line with deleted element
++added++line with added element
==mark==line with mark element
Sub~script~line with Subscript element
Super^script^line with Superscript element

Line Spacing #

New Paragraph: Leave a blank line between two lines:

Paragraph 1

Paragraph 2

… which is rendered as:

Paragraph 1

Paragraph 2

Line Break: Add 2 spaces at the end of a line:

Paragraph 1  
Still Paragraph 1

… which is rendered as:

Paragraph 1
Still Paragraph 1

Clickable URL:
Syntax : https://example.com
Rendering : https://example.com
Non-clickable (code):
Syntax : `https://example.com`
Rendering : https://example.com
External link:
Syntax : [example](https://example.com)
Rendering : example
Internal link:
Syntax : [Markdown Syntax](/usage/markdown_syntax/)
Rendering : Markdown Syntax
Anchor link:
Syntax : [Markdown Syntax | Links](/usage/markdown_syntax#links)
Rendering : Markdown Syntax | Links

Footnotes #

Footnote reference:
Syntax : [^1] & [^1]: Sample footnote message.
Rendering : 1

Lists #

Ordered Lists #

1. Ordered List Item 1
2. Ordered List Item 2
3. Ordered List Item 3
   1. Ordered Sub-List Item 1

… which is rendered as:

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
    1. Ordered Sub-List Item 1

Unordered Lists #

- Unordered List Item 1
- Unordered List Item 2
- Unordered List Item 3
  - Unordered Sub-List Item 1

… which is rendered as:

Task Lists #

- [X] Checked Task
- [ ] Unchecked Task

… which is rendered as:

Definition Lists #

Term
: Definition 1
: Definition 2

… which is rendered as:

Term
Definition 1
Definition 2

Blockquotes #

A blockquote is created by starting a line with >:

> This is a blockquote.

… which is rendered as:

This is a blockquote.

For extra blockquote features like alert, citations, and more, check out Markdown Extras | Blockquotes.

Images #

Images can be added using the syntax:

![alt text](path/to/image.jpg)

… which is rendered as:

pexels-veeterzy-38136

Horizontal Rule #

You can use asterisks (***), dashes (---), or underscores (___) to create a horizontal line:


Tables #

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

… which is rendered as:

SyntaxDescription
HeaderThis is description of header
ParagraphThis is description of Paragraph

Code Blocks #

Plain Code Block #

Surround code with triple backticks:

```
| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |
```

Syntax-Highlighted Code Block #

Add the language name after the opening backticks:

```json
{
    "syntax": "Header",
    "description": "Title"
}
```

… which is rendered as:

json
{
    "syntax": "Header",
    "description": "Title"
}

For extra codeblock features like enabling disabling lang and code labels, check out Markdown Extras | Codeblock.


  1. Sample footnote message. ↩︎