Code Block Types

Render flowcharts, sequence diagrams, class diagrams, Gantt charts, and more from a declarative DSL.

              ```mermaid
graph TD
  A[开始] --> B{判断}
  B -->|是| C[执行]
  B -->|否| D[结束]
```
            

Render bar, line, pie, scatter, and other chart types from a simple JSON configuration.

              ```chart
{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3"],
    "datasets": [{"label": "收入", "data": [120, 190, 30]}]
  }
}
```
            

Render block-level math expressions with KaTeX. Inline math is also supported with $...$ syntax.

Inline: $E = mc^2$

              ```math
E = mc^2

\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
```
            

Safe inline calculator. Each line is either an assignment (name = expr) or a bare expression. Supports +, -, *, /, **, % and built-in functions: sum, avg, min, max, round, abs, sqrt, sin, cos, tan.

Variables defined in earlier lines are available to later lines. Comments start with #.

              ```calc
# 计算项目成本
开发工时 = 120
时薪 = 350
人工成本 = 开发工时 * 时薪
服务器费用 = 2400
总成本 = 人工成本 + 服务器费用
```
            

Parse CSV content and render as an interactive, sortable data table with header detection.

              ```csv
姓名,部门,入职年份
张三,工程,2020
李四,设计,2021
王五,产品,2019
```
            

Render a multi-column pricing comparison table. The first row defines plan names; subsequent rows are features.

              ```pricing
## Free | Pro | Enterprise
价格 | $0 | $9/月 | 联系我们
文档数 | 无限 | 无限 | 无限
导出格式 | HTML | HTML + PDF | 全部
水印 | 有 | 无 | 无
自定义域名 | - | - | 支持
```
            

Render labeled progress bars. Each item has a label, a value (0–100), and an optional custom color.

              ```progress
---
items:
  - label: "TypeScript"
    value: 90
  - label: "Rust"
    value: 75
    color: "#f46623"
  - label: "Python"
    value: 68
---
```
            

Highlight important information with styled callout boxes. The language identifier is the callout type: warning, note, tip, danger, info, success.

              ```warning
注意：此操作不可撤销。请在继续之前备份您的数据。
```

```tip
提示：您可以通过顶栏切换主题，实时预览效果。
```
            

Group content into switchable tabs. Separate each tab with --- and use ## for tab titles.

              ```tabs
## macOS
按 ⌘ + Shift + F 进入专注模式

---

## Windows / Linux
按 Ctrl + Shift + F 进入专注模式

---

## 通用
按 Escape 退出专注模式
```
            

Display numbered step-by-step instructions. Each item in the YAML items list has a title, content, and optional icon.

              ```steps
---
items:
  - title: "安装依赖"
    content: "运行 npm install 安装所有依赖包"
    icon: "📦"
  - title: "配置环境变量"
    content: "复制 .env.example 为 .env，填写必要的环境变量"
  - title: "启动开发服务器"
    content: "运行 npm run dev，访问 http://localhost:4321"
    icon: "🚀"
---
```
            

Collapsible content sections. Use collapse for a single panel, accordion for multiple panels.

YAML front matter configures title, open (default false), and content.

              ```collapse
---
title: "为什么选择围栏代码块作为扩展点？"
---
围栏代码块是 CommonMark 标准的一部分，语法简洁，工具链支持广泛，
天然适合承载结构化数据，且不破坏纯文本的可读性。
```
            

Render content cards with title, subtitle, icon, tags, body text, and optional link. Use cards for a responsive grid.

cards {cols=2} sets the grid column count (default: 3).

              ```cards {cols=2}
---
items:
  - title: "Design Token 系统"
    icon: "🎨"
    tags: [主题, CSS]
    body: "所有渲染元素共享一套 Token，切换主题时全部同步变化。"
  - title: "代码块扩展机制"
    icon: "🔌"
    tags: [扩展点, DSL]
    body: "围栏代码块是唯一扩展点，语言标识符决定渲染行为。"
---
```
            

Split content into equal-width columns. Each item has an optional title and body text. Collapses to single column on mobile.

columns {cols=3} sets the number of columns (default: 2).

              ```columns {cols=2}
---
items:
  - title: "本地优先"
    body: "所有数据存储在浏览器 IndexedDB 中，不上传服务器，离线可用。"
  - title: "零配置导出"
    body: "一键导出 HTML、PDF、图片，导出文件完全独立，不依赖外部资源。"
---
```
            

Render a responsive image grid. Each item has a src (URL), optional alt text, and optional caption.

gallery {cols=2} sets the grid column count (default: 3).

              ```gallery {cols=2}
---
items:
  - src: "https://picsum.photos/seed/a/800/600"
    alt: "示例图片 1"
    caption: "默认主题 · 亮色"
  - src: "https://picsum.photos/seed/b/800/600"
    alt: "示例图片 2"
    caption: "Tech Blog 主题 · 暗色"
---
```