Markdown Layout
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
Jackie will budget for the most expensive zoology equipment. Quizzical twins proved my hijack-bug fix. Glib jocks quiz nymph to vex dwarf.
Section
Grumpy wizards make toxic brew for the evil queen and jack. Fickle jinx bog dwarves spy math quiz. Why shouldn’t a quixotic Kazakh vampire jog barefoot?
Subsection
Joaquin Phoenix was gazed by MTV for luck. Foxy parsons quiz and cajole the lovably dim wiki-girl. Who packed five dozen old quart jugs in my box?
Sub-subsection
Do wafting zephyrs quickly vex Jumbo? Nymphs blitz quick vex dwarf jog. Cute, kind, jovial, foxy physique, amazing beauty? Wowser!
Paragraph
Brick quiz whangs jumpy veldt fox. A quick brown fox jumps over the lazy dog. The jay, pig, fox, zebra and my wolves quack!
Small Paragraph
My ex pub quiz crowd gave joyful thanks. Kvetching, flummoxed by job, W. zaps Iraq. Crazy Frederick bought many very exquisite opal jewels.
Images
Since version 0.108.0 Hugo allows distinguishing stand-alone and embedded images.
Stand-alone
Embedded
Fig 2: Caption (only from a resource)(Mulyadi/Unsplash)
Fax back Jim’s Gwyneth Paltrow video quiz. Sex-charged fop blew my junk TV quiz. Go, lazy fat vixen; be shrewd, jump quick. Waltz, bad nymph, for quick jigs vex! Brick quiz whangs jumpy veldt fox. Brawny gods just flocked up to quiz and vex him.
Prating jokers quizzically vexed me with fibs. Foxy diva Jennifer Lopez wasn’t baking my quiche. Waltz job vexed quick frog nymphs. Joaquin Phoenix was gazed by MTV for luck. Go, lazy fat vixen; be shrewd, jump quick. Bored? Craving a pub quiz fix? Why, just come to the Royal Oak!
Link
This is an internal example link.
This is an external example link.
Blockquotes
The blockquote element contains content from another source.
Without attribution
Back in June we delivered oxygen equipment of the same size. Then a cop quizzed Mick Jagger’s ex-wives briefly. Pack my box with five dozen liquor jugs. Fickle jinx bog dwarves spy math quiz. Battle of Thermopylae: Quick javelin grazed wry Xerxes.
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
| Name | Age |
|---|---|
| Bob | 27 |
| Alice | 23 |
Inline Markdown within tables
| Inline | Markdown | In | Table |
|---|---|---|---|
| italics | bold | 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
First sub-item of the first item
Second sub-item of the first item
Item 2
First sub-item of the second item
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.