Block of Text

Deserunt proident sit ullamco proident aliqua. Ullamco ea deserunt aliqua mollit aliqua irure ullamco Lorem Lorem. Deserunt nostrud dolor ad sit.

Voluptate velit exercitation aute culpa sint sint non minim culpa. Non enim amet magna irure exercitation ut velit in laborum fugiat. Commodo eu ut consectetur est do consequat nulla ex adipisicing consequat non enim. Exercitation laborum do consequat in ex ad sunt excepteur non nostrud deserunt fugiat duis anim. Exercitation nostrud pariatur elit sunt. Cillum ut culpa proident dolore consectetur amet fugiat tempor.

Amet ad nostrud aute qui voluptate eu. Deserunt Lorem esse enim in commodo quis. Dolor aute ipsum sint do sit fugiat est aliquip occaecat veniam do sint occaecat.

Elit deserunt reprehenderit nulla quis nostrud incididunt do occaecat in nostrud in veniam. Duis consectetur cupidatat labore velit ex cupidatat amet amet. Voluptate elit magna aute commodo qui ad voluptate dolor in anim ex ad. Anim esse cillum commodo do ea ullamco qui. Anim quis eu cillum esse non. Duis eu mollit labore sint sint incididunt cupidatat quis quis nisi sint adipisicing mollit.

 1# comment
 2class MyClass:
 3    def __init__(self, name: str):
 4        self.name = name
 5        self._items: list[int] = []
 6
 7    @property
 8    def count(self) -> int:
 9        """Return the number of items."""
10        return len(self._items)
11
12    def add(self, value: int) -> None:
13        if value < 0:
14            raise ValueError("Only positive ints allowed")
15        self._items.append(value)

Inline formatting

This paragraph has bold, italic, bold italic, inline code, strikethrough, and a link to the homepage.

Hover this: HTML. Also: H2O (subscript), X^2^ (superscript) — note these are non-standard markdown, but raw HTML <sub> and <sup> work fine.

Headings

Second-level heading

Third-level heading

Fourth-level heading

Fifth-level heading

Blockquotes

This is a blockquote. It should be styled with a left border, italic text, and prominent color.

Nested blockquote. Some citation styles use this for nested attribution.

Lists

Unordered

• Item one
• Item two
  • Nested item A
  • Nested item B
    • Deeply nested item
• Item three

Ordered

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Definition list

Markdown

A lightweight markup language for creating formatted text.

Hugo

A static site generator written in Go, known for its speed and flexibility.

Supports shortcodes, archetypes, multilingual, and more.

Task list (GFM)

• Write the lorem ipsum article
• Include all markdown features
• Create the second article
• Tweak the design
• Deploy to production

Code blocks

Inline code

Use the fmt.Println() function to print to stdout. The os.Exit() call terminates immediately.

Fenced code with syntax highlighting (Python)

 1# comment
 2class MyClass:
 3    def __init__(self, name: str):
 4        self.name = name
 5        self._items: list[int] = []
 6
 7    @property
 8    def count(self) -> int:
 9        """Return the number of items."""
10        return len(self._items)
11
12    def add(self, value: int) -> None:
13        if value < 0:
14            raise ValueError("Only positive ints allowed")
15        self._items.append(value)

Fenced block with highlighted lines

1def fibonacci(n):
2    if n <= 1:
3        return n
4    a, b = 0, 1
5    for _ in range(n - 1):
6        a, b = b, a + b
7    return b

Go snippet

 1package main
 2
 3import (
 4    "fmt"
 5    "net/http"
 6)
 7
 8func main() {
 9    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
10        fmt.Fprintf(w, "Hello, %s!", r.URL.Path[1:])
11    })
12    http.ListenAndServe(":8080", nil)
13}

Diff / terminal output

1- old line
2+ new line

JSON

 1{
 2  "title": "Test Article",
 3  "tags": ["markdown", "hugo", "test"],
 4  "published": true,
 5  "stats": {
 6    "words": 420,
 7    "readTime": "2m"
 8  },
 9  "nested": {
10    "nested": {
11      "nested": {
12        "nested": {
13          "nested": {
14            "object": {}
15          }
16        }
17      }
18    }
19  }
20}

No language (plain text)

This is a plain text block with no language annotation.
No syntax highlighting is applied.

CSS

 1/* Card component — hover reveal */
 2.card {
 3    display: grid;
 4    gap: 1rem;
 5    padding: 1.5rem;
 6    background: var(--bg-alt);
 7    border: 1px solid var(--border);
 8    border-radius: 8px;
 9}
10
11.card:hover {
12    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
13}
14
15@container (min-width: 480px) {
16    .card {
17        grid-template-columns: 1fr 2fr;
18    }
19}
20
21.card-title {
22    font-family: "Inter", sans-serif;
23    font-size: 1.25rem;
24    line-height: 1.4;
25    color: #1a1a2e;
26}

HTML

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="utf-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Hello &mdash; World!</title>
 7    <!--[if IE]>
 8        <script src="fallback.js"></script>
 9    <![endif]-->
10</head>
11<body>
12    <nav aria-label="Main">
13        <ul>
14            <li><a href="/">Home</a></li>
15            <li><a href="/about">About</a></li>
16        </ul>
17    </nav>
18    <main>
19        <h1>Hello, World!</h1>
20        <p class="highlight">
21            Welcome to &lt;Acme Corp&gt; — we build things.
22        </p>
23    </main>
24</body>
25</html>

Shell

 1#!/usr/bin/env bash
 2set -euo pipefail
 3
 4APP_NAME="${1:-default}"
 5BUILD_DIR="./dist/$APP_NAME"
 6
 7echo "Building $APP_NAME ..."
 8
 9if [[ -d "$BUILD_DIR" ]]; then
10    echo "  → removing stale build"
11    rm -rf "$BUILD_DIR"
12fi
13
14mkdir -p "$BUILD_DIR"
15cp -r src/* "$BUILD_DIR/"
16
17# Run linter inline
18for file in src/*.py; do
19    pylint "$file" 2>/dev/null || true
20done
21
22echo "  ✓ done ($(date +%s))"

Rust

 1use std::collections::HashMap;
 2
 3#[derive(Debug, Clone)]
 4pub struct Config {
 5    pub host: String,
 6    pub port: u16,
 7    pub labels: HashMap<String, String>,
 8}
 9
10impl Config {
11    pub fn from_env() -> Result<Self, Box<dyn std::error::Error>> {
12        let host = std::env::var("HOST").unwrap_or_else(|_| "0.0.0.0".into());
13        let port: u16 = std::env::var("PORT")
14            .unwrap_or_else(|_| "8080".into())
15            .parse()?;
16        Ok(Config {
17            host,
18            port,
19            labels: HashMap::new(),
20        })
21    }
22
23    pub fn endpoint(&self, path: &str) -> String {
24        format!("http://{}:{}{}", self.host, self.port, path)
25    }
26}
27
28fn main() -> Result<(), Box<dyn std::error::Error>> {
29    let cfg = Config::from_env()?;
30    match cfg.port {
31        443 | 80 => println!("well-known port"),
32        n if n < 1024 => println!("privileged port {}", n),
33        _ => println!("ephemeral port {}", cfg.port),
34    }
35    Ok(())
36}

TypeScript

 1interface User {
 2    id: number;
 3    name: string;
 4    email?: string;
 5    readonly createdAt: Date;
 6}
 7
 8type ApiResponse<T> = {
 9    data: T;
10    error: string | null;
11    ok: boolean;
12};
13
14async function fetchUser<T>(id: number): Promise<ApiResponse<T>> {
15    const url = `https://api.example.com/users/${id}`;
16    const res = await fetch(url, {
17        method: "GET",
18        headers: { "Content-Type": "application/json" },
19    });
20    if (!res.ok) {
21        throw new Error(`Request failed: ${res.status}`);
22    }
23    return res.json() as Promise<ApiResponse<T>>;
24}
25
26class UserService {
27    private cache = new Map<number, User>();
28
29    async get(id: number): Promise<User> {
30        const fromCache = this.cache.get(id);
31        if (fromCache) return fromCache;
32        const { data, error } = await fetchUser<User>(id);
33        if (error) throw new Error(error);
34        this.cache.set(id, data);
35        return data;
36    }
37}

SQL

 1WITH popular AS (
 2    SELECT
 3        p.id,
 4        p.title,
 5        COUNT(c.id) AS comment_count
 6    FROM posts p
 7    LEFT JOIN comments c ON c.post_id = p.id
 8    WHERE p.published_at IS NOT NULL
 9      AND p.published_at >= '2026-01-01'
10    GROUP BY p.id, p.title
11    HAVING COUNT(c.id) > 5
12)
13SELECT
14    pp.id,
15    pp.title,
16    u.display_name AS author,
17    pp.comment_count
18FROM popular pp
19JOIN users u ON u.id = pp.id
20ORDER BY pp.comment_count DESC
21LIMIT 10;

Tables

Table alignment

Images

ALT Exercitation et velit ea et eiusmod dolore eu laboris commodo et ad esse nostrud. Magna veniam pariatur eu labore est aliquip nulla Lorem enim. Tempor labore occaecat magna id et sunt duis. Qui qui eiusmod anim elit ut reprehenderit cillum adipisicing pariatur veniam incididunt nisi esse adipisicing. Est sint enim quis enim qui. Duis aliqua aliquip cupidatat eu eu aliqua. Eiusmod culpa aute nisi commodo. Ullamco ea mollit nostrud et ipsum minim et ad ex eu. Labore incididunt adipisicing consectetur non cupidatat nulla qui mollit. Esse occaecat deserunt aliqua dolor ipsum commodo aliqua est aliqua tempor commodo cupidatat. Sunt minim officia labore commodo quis reprehenderit eiusmod id ullamco quis. Deserunt culpa commodo elit enim. Pariatur deserunt nostrud officia officia laborum cupidatat adipisicing veniam. Exercitation ut laboris nisi commodo deserunt laboris reprehenderit mollit nulla tempor reprehenderit eu. Mollit aliquip dolore ea excepteur id aliquip nulla veniam eiusmod. Laboris fugiat non elit nulla elit qui. Elit nostrud cillum sint laborum cillum. Culpa cillum incididunt commodo pariatur id do culpa do sit officia eiusmod incididunt consequat ullamco. Enim anim eu consectetur dolor excepteur id in. Laboris velit ipsum nulla excepteur. Duis aute proident ut magna fugiat labore incididunt.

Floats

ALT Small placeholder Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

A floated blockquote. Surrounding text wraps around it naturally.

– Michael Scott

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

1def main():
2	print("Hello World!")

1def main():
2	# this is an obnoxiously long comment string for testing a code block and how it floats
3	print("Hello World!")

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Horizontal rules

Above this paragraph there’s an <hr>. Below this paragraph there’s another one.

Hugo built-in shortcodes

figure

youtube (example — not expected to load)

x (example — not expected to load)

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC

— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

Footnotes

This sentence has a footnote reference¹. And this one too².

Raw HTML

Details inside details inside details.
  

Ctrl + C to copy. Tab to autocomplete.

Hugo Variables (rendered at build time)

• .Title: {{ .Title }}
• .Date: {{ .Date }}
• .Lastmod: {{ .Lastmod }}
• .WordCount: {{ .WordCount }} words
• .ReadingTime: {{ .ReadingTime }} minutes
• .File.Path: {{ .File.Path }}
• .File.BaseFileName: {{ .File.BaseFileName }}
• .Summary: {{ .Summary | plainify }}
• .TableOfContents: rendered elsewhere on the page

Math / Technical

LaTeX formulas (rendered at build time)

Math is rendered server-side by Hugo’s embedded KaTeX engine (transform.ToMath) into plain MathML — no client-side JavaScript, no external stylesheets.

Inline math like $a^2 + b^2 = c^2$ sits inside a paragraph, as does $e^{i\pi} + 1 = 0$. Ordinary dollar amounts ($1600, $12) are untouched because single-$ delimiters are deliberately not enabled.

Block equation with \[...\] delimiters:

The same block via $$...$$ delimiters:

Fenced ````math` code block:

A multi-line aligned system:

Escaped characters

HTML entities: & < > " '

Horizontal scroll test

A very long unbroken string to ensure horizontal scrolling works: 12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890