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 wafting zephyrs vex bold Jim. As quirky joke, chefs won’t pay devil magic zebra tax. Five hexing wizard bots jump quickly.


Section

Fox dwarves chop my talking quiz job. Hick dwarves jam blitzing foxy quip. Lovak won the squad prize cup for sixty big jumps.

Subsection

Public junk dwarves quiz mighty fox. Sympathizing would fix Quaker objectives. JCVD might pique a sleazy boxer with funk.

Sub-subsection

Sympathizing would fix Quaker objectives. Just keep examining every low bid quoted for zinc etchings. Fax back Jim’s Gwyneth Paltrow video quiz.

Paragraph

JCVD might pique a sleazy boxer with funk. Waltz job vexed quick frog nymphs. Fox nymphs grab quick-jived waltz.

Small Paragraph

My girl wove six dozen plaid jackets before she quit. Pack my box with five dozen liquor jugs. Jackdaws love my big sphinx of quartz.

Images

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

Stand-alone

A big splash of water
Fig 1: This caption and the attribution are not available for directly included images. We need to provide the additional information in associated resource parameters (→ Resources).(Erda Estremera/Unsplash)

Embedded

A smaller splash of water Fig 2: Caption (only from a resource)(Mulyadi/Unsplash) BlewJ’s computer quiz favored proxy hacking. The lazy major was fixing Cupid’s broken quiver. Back in June we delivered oxygen equipment of the same size. Quick fox jumps nightly above wizard. Pack my box with five dozen liquor jugs. All questions asked by five watched experts amaze the judge.

Quick brown fox jumps over the lazy dog. Bobby Klun awarded Jayme sixth place for her very high quiz. Pack my box with five dozen liquor jugs. Both fickle dwarves jinx my pig quiz. Fickle jinx bog dwarves spy math quiz. Do wafting zephyrs quickly vex Jumbo?

Blockquotes

The blockquote element contains content from another source.

Without attribution

Quirky spud boys can jam after zapping five worthy Polysixes. Go, lazy fat vixen; be shrewd, jump quick. Zack Gappow saved the job requirement list for the six boys. All questions asked by five watched experts amaze the judge. Vexed nymphs go for quick waltz job.

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 Pike1

Tables

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

Centered table columns

NameAge
Bob27
Alice23

Inline Markdown within tables

InlineMarkdownInTable
italicsboldstrikethroughcode

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

  1. First item
  2. Second item
  3. 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
H2O, Xn + Yn = Zn
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 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.


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