+++
title = 'Markdown Cheatsheet'
description = 'A quick reference and showcase of the markdown syntax used in Hugo and Congo'
date = 2025-02-27T07:15:18-05:00
draft = false
categories = ['references']
tags = ['hugo', 'markdown']
+++

{{< lead >}}
This cheatsheet is intended as a quick reference and showcase of the markdown syntax used in Hugo and Congo.
{{< /lead >}}
The majority of these markdown examples are copied from [QOwnNotes](https://www.qownnotes.org/), [Hugo](https://gohugo.io/) and [Congo](https://jpanther.github.io/congo)

## Headers

```markdown
# H1
## H2
### H3
#### H4
##### H5
###### H6
```

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

## Underline
```markdown
<ins>Underlined</ins>
```
<ins>Underlined</ins>



## Emphasis

```markdown
Emphasis, aka italics, with *asterisks*.

Strong emphasis, aka bold, with **asterisks**.
```

Emphasis, aka italics, with *asterisks*.

Strong emphasis, aka bold, with **asterisks**.


## Lists
```markdown
### Ordered List

1. First item
2. Second item
3. Third item

### Unordered List

- List item
- Another item
- And another item

### Nested list

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese
```


### Ordered List

1. First item
2. Second item
3. Third item

### Unordered List

- List item
- Another item
- And another item

### Nested list

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese


## Links

There are two ways to create links.

```markdown
[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[You can use numbers for reference-style link definitions][1]

URLs and URLs in angle brackets will automatically get turned into links in the preview. 
http://www.example.com or <http://www.example.com>

[1]: https://www.qownnotes.org
```

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[You can use numbers for reference-style link definitions][1]

URLs and URLs in angle brackets will automatically get turned into links in the preview. 
http://www.example.com or <http://www.example.com>

[1]: https://www.qownnotes.org


## Inline code and code blocks

```markdown
Inline `code` has `backticks around` it.
```

Inline `code` has `backticks around` it.

Blocks of code are either fenced by lines with three backticks, or are indented with four spaces.

### 4-Spaces fence

```markdown
	s = "Code with space indent"
	print s
```

	s = "Code with space indent"
	print s

### Backtick fence

    ```
    Code goes here
    Code goes here
    ```

```
Code goes here
Code goes here
```

### Backtick fence with code highlighting

```bash
# I am a comment
cd Notes
```

## Tables

Tables aren't part of the core Markdown spec, but many interpreters support them.

```markdown
Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the 
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
```

Colons can be used to align columns.

| Tables        | Are           | Cool |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3


## Blockquotes

```markdown
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
```

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 


## Line Breaks

```markdown
Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also begins a separate paragraph, but...  
This line is only separated by two trailing spaces and a single newline, so it's a separate line in the *same paragraph*.
```

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also begins a separate paragraph, but...  
This line is only separated by two trailing spaces and a single newline, so it's a separate line in the *same paragraph*.

## Comments

```markdown
[comment]: # (This comment will not appear in the preview)
```

## Checkbox lists

```markdown
- [x] done
- [ ] todo
```

- [x] done
- [ ] todo

---

# The following markdown syntax is Hugo or Congo specific

## Alert box
```markdown
{{</* alert "x-twitter" */>}}
**Warning!** This action is destructive!
{{</* /alert */>}}
```

{{< alert "x-twitter" >}}
**Warning!** This action is destructive!
{{< /alert >}}

## Badges
```markdown
{{</* badge */>}}
New article!
{{</* /badge */>}}
```

{{< badge >}}
New article!
{{< /badge >}}


## Buttons
```markdown
{{</* button href="#button" target="_self" */>}}
Call to action
{{</* /button */>}}
```

{{< button href="#button" target="_self" >}}
Call to action
{{< /button >}}


## Charts
```markdown
{{</* chart */>}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
{{</* /chart */>}}
```

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}


## Figures
```markdown 
![Markdown Logo](markdown-mark-white-feature.svg "[Markdown](https://en.wikipedia.org/wiki/Markdown)")
```
![Markdown Logo](markdown-mark-white-feature.svg "[Markdown](https://en.wikipedia.org/wiki/Markdown)")


## Icon
```markdown
{{</* icon "github" */>}}
```

{{< icon "github" >}}

Here is a list of all Hugo Congo supported icon codes: https://jpanther.github.io/congo/samples/icons/


## KaTex / LaTex
Inline:
```markdown
{{</* katex */>}} \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
```

{{< katex >}} \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)

Block:
```markdown
{{</* katex */>}}
$$
f(a,b,c) = (a^2+b^2+c^2)^3
$$
```

{{< katex >}}
$$
f(a,b,c) = (a^2+b^2+c^2)^3
$$

## Lead
```markdown
{{</* lead */>}}
When life gives you lemons, make lemonade.
{{</* /lead */>}}
```

{{< lead >}}
When life gives you lemons, make lemonade.
{{< /lead >}}


## Mermaid Figures
```markdown
{{</* mermaid */>}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{</* /mermaid */>}}
```

{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}


## Author Profile
```markdown
{{</* profile align="center" */>}}
```

{{< profile align="center" >}}


## Code block with Hugo's internal highlight shortcode
```markdown
{{</* highlight html "linenos=table,hl_lines=4 7-9" */>}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>
{{</* /highlight */>}}
```

{{< highlight html "linenos=table,hl_lines=4 7-9" >}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>
{{< /highlight >}}


## Ignore shortcode so that you can create Hugo documentation!
```markdown
{{</*/* yourshortcode */*/>}}
```

{{</* yourshortcode */>}}


Credit: [markdown-here](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)  
License: [CC-BY](https://creativecommons.org/licenses/by/3.0/)
