This post demonstrates every typography element available in this theme. Use it as a reference when writing your own posts.

Headings

Headings help structure your content. Here’s the full hierarchy:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs and Text

This is a standard paragraph. Good typography makes reading effortless. The line height, letter spacing, and font choice all contribute to readability. This theme uses Inter for body text—a font designed specifically for screen reading.

This is another paragraph to show spacing between blocks of text. Notice how the spacing creates a comfortable rhythm as you read. Paragraphs should breathe, giving your eyes natural resting points.

Inline Text Styles

Here are all the inline text styles you can use:

Bold text for emphasis
Italic text for titles or subtle emphasis
Bold and italic for strong emphasis
~~Strikethrough~~ for deleted or outdated content
inline code for technical terms, file names, or commands
Links look like this and change color on hover
Here’s a highlighted text using HTML mark tag
Superscript: E = mc²
Subscript: H₂O

Blockquotes

Single-line blockquote:

Design is not just what it looks like and feels like. Design is how it works.

Multi-line blockquote:

The best way to predict the future is to invent it.
The best way to predict the future is to create it.
— Alan Kay

Nested blockquote:

First level of quoting.
This is nested blockquote.
And this is deeply nested.
Back to the first level.

Lists

Unordered Lists

Simple list:

First item
Second item
Third item

Nested list:

Frontend
- HTML
- CSS
- JavaScript
  - React
  - Vue
  - Svelte
Backend
- Node.js
- Python
- Go

Ordered Lists

Numbered list:

Clone the repository
Install dependencies
Configure environment variables
Run the development server
Open in browser

Nested ordered list:

Plan your project
1. Define requirements
2. Create wireframes
3. Choose tech stack
Build the foundation
1. Set up version control
2. Initialize project structure
3. Configure tooling
Iterate and improve

Mixed Lists

Setup tasks:
1. Install Node.js
2. Install Hugo
3. Clone theme
Development tasks:
1. Create content
2. Customize styles
3. Test locally
Deployment:
1. Build site
2. Upload to S3
3. Invalidate cache

Task Lists

Create Hugo site
Install theme
Configure settings
Write first post
Deploy to production

Code

Inline Code

Use const instead of var for constants. Run npm install to install dependencies. The config file is located at ~/.config/app/settings.json.

Code Blocks

Basic code block without language:

This is a plain code block
No syntax highlighting here
Just monospace text

JavaScript

// Modern JavaScript with async/await
const fetchUsers = async () => {
  try {
    const response = await fetch('/api/users');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const users = await response.json();
    return users.filter(user => user.active);
  } catch (error) {
    console.error('Failed to fetch users:', error);
    return [];
  }
};

// ES6 class with private fields
class Counter {
  #count = 0;

  increment() {
    this.#count++;
    return this;
  }

  get value() {
    return this.#count;
  }
}

TypeScript

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
  timestamp: Date;
}

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

async function request<T>(
  url: string,
  method: HttpMethod = 'GET',
  body?: unknown
): Promise<ApiResponse<T>> {
  const response = await fetch(url, {
    method,
    headers: { 'Content-Type': 'application/json' },
    body: body ? JSON.stringify(body) : undefined,
  });

  return response.json();
}

Python

from typing import TypeVar, Generic
from dataclasses import dataclass, field
from datetime import datetime

T = TypeVar('T')

@dataclass
class Result(Generic[T]):
    """A generic result type for handling success/failure."""
    value: T | None = None
    error: str | None = None
    timestamp: datetime = field(default_factory=datetime.now)

    @property
    def is_success(self) -> bool:
        return self.error is None

    @classmethod
    def success(cls, value: T) -> 'Result[T]':
        return cls(value=value)

    @classmethod
    def failure(cls, error: str) -> 'Result[T]':
        return cls(error=error)


# Usage example
def divide(a: float, b: float) -> Result[float]:
    if b == 0:
        return Result.failure("Division by zero")
    return Result.success(a / b)

Rust

use std::error::Error;
use std::fmt;

#[derive(Debug)]
struct AppError {
    message: String,
    source: Option<Box<dyn Error>>,
}

impl fmt::Display for AppError {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        write!(f, "{}", self.message)
    }
}

impl Error for AppError {
    fn source(&self) -> Option<&(dyn Error + 'static)> {
        self.source.as_ref().map(|e| e.as_ref())
    }
}

fn process_data(input: &str) -> Result<String, AppError> {
    if input.is_empty() {
        return Err(AppError {
            message: "Input cannot be empty".to_string(),
            source: None,
        });
    }

    Ok(input.to_uppercase())
}

Go

package main

import (
    "context"
    "encoding/json"
    "log"
    "net/http"
    "time"
)

type Server struct {
    router *http.ServeMux
    logger *log.Logger
}

func (s *Server) handleHealth() http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        response := map[string]interface{}{
            "status":    "healthy",
            "timestamp": time.Now().UTC(),
        }

        w.Header().Set("Content-Type", "application/json")
        json.NewEncoder(w).Encode(response)
    }
}

func (s *Server) withLogging(next http.HandlerFunc) http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        start := time.Now()
        next(w, r)
        s.logger.Printf("%s %s %v", r.Method, r.URL.Path, time.Since(start))
    }
}

Shell/Bash

#!/bin/bash
set -euo pipefail

# Configuration
readonly PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
readonly BUILD_DIR="${PROJECT_DIR}/build"

log() {
    echo "[$(date +'%Y-%m-%d %H:%M:%S')] $*"
}

build() {
    log "Starting build..."
    mkdir -p "${BUILD_DIR}"

    # Run build steps
    npm ci
    npm run build

    log "Build complete!"
}

deploy() {
    local environment="${1:-staging}"
    log "Deploying to ${environment}..."

    aws s3 sync "${BUILD_DIR}" "s3://my-bucket-${environment}/" \
        --delete \
        --cache-control "max-age=31536000"

    log "Deployment complete!"
}

# Main
case "${1:-build}" in
    build)  build ;;
    deploy) deploy "${2:-}" ;;
    *)      echo "Usage: $0 {build|deploy [env]}" ;;
esac

SQL

-- Create a users table with proper constraints
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    email VARCHAR(255) NOT NULL UNIQUE,
    username VARCHAR(50) NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Query with CTE and window functions
WITH monthly_stats AS (
    SELECT
        DATE_TRUNC('month', created_at) AS month,
        COUNT(*) AS new_users,
        COUNT(*) FILTER (WHERE is_premium) AS premium_users
    FROM users
    WHERE created_at >= NOW() - INTERVAL '12 months'
    GROUP BY 1
)
SELECT
    month,
    new_users,
    premium_users,
    SUM(new_users) OVER (ORDER BY month) AS cumulative_users,
    ROUND(100.0 * premium_users / NULLIF(new_users, 0), 2) AS premium_rate
FROM monthly_stats
ORDER BY month DESC;

YAML

# Docker Compose configuration
version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgres://db:5432/app
    depends_on:
      - db
      - redis
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
      interval: 30s
      timeout: 10s
      retries: 3

  db:
    image: postgres:15-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: app
      POSTGRES_PASSWORD: ${DB_PASSWORD}

volumes:
  postgres_data:

JSON

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "typescript": "^5.0.0"
  }
}

Tables

Simple Table

Name	Role	Location
Alice	Developer	New York
Bob	Designer	London
Charlie	Manager	Tokyo

Aligned Table

Left Aligned	Center Aligned	Right Aligned
Content	Content	Content
More content	More content	More content
Even more	Even more	Even more

Complex Table

Feature	Free	Pro	Enterprise
Users	1	10	Unlimited
Storage	1 GB	50 GB	500 GB
API Access	❌	✅	✅
Priority Support	❌	❌	✅
Custom Domain	❌	✅	✅
SSO	❌	❌	✅

Images

Images are styled with rounded corners and proper spacing:

A placeholder image

Images with captions using HTML figure:

Sample landscape — This is a caption describing the image above.

Horizontal Rules

Use horizontal rules to separate major sections:

Above the rule.

Below the rule.

You can also use *** or ___:

Another section begins.

Definition Lists (HTML)

Hugo: A fast static site generator written in Go.
Markdown: A lightweight markup language for creating formatted text.
Tokyo Night: A clean dark color scheme inspired by Tokyo city lights.

Abbreviations (HTML)

The HTML specification is maintained by the W3C.

Keyboard Input

Press Ctrl + C to copy.

Use Cmd + Shift + P to open the command palette.

Footnotes

Here’s a sentence with a footnote¹.

And another one².

Math (if enabled)

Inline math: $E = mc^2$

Block math:

$$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$

Summary

This post covered:

Headings — Six levels of hierarchy
Text styles — Bold, italic, strikethrough, code
Blockquotes — Single, multi-line, and nested
Lists — Ordered, unordered, nested, and task lists
Code — Inline and blocks with syntax highlighting
Tables — Simple to complex with alignment
Images — With captions and proper styling
Special elements — Footnotes, abbreviations, keyboard shortcuts

Use this post as a reference when writing your own content!

This is the first footnote. It appears at the bottom of the page. ↩︎
Here’s the second footnote with more detail. Footnotes are great for citations or additional context without cluttering the main text. ↩︎