Basic Components

Standard Markdown and MDX typography elements available in documentation pages.

These are the standard Markdown and MDX elements styled through zudo-doc's design token system. No imports are needed.

Headings

Headings from h2 to h4 appear in the table of contents sidebar.

Heading 3

Heading 4

## Heading 2
### Heading 3
#### Heading 4

Overriding Content Typography

The page-title, content-heading, prose, and link typography above is driven by component tokens — --zdc-* CSS custom properties the @takazudo/zudo-doc package exposes as override seams. Because the components ship from the package (you cannot edit them directly), these tokens are your scope: redefine any of them in your own :root to rebrand the content area across every page, with no !important and no eject.

:root {
  --zdc-doc-title-font: "Georgia", serif;
  --zdc-doc-title-weight: 800;
}

For the full rundown — the ownership-inversion rationale, how these fit the three-tier token story, chrome tokens (card radius, TOC width, nav active styles), and why they are not editable in the Design Token Panel — see Component Tokens.

Text Formatting

Bold text, italic text, and strikethrough. Combine them: bold and italic.

**Bold text**, *italic text*, and ~~strikethrough~~.
Combine them: ***bold and italic***.

Inline Code

Use backticks to mark inline code within a sentence.

Use backticks to mark `inline code` within a sentence.

Code Blocks

Fenced code blocks use zfb's build-time semantic class-mode highlighter. Specify the language after the opening backticks. See the Code Blocks page for the full rundown.

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

```ts

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

```

Supported Languages

zfb's class-mode highlighter supports a wide range of languages. Common ones include:

If a language identifier isn't recognised, the block falls back to a plain unhighlighted render.

Unordered Lists

• First item

• Second item

  • Nested item

  • Another nested item

    • Deeply nested

• Third item

- First item
- Second item
  - Nested item
  - Another nested item
    - Deeply nested
- Third item

Ordered Lists

1. First step

2. Second step

3. Sub-step one

4. Sub-step two

5. Third step

1. First step
2. Second step
   1. Sub-step one
   2. Sub-step two
3. Third step

Blockquotes

This is a blockquote. It can span multiple lines and supports formatting within it.

> This is a blockquote. It can span multiple lines
> and supports **formatting** within it.

Tables

| Feature    | Status      | Notes              |
| ---------- | ----------- | ------------------ |
| MDX        | Supported   | Built into zfb     |
| zfb class mode | Built-in | Code highlighting |
| Tailwind   | v4          | Token-based design |

Links

Internal link: Getting Started

External link: Example external site

Internal link: [Getting Started](../getting-started/index.mdx)

External link: [Example external site](https://example.com)

Horizontal Rules

Use three dashes to create a horizontal rule:

---