Code Blocks

This page showcases code blocks with syntax highlighting.

Inline Code

Use const for constants and let for variables in JavaScript.

The git status command shows the working tree status.

Basic Code Block

This is a basic code block without syntax highlighting.
It preserves whitespace and formatting.

Source Code with Highlighting

JavaScript

// Theme toggle implementation
const THEME_KEY = 'site-theme';

function toggleTheme() {
  const html = document.documentElement;
  const isDark = html.classList.toggle('dark-theme');
  localStorage.setItem(THEME_KEY, isDark ? 'dark' : 'light');
  updateIcon(isDark);
}

function initTheme() {
  const saved = localStorage.getItem(THEME_KEY);
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

  if (saved === 'dark' || (!saved && prefersDark)) {
    document.documentElement.classList.add('dark-theme');
  }
}

Python

"""Configuration parser for documentation sites."""

from pathlib import Path
from typing import Optional
import yaml

class Config:
    """Site configuration handler."""

    def __init__(self, config_path: Path):
        self.path = config_path
        self._data: Optional[dict] = None

    @property
    def data(self) -> dict:
        if self._data is None:
            with open(self.path) as f:
                self._data = yaml.safe_load(f)
        return self._data

    def get(self, key: str, default=None):
        """Get a configuration value."""
        return self.data.get(key, default)

CSS

/* Theme variables */
:root {
  --bg-primary: #ffffff;
  --bg-elevated: #f5f5f5;
  --text-primary: #333333;
  --text-heading: #000000;
  --link-color: #0066cc;
  --border-color: #dddddd;
}

.navbar {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

YAML

site:
  title: My Documentation
  start_page: component::index.adoc

content:
  sources:
    - url: https://github.com/org/repo.git
      branches: [main, v*]
      start_path: docs

ui:
  bundle:
    url: https://example.com/ui-bundle.zip
  supplemental_files: ./supplemental-ui

Bash/Shell

#!/bin/bash
# Build and deploy documentation

set -euo pipefail

echo "Building documentation..."
antora --fetch antora-playbook.yml

echo "Deploying to server..."
rsync -avz --delete build/site/ user@server:/var/www/docs/

echo "Done!"

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documentation Site</title>
  <link rel="stylesheet" href="css/site.css">
</head>
<body>
  <nav class="navbar">
    <div class="navbar-brand">Documentation</div>
    <button class="theme-toggle" id="theme-toggle">
      Toggle Theme
    </button>
  </nav>
</body>
</html>

JSON

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A sample project",
  "keywords": ["antora", "documentation"],
  "repository": {
    "type": "git",
    "url": "https://github.com/example/my-project.git"
  }
}

Code Block with Title

example-config.js

export function initConfig() {
  const config = document.getElementById('config');
  config?.addEventListener('change', updateConfig);
}

Code Block with Callouts

function toggleTheme() {
  const html = document.documentElement; (1)
  const isDark = html.classList.toggle('dark-theme'); (2)
  localStorage.setItem('theme', isDark ? 'dark' : 'light'); (3)
}

1	Get the root HTML element
2	Toggle the theme class
3	Persist the preference

Code Block with Line Numbers

def fibonacci(n: int) -> int:
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Example usage
for i in range(10):
    print(f"fib({i}) = {fibonacci(i)}")

Literal Block

This is a literal block.
It preserves all formatting
    including indentation
        and spacing.

Listing Block

$ npm install my-package
$ antora --fetch antora-playbook.yml
$ npx http-server build/site