Markdown Showcase

This post uses every element the theme supports, so you can check how each one looks in one place. It doubles as a reference for the syntax.

Text

Regular paragraph text with bold, italic, bold italic, inline code, and a link to the Hugo docs.

Extended syntax, enabled in hugo.toml: highlighted, inserted, deleted, H₂O, and E = mc².

Shortcodes for other inline elements: press Ctrl + C to copy. The program prints Build finished. Solve for x. As described in The Pragmatic Programmer.

A long unbroken string, to check wrapping: https://example.com/a/very/long/url/that/keeps/going/and/going/without/any/spaces/at/all

Headings

Hover a heading to see its anchor link.

The post title is the only level 1 heading, so posts use three levels: ## for sections (like “Headings” above), ### for subsections and #### for minor headings. Levels 5 and 6 look the same as level 4.

Heading level 3

Heading level 4

Heading level 5 (styled like level 4)

Heading with a custom anchor

This heading’s link is #custom-anchor instead of one generated from its text. Jump to it.

Blockquotes

Somewhere, something incredible is waiting to be known.

Carl Sagan

A longer quote can span several paragraphs and keep inline formatting:

Programs must be written for people to read, and only incidentally for machines to execute.

The paragraph break above is part of the quote. Links like this one work too.

Quotes can contain lists, for example when quoting a checklist:

Before opening a pull request:

• hugo --minify runs without errors
• Update the changelog
• Add a screenshot for visual changes

Lists

Unordered, with nesting:

• First item
• Second item
  • Nested item
  • Another nested item
    • Third level
• Third item

Ordered:

1. Install Hugo
2. Run hugo server
3. Open http://localhost:1313/

Task list:

• Set up the theme
• Write the showcase post
• Write real posts

Definition list:

Hugo

A static site generator written in Go.

Goldmark

The Markdown parser Hugo uses.

Code

A fenced block with syntax highlighting:

package main

import "fmt"

func main() {
	fmt.Println("Hello, world")
}

A shell session:

hugo new content posts/my-post.md
hugo server -D

A very long line, to check horizontal scrolling:

const message = "This line is intentionally long so the code block has to scroll sideways instead of stretching the page";

A block without a language:

Plain preformatted text.
    Whitespace is preserved.

Tables

A Markdown table with column alignment:

A wide table, to check horizontal scrolling:

A table built from a data file with the table shortcode. It supports a caption and a footer, which Markdown tables can’t do:

Images

A plain Markdown image with a title (hover it):

The same image through the figure shortcode, with a caption:

Footnotes

Footnotes are collected at the end of the post.¹ Each one links back to where it was referenced.²