SuperAPI AI 工具集

tanstack-highlight-configure-selective-highlighting

通用与其它

查看项目

更新于 10-16 00:02

技能介绍

用途:为 @tanstack/highlight 配置按需(选择性)的语言注册表,只打包实际需要的语言,并保证服务端渲染与客户端水合使用同一份注册表。

主要能力:通过 createHighlighter 创建不可变注册表,从 @tanstack/highlight/core 与 @tanstack/highlight/languages/* 直接引入语言;支持 normalizeLanguage 处理别名(如 typescript→ts、bash→shell);可配置 fallbackLanguage(默认 plaintext,也可设为 json 等);支持嵌入式语言(如 HTML 中的 css、js)需显式注册。

使用方式:建立一个服务端与客户端共用的同构模块,例如从 core 引入 createHighlighter,再从各语言子路径引入 css、html、js、json、shell、ts、tsx,导出 highlighter = createHighlighter({ languages: [...] })。渲染时调用 highlighter.renderCodeBlockData({ code, lang, lineNumbers: true }) 或 highlightToHtml(code, { lang })。注册表应创建一次并复用,不要按代码块重建。

适用场景:文档站、博客、组件库等需要代码高亮的 SSR/客户端应用,尤其是希望控制客户端体积、只保留少数语言的场景。

限制与注意:根入口 @tanstack/highlight 会构建并保留全部语言,水合客户端应改用 core 加语言子路径;未注册或省略的语言不会自动检测,而是走 fallback;服务端与客户端注册表必须一致,否则水合后归一化与嵌入委托结果会不同;未注册的嵌入语言(如 HTML 中的 script/style 内容)会保持纯文本。资料未提供具体版本、性能数据与更多语言清单。