用途:为 @tanstack/highlight 高亮结果设置主题样式,并在代码上添加行号、行装饰和精确诊断标注。
主要能力:createThemeCss 可同时生成明暗两套 CSS(默认选择器 :root 与 .dark),也可用 themes 数组按选择器切换命名主题,该模式与明暗配对模式互斥。可覆盖 codeBlockSelector、lineNumbersSelector 等选择器以适配自有渲染器包装类。高亮时可开启 lineNumbers,并传入 decorations:行坐标从 1 开始且含端点;字符范围使用从 0 开始、结束端不包含的 UTF-16 偏移,可为标注附带 data 诊断信息。
使用方式:从 @tanstack/highlight/theme 导入 createThemeCss,从 @tanstack/highlight/themes/... 导入主题对象。同一份高亮 HTML 可通过 CSS 在明暗间切换,无需为两种模式重复生成标记。行装饰会激活 th-line 包装元素。
限制:主题对象只含颜色;字体、对比度与标注外观需由应用 CSS 定义,渲染器只输出 class 和转义后的 data 属性,不会为标注类设置样式。自定义主题应基于完整主题对象展开,避免缺失 token。行坐标与字符坐标规则不同,易误用。