代码块类型

用声明式 DSL 渲染流程图、时序图、类图、甘特图等多种图表类型。

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

通过 JSON 配置渲染条形图、折线图、饼图、散点图等常见图表类型。

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

使用 KaTeX 渲染块级数学公式。同样支持行内公式语法 $...$。

行内公式：$E = mc^2$

              ```math
E = mc^2

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

安全内联计算器。每行为赋值式（name = expr）或裸表达式。支持 +−×÷**% 和内置函数：sum avg min max round abs sqrt sin cos tan。

前面行定义的变量可在后续行引用。以 # 开头的行为注释。

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

解析 CSV 内容并渲染为可交互、可排序的数据表格，自动识别表头。

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

渲染多列套餐对比价格表。第一行为套餐名称，后续每行为一项功能对比。

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

渲染带标签的进度条列表。每项包含 label、value（0–100）及可选的自定义颜色。

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

用样式化提示框高亮重要信息。语言标识符即提示类型：warning、note、tip、danger、info、success。

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

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

将内容组织为可切换的标签页。用 --- 分隔各 tab，用 ## 定义标签标题。

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

---

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

---

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

展示带编号的分步操作指引。YAML items 列表中每项包含 title、content 和可选的 icon（emoji 时替代序号）。

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

可折叠内容区域。collapse 为单个折叠面板，accordion 将多个折叠面板组合为手风琴展示。

YAML 头部配置 title、open（默认 false）和正文内容。

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

渲染带标题、副标题、图标、标签、正文和可选链接的内容卡片。cards 块支持多列响应式网格布局。

cards {cols=2} 设置网格列数，默认为 3 列。

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

将内容分为等宽多列。每项包含可选的 title 和 body 文字，在移动端自动折叠为单列。

columns {cols=3} 设置列数，默认为 2 列。

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

渲染响应式图片网格。每项包含 src（图片 URL）、可选 alt 文字和可选 caption 标题。

gallery {cols=2} 设置网格列数，默认为 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 主题 · 暗色"
---
```