Ohidur logoOhidur

Mastering Markdown Syntax: A Comprehensive Guide

O

Ohidur Rahman Bappy

MAR 22, 2025

Introduction

This article offers a sample of basic Markdown syntax used in Hugo content files. It also demonstrates how basic HTML elements are styled with CSS in a Hugo theme.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level, while <h6> is the lowest.

H1

H2

H3

H4

H5
H6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptas.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores, tempore.

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation.

Blockquote without attribution

“Tiam, ad mint andaepu dandae nostion secatur sequo quae.” Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don't communicate by sharing memory, share memory by communicating. — <cite>Rob Pike[^1]</cite>

[^1]: The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015.

Tables

Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.

| Name | Age | |------|-----| | Bob | 27 | | Alice| 23 |

Inline Markdown within tables

| Inline | Markdown | In | Table | |------------|-----------|-------------------|------------| | italics | bold | ~~strikethrough~~| code |

Code Blocks

Code block with backticks

html
<!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

{{< highlight html >}}

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

List Types

Ordered List

  1. First item
  2. Second item
  3. Third item

Unordered List

  • List item
  • Another item
  • Yet another item

Nested list

  • Item
    1. First Sub-item
    2. Second Sub-item

Other Elements — abbr, sub, sup, kbd, mark

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup>: Z<sup>n</sup>

Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal and hunt for insects, worms, and other small creatures.

Emoji Support

Emoji can be enabled in a Hugo project in several ways.

The emojify function can be used in templates or Inline Shortcodes.

To enable emoji globally, set enableEmoji to true in your site’s configuration and then you can type emoji shorthand codes directly in content files; e.g.

<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>

The Emoji cheat sheet is a useful reference for emoji shorthand codes.

Note: The rendering of emoji depends on your browser and platform. Use a third party emoji font or font stack to style emoji:

{{< highlight html >}} .emoji { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; } {{< /highlight >}}

{{< css.inline >}}

<style> .emojify { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; font-size: 2rem; vertical-align: middle; } @media screen and (max-width:650px) { .nowrap { display: block; margin: 25px 0; } } </style>

{{< /css.inline >}}

Tags

guidesyntaxhugomarkdown