写作组件测试

本页把引擎支持的每一种写作语法各写一次，用于肉眼验收渲染效果。带 语法 标注的说明不会被渲染成品，是给你对照看的。

行内语法

按 Ctrl + C 复制，当前版本 v1.0，其中 编译期 是关键。

语法是成对的定界符：[[按键]]、{{徽章}}、==高亮==。行内语法可出现在表格、列表、标题等任何位置，但它不作用于代码块内部。

提示块

围栏语言名即等级，四级共用同一套外壳；语言名之后可跟可选标题，省略时回落各等级的默认文案。

块内正文走正常 markdown 渲染，加粗、行内代码、列表都照常生效。

目录树

语法是 Markdown 无序列表，缩进即层级，名称尾部带 / 表示目录，| 后接可选注释。

终端

语法是围栏代码块，以 $ 开头的行按命令渲染，其余按输出渲染。

折叠块

语法是围栏代码块，第一行作标题，其余为折叠内容；内容整体转义、保留换行，不渲染 Markdown。

流程

语法是每行「节点 | 可选说明」，节点之间自动画箭头。

时间线

语法是每行「时间 | 标题 | 描述（可省略）」，竖线由 CSS 绘制。

步骤

语法是每行「标题 | 描述（可省略）」，序号由编译期自动生成，不写进内容里。

流程图与图表

mermaid 在编译期只拦截并产出容器，图表由运行时按需渲染。

graph LR
  A[Markdown] --> B[编译期插件]
  B --> C[静态 HTML]
  C --> D[浏览器交互]

echarts 块内必须是合法 JSON，编译期只校验并产出容器，非法时降级为纯文本展示源码。

{
  "xAxis": { "type": "category", "data": ["编译期", "运行期"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "bar", "data": [100, 5] }]
}

卡片网格

语法是每行「标题 | 描述 | 链接（可省略）」，带链接时整卡可点击。

链接卡

语法是每行「标题 | 描述 | 网址」，仅 http(s) 会被渲染成可点卡片，其他协议降级为静态卡。

图集

语法是每行「图片地址 | 说明（可省略）」，复用正文图片的灯箱。

数据卡与进度条

属性列表

语法是每行「属性名 | 值」。

选项卡

语法是用 @tab 标签名 分节，纯 CSS 切换，页内容整体转义、不渲染 Markdown。

代码组

语法同样是 @tab 标签名 分节，区别在于标签名会被当作语言名送去 shiki 编译期高亮。

npm i -D @hello/vdoc

pnpm add -D @hello/vdoc

export default defineConfig({ title: 'hello' })

定义列表

SSG

静态站点生成器，构建期把内容直出为 HTML 文件

编译期

构建时执行，产物是静态文件

运行期

浏览器里执行的少量交互逻辑

问答

答案默认折叠，点击问题展开。

对比栏

用 @tab 栏标题 分节，栏内每行一个条目。

引用卡

语法是第一行为内容，之后「作者 | 出处」一行可省略。

任何可以用编译期解决的问题，都不应该留给运行时。

没有署名行也可以，只写内容即可。

标准 Markdown

除上述组件外，基础语法照常可用。

• 无序列表项一
• 无序列表项二

1. 有序列表项一
2. 有序列表项二

普通引用块仍然可用，不参与任何组件管线。

行内 code、加粗、斜体、链接 都是标准行为。

// 普通代码块走 shiki 编译期高亮，不进组件管线
const greeting = 'hello'