Below showcases all HTML, markdown and themes available!

H1

# H1

H2

# H2

H3

# H3

H4

# H4
H5
# H5
H6
# H6

Formatting

Bold

**Bold**

Italics

_Italics_

strikethrough

~~strikethrough~~

Marking this word

Marking this <mark>word<mark>

This is code

This is `code`

GIF is a bitmap image format.

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

H2O

H<sub>2</sub>O

Xn + Yn = Zn

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

Press CTRL+ALT+DEL to end the session.

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

Citing Daniel Martins

Citing <cite>Daniel Martins</cite>

This text is red.

<span style="color: red;">This text is red.</span>

Notices

Several notices can be defined:

  • Note
  • Warning
  • Tip
  • Info

Note

Note

A notice of type note.

Warning

Warning

A notice of type warning.

Tip

Tip

A notice of type tip.

Info

Info

A notice of type info.

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rhoncus est pellentesque elit ullamcorper dignissim cras.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>
> _Rhoncus_ **est** `pellentesque` ~~elit ullamcorper~~ dignissim cras.

Blockquote with attribution

Temporary is permanent.

— Daniel Martins1

> Temporary is permanent. 
>
> — <cite>Daniel Martins[^1]</cite>

Tables

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

NameAge
Bob27
Alice23
| Name  | Age |
| ----- | --- |
| Bob   | 27  |
| Alice | 23  |

Inline Markdown within tables

ItalicsBoldCode
italicsboldcode
| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Terminal Window

An example of terminal window.
#!/bin/bash
echo "Hello world!"

Code Blocks

This is Inline Code

`This is Inline Code`

Pre Code

 This is pre text 
<pre> This is pre text </pre>

Code block with backticks

<!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 backticks, language and line numbers

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example HTML5 Document</title>
        <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements.">
    </head>
    <body>
        <p>Test</p>
    </body>
</html>

Code block with backticks, language, line numbers and highlighting

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
switch strings.ToLower(style) {
case "go":
    return strings.Title
case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
default:
    return transform.NewTitleConverter(transform.APStyle)
}
}

Code block with backticks, language, line numbers, highlighting and line start

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
switch strings.ToLower(style) {
case "go":
    return strings.Title
case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
default:
    return transform.NewTitleConverter(transform.APStyle)
}
}

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>

Gist

List Types

Ordered List

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

Unordered List

  • List item
  • Another item
  • And another item

Nested list

  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese

  1. This quote is from Daniel Martins. ↩︎