Samples of Hugo’s extended CommonMark syntax to give a quick impression of the default layout.

This page shows the default style the theme applies to Markdown elements. Image captions and notes are not a part of this default set.

Headings

The following HTML elements <h1> — <h6> represent the title, three levels of section headings, and two levels of paragraph headings.

Because the templates generate the title section from frontmatter meta-data the Markdown should not contain a title. As usual, the theme processes frontmatter parameters for the title section.

Title

Quirky spud boys can jam after zapping five worthy Polysixes. Battle of Thermopylae: Quick javelin grazed wry Xerxes. “Who am taking the ebonics quiz?”, the prof jovially axed.

Section

Bobby Klun awarded Jayme sixth place for her very high quiz. My jocks box, get hard, unzip, quiver, flow. The wizard quickly jinxed the gnomes before they vaporized.

Subsection

Cute, kind, jovial, foxy physique, amazing beauty? Wowser! Fax back Jim’s Gwyneth Paltrow video quiz. Schwarzkopf vexed Iraq big-time in July.

Sub-subsection

Have a pick: twenty-six letters — no forcing a jumbled quiz! Quick brown fox jumps over the lazy dog. The lazy major was fixing Cupid’s broken quiver.

Paragraph

A quick brown fox jumps over the lazy dog. Jack, love my big wad of sphinx quartz! Jack quietly moved up front and seized the big ball of wax.

Small Paragraph

Vexed nymphs go for quick waltz job. Waltz job vexed quick frog nymphs. Jim quickly realized that the beautiful gowns are expensive.

Images

Since version 0.108.0 Hugo allows distinguishing stand-alone and embedded images.

Fig 2: Caption (only from a resource)(Mulyadi/Unsplash) Jack quietly moved up front and seized the big ball of wax. Jack, love my big wad of sphinx quartz! The quick onyx goblin jumps over the lazy dwarf. Quick zephyrs blow, vexing daft Jim. The lazy major was fixing Cupid’s broken quiver. Foxy diva Jennifer Lopez wasn’t baking my quiche.

Big dwarves heckle my top quiz of jinx. Quincy Pondexter blocked five jams against the Wizards! Bobby Klun awarded Jayme sixth place for her very high quiz. Jim quickly realized that the beautiful gowns are expensive. Public junk dwarves hug my quartz fox. Who packed five dozen old quart jugs in my box?

Link

This is an internal example link.
This is an external example link.

Blockquotes

The blockquote element contains content from another source.

Without attribution

A wizard’s job is to vex chumps quickly in fog. Quick blowing zephyrs vex daft Jim. Bored? Craving a pub quiz fix? Why, just come to the Royal Oak! Cozy lummox gives smart squid who asks for job pen. J. Fox made five quick plays to win the big prize.
Note that you can use Markdown syntax within a blockquote.

With attribution and footnote

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

Tables

Tables aren’t part of CommonMark, but Hugo supports their syntax as an extension by default.

Centered table columns

Name	Age
Bob	27
Alice	23

Inline Markdown within tables

Inline	Markdown	In	Table
italics	bold	~~strikethrough~~	`code`

Code Blocks

With backticks (code fences)

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

Code block indented with four spaces

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

Code block with Hugo’s internal highlight shortcode

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

List Types

Ordered list

First item
Second item
Third item

Unordered list

List item
Another item
And another item

Nested unordered and ordered list

Item 1
1. First sub-item of the first item
2. Second sub-item of the first item
Item 2
1. First sub-item of the second item
2. Second sub-item of the second item

Definition list

The definition list is also an extension for Goldmark supported by Hugo.

First term: Description of the first term
Second term: Description of the second term

Missing Markdown elements

Some inline HTML tags have no corresponding syntax in Goldmark. We can either enable raw HTML in Markdown or use Hugo to generate them.

Additional inline elements

sub & sup: H₂O, Xⁿ + Yⁿ = Zⁿ
kbd: Press CTRL + ALT + Delete to end the session.
mark: Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
cite: We can reference a book.

Inline with special attributes

The link element is tweaked to produce the following two tags when their name is provided as a link target and combined with a title attribute:

abbr: The link [HTML](abbr "HyperText Markup Language") generates HTML
dfn: The link [Replacement codes](dfn "replacement codes") generates the definition tag:
Replacement codes are defined by curly braces and a marker directly after the first brace.

The above quote is excerpted from Rob Pike’s talk during Gopherfest, on November 18, 2015. ↩︎

Markdown Layout