Jeremy Karst d5b294f949 Added some logos and content

2025-03-03 20:49:25 -05:00

7.9 KiB

Raw Blame History

+++ title = 'Markdown Cheatsheet' 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, Hugo and Congo

Headers

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

H1

H2

H3

H4

H5

H6

Underline

<ins>Underlined</ins>

Underlined

Emphasis

Emphasis, aka italics, with *asterisks*.

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

Emphasis, aka italics, with asterisks.

Strong emphasis, aka bold, with asterisks.

Lists

### 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

First item
Second item
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.

[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

I'm an inline-style link with title

You can use numbers for reference-style link definitions

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

Inline code and code blocks

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

	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

# I am a comment
cd Notes

Tables

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

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

> 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

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

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

Checkbox lists

- [x] done
- [ ] todo

done
todo

The following markdown syntax is Hugo or Congo specific

Alert box

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

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

Badges

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

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

Buttons

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

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

Charts

{{</* 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 Logo](markdown-mark-white-feature.svg "[Markdown](https://en.wikipedia.org/wiki/Markdown)")

Icon

{{</* icon "github" */>}}

KaTex / LaTex

{{</* 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

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

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

Mermaid Figures

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

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

Author Profile

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

Code block with Hugo's internal highlight shortcode

{{</* 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 */>}}

Test

</html> {{< /highlight >}}

Ignore shortcode so that you can create Hugo documentation!

{{</*/* yourshortcode */*/>}}

Credit: markdown-here
License: CC-BY

7.9 KiB Raw Blame History