Markdown & highlighting

This page is rendered by the API it documents.

ctx.markdown

const tree = try ctx.markdown(source);       // GFM, defaults
const tree2 = try ctx.markdownOpts(source, .{ ... }); // explicit Options

Renders GitHub-Flavored Markdown into a safe node subtree:

  • text escaped, link/image URLs sanitized, raw HTML stripped;
  • tables, task lists, strikethrough, autolinks, nested lists — full GFM;
  • fenced code blocks are syntax-highlighted automatically.

Drop the result anywhere in a tree:

ctx.article().children(.{ try ctx.markdown(@embedFile("../content/page.md")) })

@embedFile paths resolve inside the app module (rooted at src/app/), so docs-style sites keep content under src/app/content/ and ship it inside the binary.

ctx.codeBlock

Standalone highlighted blocks outside markdown:

const block = try ctx.codeBlock(source, "zig");
// <pre><code class="language-zig">…token spans…</code></pre>

Language hints: zig, ts, js, json, sh, html, css, and more; unknown hints fall back to a generic tokenizer, "" renders plain. Tokens get stable tok-* classes.

The theme

Token classes are unstyled until you include the theme:

ctx.style(verve.highlightThemeCss)   // in your shell's <head>

Inline-code vs block: ctx.code("x") is a plain inline <code> element — unrelated to codeBlock.

Lower-level highlight

const spans = try verve.highlight(ctx, source, "zig");

gives you the highlighted span fragment without the <pre> wrapper — useful for custom code presentation (this site wraps it in cards with a copy button).

Next up the guides: Resources & suspense.

← PreviousHead managementNext →Resources & suspense