本技能介绍如何将 @tanstack/highlight 集成到 Markdown 渲染管线中，用于对 Markdown 文档里的代码围栏（fenced code block）进行语法高亮。它建立在 configure-selective-highlighting 技能之上，建议先阅读该技能以了解注册表与打包行为。
用途
在 Markdown 渲染流程中高亮代码块，同时避免重复生成 <pre><code> 外层包装。适用于应用自行掌控 Markdown 遍历、或使用 remark/rehype 管线的场景。
主要能力
- 通过 createTanStackMarkdownHighlighter 连接 TanStack Markdown，不重复其 <pre><code> 包装。
- 通过 renderCodeFence 直接渲染已解析的围栏，返回结果包含 copyText、htmlMarkup、lang、title、tokens、decorations 和 lineNumbers。
- 通过 createThemeCss 为 TanStack Markdown 容器设置主题，支持 light/dark 选择器、代码块选择器和行号选择器。
- 通过 remarkHighlightCodeBlocks 在 remark-rehype 之前转换 MDAST，插件会把结构化 HAST 数据附加到替换后的 MDAST 节点上，无需原始 HTML。
- 通过 rehypeHighlightCodeBlocks 转换已有的 HAST 代码块，读取 <pre><code class="language-*"> 并跳过已标记 th-code 的块。
- 通过 parseCodeFenceMeta 解析标准围栏注解，如 title、行号、行标注等；行标注从 1 开始且包含端点，解析出的 class 由应用自行设置样式。
使用方式
- 连接 TanStack Markdown：使用 createTanStackMarkdownHighlighter(highlighter) 创建 highlightMarkdownCode。
- 直接渲染围栏：调用 renderCodeFence({ code, lang, meta }, highlighter)。
- 主题化容器：使用 createThemeCss 配置 light/dark 主题与选择器。
- Remark 管线：在 unified 中先 .use(remarkHighlightCodeBlocks, { highlighter, lineNumbers }) 再 .use(remarkRehype)，最后 rehypeStringify。
- Rehype 管线：使用 rehypeParse（fragment: true）、rehypeHighlightCodeBlocks、rehypeStringify。
- 解析围栏元数据：调用 parseCodeFenceMeta('title="App.tsx" {2,4-6} ins={8} error={11} lineNumbers')。
常见错误（资料中列出的注意事项）
- 混淆 Markdown 源语言与适配器：Markdown 语言用于高亮 Markdown 源码，适配器用于转换文档树中的围栏块。
- 在 HAST 转换之后运行 Remark：Remark 适配器必须在 remark-rehype 转换树之前看到 MDAST 代码节点。
- 在不需要时启用原始 HTML：结构化结果已携带 hName、hProperties 和 hChildren，应使用 remarkCodeNodeToMdast 而非 remarkCodeNodeToHtml。
- 传入无法被发现的 Rehype 结构：适配器在 pre 下发现 code 子节点并读取其第一个 language-* class。
- 混用精确与块归一化 API：highlight() 保留精确输入，而围栏与块数据辅助函数会裁剪尾部块空白；服务端与客户端应使用相同的块级辅助函数。
- 结构化输出与原始 HTML 的取舍：在 Markdown 管线中优先使用结构化 MDAST/HAST 转换，仅在应用边界处使用生成的 htmlMarkup。
- 精确源码与块归一化的取舍：服务端与客户端使用同一块级辅助函数，混用核心 highlight() 与 Markdown 辅助函数会改变尾部空白行为。
适用场景
需要在 Markdown 渲染中高亮代码块、解析围栏元数据（标题、行号、行标注）、并与 remark/rehype 管线或 TanStack Markdown 渲染器集成的项目。
限制
资料未提供该技能的具体收费、价格、平台支持范围或性能数据，这些信息暂未提供。