Markdown feature showcase

This post renders one minimal example of each markdown feature turned on in zfb.config.ts. Read it beside that file: everything below is a direct consequence of a key in the markdown block.

TOC

• Tables
• Strikethrough
• Task lists
• Footnotes
• Alerts
• Code blocks
• Table of contents
• What is not enabled

Tables

GFM tables are on by default — no config needed. See the GFM constructs docs.

Strikethrough

Wrapping text in double tildes marks it as removed: this sentence was cut. Like tables, it is on unless you disable it.

Task lists

Task lists need taskListItem: true, because the conservative GFM default leaves them off. Checkboxes render disabled — they record state, they are not inputs.

• Enable the GFM constructs this site needs

• Write one example per feature

• Delete this post and write your own

Footnotes

Footnotes also need opting in via footnoteDefinition: true.¹ Each reference links to a collected section at the end of the page, and each definition links back.

Alerts

githubAlerts rewrites GitHub-style alert blockquotes into components. The five types are NOTE, TIP, IMPORTANT, WARNING, and CAUTION — see the GitHub alerts docs.

Code blocks

Syntax highlighting and heading anchor links are always on: no config key enables them, and every ## heading above already has an id you can link to. codeEnrichment adds the three annotations below — see the code enrichment docs.

A title="…" token in the fence renders a filename bar above the block. That one is core behaviour, documented under code block title.

export function greet(name: string) {
  return `Hello, ${name}`;
}

A brace-delimited range after the language highlights those lines — here, line 2.

const posts = await getCollection("blog");
const latest = posts.at(-1);
console.log(latest?.data.title);

Trailing [!code ++] and [!code --] comments mark added and removed lines. The marker comment itself is stripped from the output.

const posts = await getCollection("blog");
const sorted = posts.sort(byDate); const sorted = [...posts].sort(byDate); 

Slash-delimited phrases in the fence metadata emphasise every occurrence of that phrase in the visible code.

export async function paths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({ params: { slug: post.slug } }));
}

Table of contents

The list under the TOC heading near the top of this page was generated. The headingMarkerToc feature watches for a heading whose text matches the configured anchor — TOC by default — and inserts links to the headings that follow. See the heading-marker TOC docs.

What is not enabled

zfb ships more opt-in features than this starter uses — code tabs, ruby annotations, mermaid diagrams, image dimensions, link validation, transclusion, and others. The README.md in the project root lists them with their config keys, and the markdown features index is the complete map.