A post with multimedia

This post exercises colophon's rich rendering: a hero banner (above), a preview image (used on the index and social cards), images embedded mid-article, LaTeX maths, styled callouts, a Mermaid diagram, and syntax-highlighted code. Yes.

How this renders

colophon emits progressive-enhancement HTML: every special block carries its raw source as text, tagged by type. With JavaScript a theme upgrades it (KaTeX, Mermaid, highlight.js); without JavaScript you still get readable text.

Embedded images

Obsidian ![[embed]] attachments are resolved vault-wide and copied next to the page:

You can also give an embed alt text with a pipe:

An abstract generated banner

Maths

Inline maths like $E = mc^2$ and $a^2 + b^2 = c^2$ sit in the flow of a sentence, while display maths stands alone:

\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

(Plain prose with currency such as $5 and $10 is left alone, not treated as maths.)

Warning

Maths and diagrams need JavaScript to typeset. The raw $…$ / diagram source is the graceful fallback when it is absent.

Callouts

Pro tip

Callouts support markdown inside: inline code, links, and lists:

Diagrams

flowchart LR
    A[Markdown] --> B{colophon}
    B -->|build| C[Static HTML]
    B -->|publish| D[Cloudflare Pages]

Code

package main

import "fmt"

func main() {
    fmt.Println("hello from colophon")
}

colophon build --env preview
colophon serve

Linking across entries

Wikilinks stitch the site together, and they resolve across every source — not just this vault. This note links straight to the hello-world post (which lives in the project's content/ folder) and to a second vault note. An unresolved link like a note that does not exist degrades to plain text rather than a broken link.

The tags in this post's frontmatter (test, showcase) render as links below — each opens a page listing every post that shares the tag, so readers can move sideways across entries.

That is the full multimedia stack rendered from a single Obsidian note.