This page exists to exercise every visual element the site can render. If something looks off here, the styles need fixing. Think of it as a living reference sheet for the theme.

Markdown

This is a regular paragraph. Nothing fancy — just body text flowing naturally across the full width of the container. It should be comfortable to read at any reasonable viewport width.

Here is bold text for strong emphasis. Here is italic text for subtle emphasis. Here is ~~strikethrough text~~ for corrections or obsolete information. You can combine them freely: bold italic, ~~bold strikethrough~~, ~~italic strikethrough~~, and all three at once: ~~bold italic strikethrough~~.

The shimmer shortcode applies a flowing color-wave effect to inline text: colorized.life . It works alongside other formatting like bold shimmer, bold italics, and even ~~bold italic strikethrough!!~~

You can link to things like the Zola documentation or to a project like pulldown-cmark, the Markdown parser Zola uses under the hood. Links should stand out from body text and respond to hover.

Emoji render natively without any special handling: 🦀 🎨 🔧 🚀 — useful for adding a bit of personality to posts without pulling in external assets.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Here is a codeline shortcode for single-line commands that need horizontal scroll on narrow screens:

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

This is a blockquote. It can contain bold, italic, and inline code — all the usual inline formatting.

It can also span multiple paragraphs.

And blockquotes can nest. This is a second level. Useful for quoting someone who is themselves quoting someone else.

Unordered list with three levels of nesting:

Infrastructure
- DNS resolver
- Reverse proxy
  - TLS termination
  - Rate limiting
- Monitoring stack
Applications
- Git forge
- Blog engine
  - Zola with a custom theme

Ordered list:

Write the content in Markdown
Build the site with zola build
Deploy the output to the server
Verify everything renders correctly

Inline code like prefix, count, and colorize() should feel distinct from surrounding text — readable at a glance without breaking the flow of the sentence.

Here is a Rust snippet to test syntax highlighting against the site palette:

/// Colorize the given input with a prefix and count.
fn colorize(input: &str) -> String {
    let prefix = "vivid";
    let count = 42;
    format!("{prefix}:{input}:{count}")
}

fn main() {
    let result = colorize("hello");
    println!("{result}");
}

Tables

Tables support alignment and inline formatting:

Feature	Status	Notes
Markdown	Stable	Full CommonMark support
Shortcodes	Stable	`hr`, `codeline`, `ascii`
Alerts	Stable	All five GitHub alert types
Feed	Enabled	Atom via `generate_feeds`

Two-column variant:

Shorthand	Expansion
`ufw`	Uncomplicated Firewall
`ssh`	Secure Shell Protocol
`tls`	Transport Layer Security
`dns`	Domain Name System

ASCII Art

The ascii shortcode renders preformatted box-drawing diagrams:

┌──────────────────────────────┐
│ Outer box                    │
│ ┌──────────────────────────┐ │
│ │ Inner box                │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘

Images

The image shortcode renders a <figure> with lazy loading, optional positioning, and an auto-generated caption from the alt text. It supports both co-located assets and external URLs.

A full-width image with no position set:

Oil pastels in every color of the spectrum

The same image, floated left with body text wrapping around it:

Oil pastels arranged in a vibrant rainbow

When an image is positioned left, surrounding text flows naturally around it. This is useful for smaller illustrations or portraits that complement the text without dominating the layout. The text should wrap cleanly at any viewport width, and the image should never feel like it's colliding with the paragraph. Once enough text has accumulated, the flow returns to full width below the float.

And floated right:

Right-positioned images work the same way, just mirrored. Text wraps on the left side. This variant is handy for breaking up long runs of text with alternating visuals — left, then right — giving the page a more dynamic rhythm without resorting to a full-width image every time.

More Languages

Bash:

#!/usr/bin/env bash
set -euo pipefail

for f in *.md; do
    echo "Processing $f"
done

INI / config files:

[Interface]
Address = 10.0.0.1/24
ListenPort = 51820
PrivateKey = <your-private-key>

[Peer]
PublicKey = <peer-public-key>
AllowedIPs = 10.0.0.2/32

Autolinks render bare URLs: https://www.getzola.org/documentation/ and https://github.com/getzola/zola.

GitHub Alerts

Supplementary context that helps the reader understand the current topic without being critical to it.

Practical advice the reader can act on — shortcuts, best practices, or alternative approaches.

Key information the reader needs to know for things to work correctly. Don't skip this.

Something that could cause problems if ignored — unexpected behavior, common mistakes, or prerequisites.

Potential for data loss, security issues, or irreversible actions. Proceed carefully.

Extra

Color Utilities

The theme provides a set of color utility classes for inline use:

.c-accent — the site's accent color
.c-pink — pink
.c-green — green
.c-amber — amber
.c-blue — blue
.c-red — red
.c-muted — muted/dimmed text

Icons

The theme ships a library of SVG icons as CSS custom properties. Each icon renders via a CSS mask on a colored <span>:

--icon-archive --icon-bug --icon-checkmark --icon-copy --icon-done --icon-external --icon-feed --icon-fire --icon-git --icon-home --icon-link --icon-pencil --icon-search --icon-share --icon-star --icon-toc --icon-verified

Demo