← 开发日志

代码块元信息:放弃 remark,改用 Shiki transformer

决策 慢慢写(本站)

想给代码块加文件名显示,remark 插件方案写进去的属性被 Astro 的 Shiki 渲染整个丢弃,最终用 shikiConfig.transformers 在 pre 上挂 data-meta。

备选方案

  1. remark 插件往 node.data.hProperties 写 data-meta —— 实测无效:Shiki 重新生成 <pre>,属性丢失;
  2. 前端正则解析 class 里的 language-xxx —— 拿不到 title 元信息;
  3. shikiConfig.transformers 的 pre(node) 钩子 —— this.options.meta.__raw 能拿到完整围栏 meta,且写在最终 HTML 上。

决定

用方案 3。语言名直接读 Shiki 输出的 data-language,不需要额外解析。附带收益:wrap: false 让长代码横向滚动,不再折行。

← 返回开发日志