给自留地加了几样新东西：代码高亮、提示框、公式、流程图和暗色模式 / yophon.

写东西写久了，朴素的 Markdown 就有点不够用了：想强调一段话只能加粗，代码块配色发灰，想画个流程只能贴张图，想写个公式得截图。这次趁手把博客的渲染管线整个升级了一遍，记录一下加了哪些能力，这篇本身就是一篇活的演示。

代码高亮

代码块换成了 Shiki（VS Code 同款引擎），亮/暗两种主题，跟着站点主题自动切换。左上角显示语言，鼠标悬停时右上角有复制按钮：

// 决定一篇文章是否公开发布
interface Post {
  title: string
  tags: string[]
  draft?: boolean
}

export function isPublic(post: Post): boolean {
  return post.draft !== true
}

不同语言会标上不同的标签，比如一段 CSS：

.callout {
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

或者几条命令：

bun add shiki
bun run build

提示框和折叠块

用 :::类型 写出带颜色的提示框，一共 tip / info / note / warning / danger 五种：

小技巧

正文里照样能写加粗、行内代码 和链接。

注意

执行不可逆操作（删库、强制推送）之前，先确认你知道自己在干什么。

需要藏起来的细节，可以折叠：

点开看实现原理

后端用 marked 的自定义扩展把 ::: 块解析成对应的 HTML，再过一遍 DOMPurify 净化，前端只负责套样式。

数学公式

接了 KaTeX，而且是服务端渲染——前端不用跑额外的 JS，只加载一份 CSS。行内公式像这样 $a^{2} + b^{2} = c^{2}$ ，独立公式块则会居中显示：

\int_{- \infty}^{\infty} e^{- x^{2}} d x = π

流程图

代码块标 mermaid，就会在前端渲染成图。mermaid 比较大，所以是按需懒加载的，只有文章里真有图表时才会去拉，暗色模式下还会自动切深色主题：

graph TD
  A[写 Markdown] --> B{需要图表?}
  B -->|是| C[mermaid 客户端渲染成 SVG]
  B -->|否| D[服务端直接出 HTML]
  C --> E[文章页]
  D --> E

图集

可以把一组图片嵌进正文，点开是带翻页的灯箱（← → 切换，Esc 关闭）：

视频嵌入

也能嵌视频，自动按 16:9 响应式排布（限定了 YouTube / Bilibili / Vimeo 几个来源，不会让任意 iframe 进来）：

阅读体验

除了正文能写的这些，页面本身也顺手打磨了一轮：

暗色模式：右上角点日/月图标切换，首次访问跟随系统，之后记住你的选择
侧边目录：长文右侧自动生成目录，滚动时高亮当前章节、点击平滑跳转；窗口窄了会收进右下角的抽屉
图片放大：正文里的普通图片点一下就能全屏看大图
阅读进度：页面顶部有一条细进度条，随滚动填充
封面图：frontmatter 里写个 cover，列表和文章头部就会显示

顺带：frontmatter 换成了完整 YAML

以前文件头是手写的简易解析，只认扁平的 key: value。现在换成了 gray-matter，于是多了几个实用字段：

draft: true —— 草稿，不进列表，但能用链接直接预览
pinned: true —— 置顶，排在列表最前
cover —— 封面图
updated —— 更新日期
series —— 把文章归到一个系列里（这篇就属于「折腾这个博客」系列）

加完这些，写起来终于顺手多了。