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

Quick fox jumps nightly above wizard. J. Fox made five quick plays to win the big prize. Heavy boxes perform quick waltzes and jigs.

Section

Pack my box with five dozen liquor jugs. Brick quiz whangs jumpy veldt fox. Fox dwarves chop my talking quiz job.

Subsection

Fake bugs put in wax jonquils drive him crazy. Sex-charged fop blew my junk TV quiz. Heavy boxes perform quick waltzes and jigs.

Sub-subsection

Few quips galvanized the mock jury box. The quick onyx goblin jumps over the lazy dwarf. A wizard’s job is to vex chumps quickly in fog.

Paragraph

Battle of Thermopylae: Quick javelin grazed wry Xerxes. Quads of blowzy fjord ignite map vex’d chicks. Cozy lummox gives smart squid who asks for job pen.

Small Paragraph

The wizard quickly jinxed the gnomes before they vaporized. Hick dwarves jam blitzing foxy quip. Nymphs blitz quick vex dwarf jog.

Images

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

Fig 2: Caption (only from a resource)(Mulyadi/Unsplash) Quick fox jumps nightly above wizard. Sixty zips were quickly picked from the woven jute bag. Fickle jinx bog dwarves spy math quiz. Foxy diva Jennifer Lopez wasn’t baking my quiche. Jacky can now give six big tips from the old quiz. Go, lazy fat vixen; be shrewd, jump quick.

Quick brown fox jumps over the lazy dog. Heavy boxes perform quick waltzes and jigs. Five hexing wizard bots jump quickly. The jay, pig, fox, zebra and my wolves quack! Just keep examining every low bid quoted for zinc etchings. The quick brown fox jumps over a lazy dog.

Link

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

Blockquotes

The blockquote element contains content from another source.

Without attribution

Jackie will budget for the most expensive zoology equipment. J. Fox made five quick plays to win the big prize. Public junk dwarves quiz mighty fox. BlewJ’s computer quiz favored proxy hacking. Six big devils from Japan quickly forgot how to waltz.
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