- Item 1
- Item 2
- Item 3

:::

Custom Titles

Add custom titles to containers:

::: info Custom Title
Content with a custom title.
:::

::: tip Pro Tip
Advanced technique for experts.
:::

GitHub-Flavored Alerts

BunPress supports GitHub's alert syntax:

Note

> [!NOTE]
> Useful information that users should know.

Tip

> [!TIP]
> Helpful advice for doing things better.

Important

> [!IMPORTANT]
> Key information users need to know.

Warning

> [!WARNING]
> Urgent info that needs immediate attention.

Caution

> [!CAUTION]
> Advises about risks or negative outcomes.

Code Blocks

Basic Syntax Highlighting

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

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

Line Highlighting

Highlight specific lines:

```typescript{2,4-5}
function example() {
  const highlighted = true
  const normal = false
  return highlighted
    && normal
}
```

Line Numbers

Show line numbers:

```typescript:line-numbers
const first = 1
const second = 2
const third = 3
```

Code Diffs

Show added and removed lines:

```typescript
const oldValue = 'before'
const newValue = 'after'
```

Error and Warning Markers

Highlight errors and warnings:

```typescript
const valid = true
const invalid = undefined
const suspicious = null
```

Code Groups

Display multiple code variants in tabs:

<div class="code-group" id="code-group-5ea9562a7157">
  <div class="code-group-tabs">
    <button class="code-group-tab active" onclick="switchCodeTab('code-group-5ea9562a7157', 0)">npm</button><button class="code-group-tab" onclick="switchCodeTab('code-group-5ea9562a7157', 1)">yarn</button><button class="code-group-tab" onclick="switchCodeTab('code-group-5ea9562a7157', 2)">pnpm</button><button class="code-group-tab" onclick="switchCodeTab('code-group-5ea9562a7157', 3)">bun</button>
  </div>
  <div class="code-group-panels">
    <div class="code-group-panel active" data-panel="0">
  <pre data-lang="bash"><code class="language-bash"><span class="line"><span class="token source-bash" style="">npm</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">install</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">@</span><span class="token source-bash" style="">stacksjs</span><span class="token source-bash" style="">/</span><span class="token source-bash" style="">bunpress</span></span>
<span class="line"></span></code></pre>
</div>
<div class="code-group-panel" data-panel="1">
  <pre data-lang="bash"><code class="language-bash"><span class="line"><span class="token source-bash" style="">yarn</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">add</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">@</span><span class="token source-bash" style="">stacksjs</span><span class="token source-bash" style="">/</span><span class="token source-bash" style="">bunpress</span></span>
<span class="line"></span></code></pre>
</div>
<div class="code-group-panel" data-panel="2">
  <pre data-lang="bash"><code class="language-bash"><span class="line"><span class="token source-bash" style="">pnpm</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">add</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">@</span><span class="token source-bash" style="">stacksjs</span><span class="token source-bash" style="">/</span><span class="token source-bash" style="">bunpress</span></span>
<span class="line"></span></code></pre>
</div>
<div class="code-group-panel" data-panel="3">
  <pre data-lang="bash"><code class="language-bash"><span class="line"><span class="token source-bash" style="">bun</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">add</span><span class="token source-bash" style=""> </span><span class="token source-bash" style="">@</span><span class="token source-bash" style="">stacksjs</span><span class="token source-bash" style="">/</span><span class="token source-bash" style="">bunpress</span></span>
<span class="line"></span></code></pre>
</div>
  </div>
</div>

Code Imports

Import code from external files:

<<< @/snippets/example.ts

<<< @/snippets/example.ts{2-5}

<<< @/snippets/example.ts#region-name

Tables

Basic Tables

| Feature | Status |
|---------|--------|
| Containers | Supported |
| Alerts | Supported |
| Code Groups | Supported |

Aligned Tables

| Left | Center | Right |
|:-----|:------:|------:|
| L1 | C1 | R1 |
| L2 | C2 | R2 |

Inline Formatting

Text Styles

**Bold text**
*Italic text*
~~Strikethrough~~
`inline code`

Bold text, Italic text, Strikethrough, inline code

Subscript and Superscript

H2O (subscript)
E=mc2 (superscript)

Highlighting

highlighted text

Badges

Add inline badges:

<Badge type="info" text="v2.0" />
<Badge type="tip" text="New" />
<Badge type="warning" text="Beta" />
<Badge type="danger" text="Deprecated" />

Emoji

Use emoji shortcodes:

:tada: :rocket: :sparkles: :fire: :heart:

Custom Header Anchors

Customize heading anchor IDs:

## My Custom Heading

Inline Table of Contents

Insert TOC anywhere in your content:

<!--INLINE_TOC_PLACEHOLDER-->

File Includes

Include content from other markdown files:

<!--@include: ./shared/header.md-->

Content here...

<!--@include: ./shared/footer.md-->

Images

Basic Images

![Alt text](/images/screenshot.png)

Images with Captions

![Screenshot of BunPress](/images/screenshot.png "BunPress Dashboard")

Images are automatically lazy-loaded for better performance.

External Links

External links automatically:

• Open in a new tab (target="_blank")
• Include security attributes (rel="noreferrer noopener")
• Show an external link icon

Configuring Features

Enable or disable features in your config:

const config: BunPressOptions = {
  markdown: {
    features: {
      containers: true,
      githubAlerts: true,
      codeBlocks: {
        lineHighlighting: true,
        lineNumbers: true,
        focus: true,
        diffs: true,
      },
      codeGroups: true,
      emoji: true,
    },
  },
}

See the Configuration Guide for all available options.