代码块元信息:放弃 remark,改用 Shiki transformer
想给代码块加文件名显示,remark 插件方案写进去的属性被 Astro 的 Shiki 渲染整个丢弃,最终用 shikiConfig.transformers 在 pre 上挂 data-meta。
备选方案
- remark 插件往
node.data.hProperties写data-meta—— 实测无效:Shiki 重新生成<pre>,属性丢失; - 前端正则解析 class 里的 language-xxx —— 拿不到 title 元信息;
- shikiConfig.transformers 的
pre(node)钩子 ——this.options.meta.__raw能拿到完整围栏 meta,且写在最终 HTML 上。
决定
用方案 3。语言名直接读 Shiki 输出的 data-language,不需要额外解析。附带收益:wrap: false 让长代码横向滚动,不再折行。