用途
docs-features 是一个用于构建文档元数据的技能，属于 @tanstack/markdown 生态。它建立在 render-markdown 基础之上，需先阅读后者了解解析器选项、AST 复用、渲染和核心信任边界。该预设组合了 GitHub 风格提示框（callouts）、经过转换的注释组件和标题收集能力，用于生成解析后的文档元数据与自定义元素。
主要能力
- 提示框支持：GitHub 风格 callout，如
> [!TIP] Parse once。 - 标题收集：从文档中收集 headings 元数据，默认跳过名为 tabs 的组件内的所有标题；可用
docsMarkdownExtensions({ collectHeadings: false })禁用收集，或传入含skipComponentNames的选项对象替换默认跳过集。 - 标签页（tabs）转换：支持多种变体。heading tabs 在最浅层标题处切分；file tabs 选取围栏代码块并以
title=或file=作为标签；package-manager tabs 消费framework: package...行和共享package...行，在创建元数据后移除其源子节点；bundler tabs 仅接受 Vite 和 Rsbuild 标题小节。当所需结构缺失时，每种转换都原样返回原始组件。 - framework 面板：框架块要求一级选择器标题，会生成 md-framework-panel 子节点、小写框架名、标记嵌套标题，并按框架暴露代码块元数据。
- 组件元数据读取：ComponentNode.properties 保存字符串，含 JSON 的值会被 HTML 渲染器序列化为转义后的 HTML 属性，须由消费端应用解析。
使用方式
创建一份扩展数组并同时用于解析与渲染：
import { renderHtml } from '@tanstack/markdown/html'
import { parseMarkdown } from '@tanstack/markdown/parser'
import { docsMarkdownExtensions } from '@tanstack/markdown/extensions/docs'
const extensions = docsMarkdownExtensions()
const document = parseMarkdown(source, { extensions })
export const headings = document.headings
export const html = renderHtml(document, {
extensions,
headingAnchors: true,
})
标签页内容形状按变体不同：heading tabs 用标题切分；file tabs 使用围栏代码块；package-manager tabs 使用 framework: package... 行；bundler tabs 使用 Vite/Rsbuild 标题小节。
适用场景
适用于需要为文档站点准备结构化元数据（标题、标签页、框架面板等）并自行控制 UI 交互与渲染的场景，例如为多框架（React、Solid）或多包管理器生成代码片段面板。
限制与边界
- 预设只生成元数据和自定义元素，不安装文档 UI 行为；标签页的交互性须由站点自行绑定模型、控件与渲染器组件。
- docs 转换只增强受信任的仓库作者内容，不执行 MDX、JSX 或 JavaScript 表达式。
- 高亮输出是受信任的 HTML，应在构建时或服务端进行高亮，并在生产流水线中应用相应检查。
- 围栏元数据仅填充 AST 和高亮选项，分词、主题和 CSS 都不在本包范围内，需自行配置 highlighter。
- 未匹配的 start 注释会被当作空组件消费，其后的正文保持为普通 Markdown。
- 当完整预设引入未使用行为或打包体积时，建议按需导入单个扩展入口点；内置注释组件或转换无法表达所需确定性语法时，使用 custom-extensions。
- 需要将 md-tab-panel、md-framework-panel 等标签映射到框架组件时，使用 React 或 Octane 渲染器技能。
官方来源：本技能描述对应 docs/guides/docs-preset.md 以及 src/extensions/comment-components.ts、src/extensions/tabs.ts 等实现。