Astro 中如何使用 astrojs/prism 的 Prism 组件与 runHighlighterWithAstro 实现代码高亮【免费下载链接】astroThe web framework for content-driven websites. ⭐️ Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/as/astro在 Astro 项目里展示代码片段时原生precode只能输出纯文本。astrojs/prism这个包仓库内路径 packages/astro-prism/README.md基于prismjs提供两种服务端高亮方式一个可直接在.astro文件里使用的Prism /组件以及一个导出函数runHighlighterWithAstro用于在代码中自行调用高亮逻辑。本文按“安装 → 使用组件 → 使用函数 → 验证输出”的顺序说明如何在你自己的 Astro 站点中完成代码高亮。前置条件根据 packages/astro-prism/package.jsonNode.js 版本要求22.12.0engines字段。运行时依赖为prismjs ^1.30.0随包安装无需单独引入。当前包版本为4.0.2高亮在构建/渲染时完成服务端不依赖浏览器端脚本。安装npm install astrojs/prism高亮只负责给 HTML 片段加上 token 结构token 的颜色需要 CSS 主题提供。astrojs/prism本身不附带主题样式需引入一个 Prism 主题样式表如 Prism 官方主题仓库文档没有指定使用哪一个由你自行选择。使用Prism /组件Prism /组件在.astro文件中直接使用。README 给出的用法--- import { Prism } from astrojs/prism; --- Prism langjs code{const foo bar;} /组件接受三个 props见 Prism.astro 的 Props 接口code: string—— 必填要高亮的代码文本lang?: string—— 可选Prism 语言标识如js不传时按plaintext处理class?: string—— 可选附加到外层pre上的类名。组件的渲染结果是pre套code结构language-lang类同时写在pre和code上高亮后的 HTML 通过set:html注入pre class你的 class language-jscode classlanguage-js set:html{html} //pre多行代码建议用模板字符串传入例如以下代码块内容为示例可自行替换--- import { Prism } from astrojs/prism; --- Prism langastro code{ --- const title Hello; --- h1{title}/h1 } /langastro是合法取值高亮器会为 astro 语言单独注册语法见下文语言加载规则。直接调用 runHighlighterWithAstro当不在组件上下文、需要拿到高亮后的 HTML 字符串时例如在端点、工具函数或自定义渲染逻辑中可以导入内部导出的runHighlighterWithAstro。函数签名见 src/highlighter.tsrunHighlighterWithAstro(lang: string | undefined, code: string)README 中的官方示例astro语言注意该示例调用未加await实际使用时这是异步函数应等待其返回import { runHighlighterWithAstro } from astrojs/prism; runHighlighterWithAstro( --- const helloAstro Hello, Astro!; --- div{helloAstro}/div , astro, );返回值为对象{ classLanguage, html }classLanguage形如language-lang可直接用作 classhtml是 Prism 高亮后的 HTML 片段未找到对应语法时回退为原始code文本。语言加载规则runHighlighterWithAstro对lang的处理逻辑来自 src/highlighter.ts在传入语言前值得了解lang为空时按plaintext处理classLanguage为language-plaintextlang ts时内部映射为typescript并加载lang astro时先加载typescript再通过addAstro注册 astro 语法。addAstrosrc/plugin.ts以 markup 为基础扩展出 astro 语法若 TypeScript 语言未加载成功astro 的 script 部分会按 JavaScript 处理并打印警告Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.其他语言先确保加载markup-templatingPrism 对多种语言要求它存在再加载目标语言。如果最终Prism.languages[lang]仍不存在会打印警告Unable to load the language: lang此时html就是未高亮的原始代码页面不会报错。在 Cloudflare Workers 环境下语言加载走单独实现 src/loadLanguages-workerd.ts通过package.json的#prism-loadLanguagesimports 条件解析Prism /组件在该环境下的修复见 CHANGELOG.md 4.0.2 条目。验证结果运行npm run build或npm run dev访问页面确认构建过程没有出现Unable to load the language: xxx警告——出现说明该语言标识无法加载Prism会退化为纯文本输出。查看页面源码确认输出结构为pre classlanguage-xxxcode classlanguage-xxx且code内部包含 Prism 生成的 token 标记span classtoken ...而非原始代码文本。浏览器中代码片段呈现语法着色说明 Prism 主题 CSS 已正确生效结构正确但无色时检查主题样式表是否引入。参考文件packages/astro-prism/README.md —— 组件与runHighlighterWithAstro的官方用法packages/astro-prism/Prism.astro —— 组件实现与 props 定义packages/astro-prism/src/highlighter.ts —— 语言加载与高亮逻辑packages/astro-prism/src/plugin.ts —— astro 语法注册【免费下载链接】astroThe web framework for content-driven websites. ⭐️ Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/as/astro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考