This post demonstrates how standard Markdown typography renders in the First Folio theme. Use it as a reference when writing content. Each section below shows a different element — read top to bottom for the full tour, or jump to a specific feature using the table of contents.

Heading 1

Headings from H2 to H6 are available on demand. Header 1 is differentiated from the page title — prefixes can be configured or removed in the theme settings.

Heading 2

Some paragraph text under a level-two heading. Most articles will use H2 as their top-level structural marker, with H3 and below for sub-sections.

Heading 3

Standard Markdown elements are supported, along with a variety of custom shortcodes for images, galleries, callouts, and more.

Heading 4

Orgmode markup is also supported, with a wider range of elements available in that syntax. This allows for more complex formatting when needed, while still supporting the simplicity of Markdown for most use cases. You can use whichever syntax is best for each article.

Heading 5

A fifth-level heading is rare in body text but available when you need it.

Heading 6

The deepest level — useful for footnote-style sub-divisions.

Text Formatting

Regular paragraph text flows naturally. Bold text for emphasis. Italic text for subtlety. Bold italic combines both. Strikethrough for corrections. Inline code for technical terms or short snippets. You can also use hyperlinks inline.

For typographic embellishment, use the colorbold shortcode to highlight a phrase in the accent colour without underlining it.

Blockquotes are useful for highlighting important passages or attributing quotes to their sources. They sit indented from the body text with a vertical accent line on the left.

For a more dramatic pull-quote, use the quote shortcode:

Lists

Unordered

• First item
• Second item
  • Nested item
  • Another nested item with bold and italic text
• Third item

Ordered

1. First step
2. Second step with a longer description that wraps onto multiple lines, demonstrating how list items handle reflowing text gracefully.
3. Third step
   1. Sub-step one
   2. Sub-step two

Definition list

Term 1

First definition. Lists like this are useful for glossaries or specification documents.

Term 2

Second definition with inline formatting supported.

Callouts

Callouts draw the reader’s attention to important information using colour-coded boxes:

Code Blocks

Syntax-highlighted code blocks for multiple languages:

def greet(name: str) -> str:
    """Return a greeting for the given name."""
    return f"Hello, {name}!"

if __name__ == "__main__":
    print(greet("world"))

#!/usr/bin/env bash
set -euo pipefail
echo "Hello from the shell"

params:
  ambience:
    default: dark
    toggle: true

Inline code spans work too, of course.

Tables

Links and Images

External link to the Hugo project. Internal links to other articles work the same way: The Cartographer.

Inline images can be floated alongside text using the img shortcode. The image to the right shows display typography rendered with paint splatter effects — useful for hero images and editorial features. Captions sit below the image with optional blur and opacity controls.

Images can also be floated to the left, with text wrapping on the right. The shortcode supports several positioning options (left, right, center), responsive width values, and optional links to make the image clickable. Hand-drawn illustrations sit naturally alongside body text without dominating the page.

Images can be placed side-by-side with the side-by-side shortcode:

Details

For long-form content that benefits from progressive disclosure, the details shortcode collapses content behind a clickable summary:

Footnotes

Footnotes are useful for adding context without breaking the flow of the main text¹. Multiple footnotes are supported², and they collect together at the bottom of the article.