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

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 support syntax highlighting via syntect, run by zfb's Rust pipeline at build time. 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

syntect 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     |
| syntect    | 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:

---