Markdown features

This page shows off the extras the site's markdown renderer adds on top of normal markdown. Everything below goes through the renderer itself, so the examples are the demos.

1. Code fences

Fences get shiki syntax highlighting. Whatever comes after the language tag becomes the filename tab, and there's a copy button on the right:

#!/usr/bin/env bash
SRC=$1
DEST=${2:-/var/backups}

mkdir -p "$DEST"
tar -czf "$DEST/backup-$(date +%F).tar.gz" "$SRC"
echo "backup written to $DEST"

import json
import urllib.request

def notify(event: dict, endpoint: str) -> int:
    request = urllib.request.Request(
        endpoint,
        data=json.dumps(event).encode(),
        headers={"Content-Type": "application/json"},
    )
    with urllib.request.urlopen(request) as response:
        return response.status

Languages shiki doesn't know just come out plain instead of erroring:

[server]
host = "0.0.0.0"
port = 8000
debug = false

2. Inline code

Inline code is smaller and tinted green: curl -s localhost:8000/health.

3. Cross-project cards

A paragraph that only contains a project id in double brackets gets swapped for a card for that project, status stamp and all. Take Hackathon-13:

An id that matches no project stays a normal inline span: [[does-not-exist]].

4. GitHub embeds

A paragraph holding nothing but a [github](…) link pointing at a repo root becomes a card for that repository, with stars, forks and language fetched live from the GitHub API. Take Phaser:

Deeper links (issues, trees, blobs) and links with other link text stay ordinary anchors.

5. Website card

A paragraph that only contains a [pretty-link:::title:::description](…) link pointing at a website becomes a card for that website, with title and description.

6. Collapsible sections

A :::collapse container becomes a native <details> panel that readers can expand and collapse. The state keyword sets the default state — open or closed (the default if omitted) — and the rest of the line is the visible title. The closing ::: only needs to be on its own line, so a collapse written without blank lines still terminates correctly:

7. Page breaks

A :::page-break tag will allow the page to be broken up into more easily digestable chunks that can make it easier to navigate. These can be placed on either the summary or the breakdown.