This post shows how to write Markdown and what it looks like with this template’s styles.

Headings

Start a line with # followed by a space to create a heading. Use ## for a second-level heading, ### for a third-level heading, and so on, up to six levels.

The template already uses the post title as <h1>, so start headings inside your post with ##. This example shows all six levels.

Syntax

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

Output

H1

H2

H3

H4

H5

H6

Paragraphs

Leave a blank line between paragraphs.

Syntax

A paragraph can be a single sentence or a few sentences about the same thing.

A blank line starts the next paragraph. You don't need any special symbols.

Output

A paragraph can be a single sentence or a few sentences about the same thing.

A blank line starts the next paragraph. You don’t need any special symbols.

Text formatting

Use ** around text for bold, _ for italics, and one backtick on each side for inline code.

Syntax

This is **bold**, this is _italic_, and this is a file name: `config.ts`.

Output

This is bold, this is italic, and this is a file name: config.ts.

Links

Put the link text in square brackets and the destination in parentheses. A path starting with / links to a page on your own site.

Syntax

Read the [about page](/about).

Output

Read the about page.

Images

Images use the same syntax as links, with a ! at the start. The text in square brackets is the alt text, a description for people who can’t see the image. The path below is relative to this post’s file.

Syntax

![Traffic passing Gwanghwamun Square in Seoul](../../assets/images/Seoul-Image-900-900.png)

Output

Blockquotes

Start a line with > followed by a space to make it a blockquote. You can use Markdown formatting inside it too.

Blockquote without attribution

Syntax

> This is a blockquote with **bold text** inside it.

Output

This is a blockquote with bold text inside it.

Blockquote with attribution

For a quote from someone else, include their name and a source. Here, <br /> puts the name on a new line. [^1] links to a footnote at the bottom of the post, with the source defined on the line starting with [^1]:.

Syntax

> Don't communicate by sharing memory, share memory by communicating.<br />
> Rob Pike[^1]

[^1]: From Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) at Gopherfest, November 18, 2015.

Output

Don’t communicate by sharing memory, share memory by communicating.
Rob Pike¹

Tables

Separate columns with | and add a row of dashes below the column names.

Syntax

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Output

Italics	Bold	Code
italics	bold	code

Code blocks

Wrap code in three backticks on separate lines. Add a language name after the opening backticks for syntax highlighting, e.g. html or javascript.

Syntax

```html
<article>
  <p>A short post.</p>
</article>
```

Output

<article>
  <p>A short post.</p>
</article>

Lists

Ordered list

Start each item with a number, a period, and a space.

Syntax

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

Output

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

Unordered list

Use - followed by a space for a bullet point.

Syntax

- List item
- Another item
- And another item

Output

• List item
• Another item
• And another item

Nested list

Indent items to put them inside another list item. This example uses two spaces before each nested bullet.

Syntax

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

Output

• Fruit
  • Apple
  • Orange
  • Banana
• Dairy
  • Milk
  • Cheese

Inline HTML

You can also use HTML tags in your posts. <abbr> gives an abbreviation a full name, <sub> and <sup> place text below or above the baseline, <kbd> marks keyboard input, and <mark> highlights text.

Syntax

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

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the selected text.

The <mark>highlighted words</mark> stand out from the rest of this sentence.

Output

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press Ctrl + C to copy the selected text.

The highlighted words stand out from the rest of this sentence.

Footnotes

1. From Rob Pike’s talk at Gopherfest, November 18, 2015. ↩