前端【免费下载链接】highlight.jsJavaScript syntax highlighter with language auto-detection and zero dependencies.项目地址https://gitcode.com/gh_mirrors/hi/highlight.js点击查看免费下载Highlight.js 是一个用 JavaScript 编写的语法高亮库可同时运行在浏览器与服务端不依赖任何第三方框架并内置语言自动检测能力。本文以本仓库 README.md 为骨架结合 src/highlight.js 源码、docs/api.rst 与构建工具完整讲解其基础用法、自定义控制、模块导入、CDN/NPM 获取方式以及从源码构建的流程读完后你可以直接在网页或 Node.js 项目中落地语法高亮并按需裁剪语言包以控制体积。Highlight.js 是什么Highlight.js 是一个开箱即用的语法高亮器它既能处理浏览器中的precode代码块也能作为 CommonJS/ESM 模块运行在 Node.js 服务端可以与几乎任何标记语言搭配不依赖其他框架并具备自动语言检测auto-detection能力。本仓库对应版本为11.12.0见 package.json以 BSD-3-Clause 协议发布。从源码结构看整个库由一个核心引擎src/highlight.js加约 180 个语言定义src/languages/以及上百个配色主题src/styles/组成。核心引擎通过HLJS()工厂函数构建最终导出一个hljs单例并暴露highlight、highlightAuto、highlightElement、highlightAll、configure、registerLanguage等完整 API见 src/highlight.js。浏览器中的基本用法在网页中使用 Highlight.js 的最小配置是引入一个主题 CSS、引入库脚本然后调用highlightAll()link relstylesheet href/path/to/styles/default.min.css script src/path/to/highlight.min.js/script scripthljs.highlightAll();/scripthighlightAll()会自动查找页面中所有precode标签并高亮默认尝试自动检测语言。如果自动检测效果不理想或你希望显式指定语言可以在class属性中声明precode classlanguage-html.../code/pre纯文本代码块plaintext希望套用 Highlight.js 的样式但不做任何高亮时使用plaintext语言precode classlanguage-plaintext.../code/pre跳过某个代码块nohighlight需要完全跳过某个代码块的高亮时使用nohighlight类precode classnohighlight.../code/pre背后的实现机制这些约定并非魔法而是硬编码在核心引擎的默认配置中。在 src/highlight.js 里可以看到默认选项noHighlightRe: /^(no-?highlight)$/i—— 匹配到的类名对应代码块将被跳过languageDetectRe: /\blang(?:uage)?-([\w-])\b/i—— 用于从classlanguage-xxx或classlang-xxx中解析语言名cssSelector: pre code——highlightAll()默认作用的元素选择器。highlightElement()在解析语言时还会同时读取元素自身与父级节点的 class见 blockLanguage因此language-*声明拥有最高优先级。若声明的语言未注册会回退为no-highlight并在控制台输出警告。Node.js 服务端用法在 Node.js 中自动检测并高亮一段代码的最小示例// 加载库与全部语言 hljs require(highlight.js); html hljs.highlightAuto(h1Hello World!/h1).value只加载一组常用语言子集与默认 Web 构建同款集合体积更小hljs require(highlight.js/lib/common);使用指定语言精确高亮推荐避免误检html hljs.highlight(h1Hello World!/h1, {language: xml}).value返回对象的结构highlight()返回的对象包含见 src/highlight.js 与 docs/api.rst属性说明language实际使用的语言名与highlightAuto保持一致relevance整数相关度评分用于自动检测排序value带高亮标记的 HTML 字符串code原始未高亮的代码top当前模式栈顶用于 continuationillegal是否检测到该语言的非法语法highlightAuto()额外返回secondBest属性——即相关度评分第二的语言结果可能不存在。自动检测的逻辑在 highlightAuto 中它对候选语言逐一执行_highlight并按relevance降序排序纯文本始终作为兜底选项同分时优先基类语言如 C 优先于 Arduino平局则保持注册顺序靠前的语言胜出。自定义控制highlightElement 与 configure当初始化时机和范围需要更多控制时可以使用highlightElement与configure两个函数它们让你精确决定高亮什么、何时高亮。例如手动实现一遍highlightAll()的等效逻辑document.addEventListener(DOMContentLoaded, (event) { document.querySelectorAll(pre code).forEach((el) { hljs.highlightElement(el); }); });highlightElement()适合在页面加载后动态渲染的内容、或第三方框架的初始化代码中调用见 docs/api.rst。它默认走语言自动检测同样支持通过 DOM 节点的class指定语言。configure 可配置项configure(options)用于更新全局配置未传入的选项保持不变见 docs/api.rst。核心选项如下选项默认值作用classPrefixhljs-生成标记中类名的前缀用于与样式表保持兼容languagesnull限制自动检测只在这些语言及别名中挑选languageDetectRe/\blang(?:uage)?-([\w-])\b/i配置 CSS 类名到语言名的映射规则例如支持grammar-swift风格命名noHighlightRe/^(no-?highlight)$/i哪些 CSS 类对应的代码块完全跳过cssSelectorpre codehighlightAll()作用的元素选择器ignoreUnescapedHTMLfalse遇到未转义 HTML 的代码块时不打印警告throwUnescapedHTMLfalse遇到未转义 HTML 时抛出HTMLInjectionError异常示例改用自定义类名风格、并去掉类前缀hljs.configure({ noHighlightRe: /^do-not-highlightme$/i, languageDetectRe: /\bgrammar-([\w-])\b/i, // 例如 grammar-swift 风格 classPrefix: // 不追加类前缀 // … 其余选项保持不变 });未转义 HTML 的安全检查highlightElement()在渲染前会检查代码块是否包含子元素即未转义的 HTML。默认情况下这只会打印警告见 src/highlight.js如果throwUnescapedHTML为true则直接抛出HTMLInjectionError。这是防止 XSS 注入的重要防线生产环境建议保证代码块内容为纯文本转义后的形式。自定义 HTML 结构与换行保留官方强烈推荐使用precode包裹代码块——语义清晰且零配置即用。如果坚持使用其他 HTML 元素如div需要特别留意换行的保留。假设你的代码块标记是div classcode.../div手动高亮这些块// 先找到所有 div.code 块 document.querySelectorAll(div.code).forEach(el { // 再逐个高亮 hljs.highlightElement(el); });由于div默认不会保留换行需要额外的 CSS 帮助div.code { white-space: pre; }相比之下pre天然保留换行这也是推荐使用它的原因。你同样可以通过插件在前后处理换行但官方建议优先使用 CSS 方案。与 Vue.js 集成Highlight.js 官方提供了highlightjs/vue-plugin插件配合 Vue 使用非常简洁。示例div idapp !-- 绑定 data 属性 code自动检测语言 -- highlightjs autodetect :codecode / !-- 也可以直接传字面量与指定语言 -- highlightjs languagejavascript codevar x 5; / /div该插件内部仍基于highlightElement/highlightAuto的核心 API适合在 Vue 组件化场景中按数据驱动的方式渲染高亮结果。在 Web Worker 中运行处理超大代码块时可以把高亮任务放进 Web Worker避免阻塞浏览器主线程。主脚本中addEventListener(load, () { const code document.querySelector(#code); const worker new Worker(worker.js); worker.onmessage (event) { code.innerHTML event.data; } worker.postMessage(code.textContent); });worker.js 中onmessage (event) { importScripts(path/highlight.min.js); const result self.hljs.highlightAuto(event.data); postMessage(result.value); };注意 Worker 中通过importScripts加载的是预构建的浏览器脚本highlight.min.js而不是 ES 模块源码。导入方式详解Importing the Library使用前先通过npm或yarn安装见下文获取与安装。Node.js CommonJS /require顶层require会注册全部语言// 加载 highlight.js 库及全部语言 const hljs require(./highlight.js); const highlightedCode hljs.highlightAuto(spanHello World!/span).value为了更小体积加载常用语言子集与默认 Web 构建同一套const hljs require(highlight.js/lib/common);为了最小体积只加载核心并按需注册语言const hljs require(highlight.js/lib/core); hljs.registerLanguage(xml, require(highlight.js/lib/languages/xml)); const highlightedCode hljs.highlight(spanHello World!/span, {language: xml}).valueNode.js ES6 Modules /import默认导入注册全部语言import hljs from highlight.js;更高效的做法是只导入核心、按需注册import hljs from highlight.js/lib/core; import javascript from highlight.js/lib/languages/javascript; hljs.registerLanguage(javascript, javascript);如果构建工具支持 CSS 导入还可以把主题作为模块直接引入import hljs from highlight.js; import highlight.js/styles/github.css;浏览器 ES6 Modules浏览器中请使用highlightjs/cdn-assets包内含预构建的 ES6 模块。按需注册语言import hljs from ./assets/js/highlightjs/cdn-assets/es/core.js; import javascript from ./assets/js/highlightjs/cdn-assets/es/languages/javascript.min.js; hljs.registerLanguage(javascript, javascript);注册全部语言import hljs from ./assets/js/highlightjs/cdn-assets/es/highlight.js;注以上路径是示例实际路径取决于你将包安装/复制到项目中的位置。也可以使用 HTMLimportmap用命名键的方式导入script typeimportmap { imports: { highlightjs: ./assets/js/highlightjs/cdn-assets/es/ } } /script之后即可按命名导入import hljs from highlightjs/core.js; import javascript from highlightjs/languages/javascript.min.js; hljs.registerLanguage(javascript, javascript);全量注册的源码机制require(highlight.js)之所以自动注册全部语言是因为 src/stub.js 在导入核心后遍历builtInLanguages由 Rollup 插件注入把每个语言模块转换为短横线命名如grmr_1c→1c后逐一调用registerLanguage。而 src/core.d.ts 则是核心类型声明lib/core与lib/common等入口由构建脚本生成见 tools/build_node.js。registerLanguage内部还会处理语言别名注册、以及语言定义出错时的降级出错语言会退化为纯文本占位不拖垮整个高亮器见 src/highlight.js。获取与安装Getting the LibraryHighlight.js 可以以托管或自定义构建的浏览器脚本、或服务端模块的形式获取。开箱即用的浏览器脚本同时支持 AMD 与 CommonJS因此可以直接配合 RequireJS 或 Browserify 使用无需从源码构建。不要直接链接 GitHub 上的源码库不能脱离构建直接运行请使用下文任一打包好的渠道。若都不满足需求再参考构建文档 docs/building-testing.rst 自行构建。关于 Almond需要借助优化器为模块命名例如r.js -o namehljs paths.hljs/path/to/highlight outhighlight.js通过 CDN 获取多个主流 CDN 托管了预构建的 Highlight.js内置大量常用语言。通过 CDN 使用时还可以借助 Subresource IntegritySRI增强安全性摘要文件见DIGESTS.md由tools/templates/DIGESTS.md模板生成。cdnjsCommon JSlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/styles/default.min.css script srchttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/highlight.min.js/script !-- 也可以很方便地单独加载额外语言 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/languages/go.min.js/scriptES6 Moduleslink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/styles/dark.min.css script typemodule import hljs from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/es/highlight.min.js; // 也可以很方便地单独加载额外语言 import go from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/es/languages/go.min.js; hljs.registerLanguage(go, go); /scriptjsDelivrCommon JSlink relstylesheet hrefhttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/styles/default.min.css script srchttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/highlight.min.js/script !-- 也可以很方便地单独加载额外语言 -- script srchttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/languages/go.min.js/scriptES6 Moduleslink relstylesheet hrefhttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/styles/default.min.css script typemodule import hljs from https://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/es/highlight.min.js; // 也可以很方便地单独加载额外语言 import go from https://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/es/languages/go.min.js; hljs.registerLanguage(go, go); /scriptunpkgCommon JSlink relstylesheet hrefhttps://unpkg.com/highlightjs/cdn-assets11.12.0/styles/default.min.css script srchttps://unpkg.com/highlightjs/cdn-assets11.12.0/highlight.min.js/script !-- 也可以很方便地单独加载额外语言 -- script srchttps://unpkg.com/highlightjs/cdn-assets11.12.0/languages/go.min.js/scriptES6 Moduleslink relstylesheet hrefhttps://unpkg.com/highlightjs/cdn-assets11.12.0/styles/default.min.css script typemodule import hljs from https://unpkg.com/highlightjs/cdn-assets11.12.0/es/highlight.min.js; // 也可以很方便地单独加载并注册额外语言 import go from https://unpkg.com/highlightjs/cdn-assets11.12.0/es/languages/go.min.js; hljs.registerLanguage(go, go); /script注意CDN 托管的highlight.min.js并未打包所有语言那会非常庞大。默认打包的常用common语言清单可在官方下载页面查看本仓库中 SUPPORTED_LANGUAGES.md 也注明了这一点默认 Web 构建仅包含约 40 种热门语言。下载预构建的 CDN 资源也可以把 CDN 上托管的同一批构建产物下载下来自托管。这些构建发布在独立的 cdn-release 仓库中如果只需要highlight.min.js加一个 CSS 文件可以方便地用curl等工具从 CDN 端点拉取。此外还有highlightjs/cdn-assets这个 npm 包如果你的构建流程更习惯用npm/yarn拉取资源可以直接依赖它。从官网下载页获取官网下载页可以快速生成只包含所需语言的单文件压缩包。注意从源码构建通常能比网页下载得到更小的体积。通过 NPM 包安装包含全部支持语言的 NPM 包可用 NPM 或 Yarn 安装npm install highlight.js # 或 yarn add highlight.js另一个包highlightjs/cdn-assets包含预构建的 CDN 资源包括可在浏览器中直接 import 的 ES6 Modulesnpm install highlightjs/cdn-assets # 或 yarn add highlightjs/cdn-assets当然也可以选择从源码自行构建 NPM 包。从源码构建当前源码始终可在 GitHub 上获取。构建命令如下node tools/build.js -t node node tools/build.js -t browser :common node tools/build.js -t cdn :common从 tools/build.js 的说明可知构建目标的分工目标产物与用途browser默认目标将核心 指定语言打包为highlight.js默认同时生成压缩版除非传入--no-minify并构建 readthedocs 文档与本地 democdn打包核心 指定语言为highlight.min.js并把全部语言与样式拆分为独立文件供 cdnjs/jsDelivr 等 CDN 使用忽略--no-minifynode转换为 CommonJS 模块并生成index.js即npm install highlight.js发布到 npm 的构建产物all构建所有目标输出到build/下对应的子目录-t browser :common中的:common是分组标识。构建工具会按语言文件中的Category元数据过滤出common组的语言并自动解析依赖与排序见 tools/lib/dependencies.js保证按序注册即可正常工作。因此你也可以写成node tools/build.js -t browser :common elixir ruby这样的分组 单语言混合参数精细控制打包范围。支持的语言Highlight.js 核心库支持180 种语言此外还有大量第三方语言定义可以扩展。完整语言清单含对应 class 名与别名见 SUPPORTED_LANGUAGES.md。该文件还说明实际可用的语言取决于你如何构建或引入库——例如默认的 Web 压缩构建只包含约 40 种热门语言需要额外语言时按上文导入方式或获取与安装中的示例单独加载。语言别名的支持同样映射到核心实现getLanguage会先按小写名称、再按别名表查找见 src/highlight.jsregisterAliases负责把别名写入别名表。社区语言包按highlightjs-lang命名约定发布并可通过registerLanguage注册到自定义构建中。环境要求Requirements运行环境Highlight.js 支持所有现代浏览器以及当前受支持的 Node.js 版本。就本仓库而言package.json 中engines声明为node 20.0.0。参与核心库开发README 中给出的贡献者基础环境为 Node.js 12.x 与 npm 6.x实际请以本机安装的当前版本为准开发相关说明见 docs/building-testing.rst。仓库还提供debugMode()/safeMode()两个运行模式见 src/highlight.js。Safe Mode 是默认的生产模式单个语言出错时其余语言照常高亮出错语言退化为纯文本Debug Mode 会让一切高亮中断并抛出 JavaScript 错误仅建议在语言/库本身的测试与开发阶段使用。demo 页面即采用了hljs.debugMode(); hljs.highlightAll();的启动方式见 demo/demo.js。许可证与延伸阅读Highlight.js 以 BSD 协议发布详见 LICENSE。继续深入可参考以下仓库内文档docs/api.rsthighlight、highlightAuto、highlightElement、highlightAll、configure、registerLanguage、addPlugin/removePlugin等 API 的完整参考docs/building-testing.rst构建与测试指南docs/css-classes-reference.rst所有语言名与 CSS scope 的引用docs/plugin-api.rst 与 docs/plugin-recipes.rst插件 API 与实用配方如行号等能力VERSION_11_UPGRADE.mdv11 破坏性变更汇总与迁移行动项SECURITY.md长期支持LTS与安全相关信息。赞分享前端【免费下载链接】highlight.jsJavaScript syntax highlighter with language auto-detection and zero dependencies.项目地址https://gitcode.com/gh_mirrors/hi/highlight.js点击查看免费下载相关推荐Sway 语法高亮指南基于 highlight.js 的 sway.js 语言定义与构建发布流程Sway 语法高亮指南基于 highlight.js 的 sway.js 语言定义与构建发布流程 本指南围绕仓库中 scripts/highlightjs/R编程语言编译器区块链Rich 高亮机制完全指南自动语法高亮、自定义 Highlighter 与内置高亮器详解Rich 高亮机制完全指南自动语法高亮、自定义 Highlighter 与内置高亮器详解 Rich 是一款用于在终端中生成富文本与精美格式的 Python 库MidScene.js终极指南如何用自然语言实现跨平台UI自动化MidScene.js终极指南如何用自然语言实现跨平台UI自动化 MidScene.js是一个革命性的AI驱动、视觉感知的UI自动化工具它通过自然语言重新定人工智能AI Agent测试GUI 自动化浏览器控制测试智能体上一篇探索DNS世界的新伙伴dog下一篇探索高效UI组件PrimeVue——Vue.js的宝藏库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Highlight.js 11 完整使用指南：浏览器与 Node.js 语法高亮、语言自动检测与自定义构建
前端【免费下载链接】highlight.jsJavaScript syntax highlighter with language auto-detection and zero dependencies.项目地址https://gitcode.com/gh_mirrors/hi/highlight.js点击查看免费下载Highlight.js 是一个用 JavaScript 编写的语法高亮库可同时运行在浏览器与服务端不依赖任何第三方框架并内置语言自动检测能力。本文以本仓库 README.md 为骨架结合 src/highlight.js 源码、docs/api.rst 与构建工具完整讲解其基础用法、自定义控制、模块导入、CDN/NPM 获取方式以及从源码构建的流程读完后你可以直接在网页或 Node.js 项目中落地语法高亮并按需裁剪语言包以控制体积。Highlight.js 是什么Highlight.js 是一个开箱即用的语法高亮器它既能处理浏览器中的precode代码块也能作为 CommonJS/ESM 模块运行在 Node.js 服务端可以与几乎任何标记语言搭配不依赖其他框架并具备自动语言检测auto-detection能力。本仓库对应版本为11.12.0见 package.json以 BSD-3-Clause 协议发布。从源码结构看整个库由一个核心引擎src/highlight.js加约 180 个语言定义src/languages/以及上百个配色主题src/styles/组成。核心引擎通过HLJS()工厂函数构建最终导出一个hljs单例并暴露highlight、highlightAuto、highlightElement、highlightAll、configure、registerLanguage等完整 API见 src/highlight.js。浏览器中的基本用法在网页中使用 Highlight.js 的最小配置是引入一个主题 CSS、引入库脚本然后调用highlightAll()link relstylesheet href/path/to/styles/default.min.css script src/path/to/highlight.min.js/script scripthljs.highlightAll();/scripthighlightAll()会自动查找页面中所有precode标签并高亮默认尝试自动检测语言。如果自动检测效果不理想或你希望显式指定语言可以在class属性中声明precode classlanguage-html.../code/pre纯文本代码块plaintext希望套用 Highlight.js 的样式但不做任何高亮时使用plaintext语言precode classlanguage-plaintext.../code/pre跳过某个代码块nohighlight需要完全跳过某个代码块的高亮时使用nohighlight类precode classnohighlight.../code/pre背后的实现机制这些约定并非魔法而是硬编码在核心引擎的默认配置中。在 src/highlight.js 里可以看到默认选项noHighlightRe: /^(no-?highlight)$/i—— 匹配到的类名对应代码块将被跳过languageDetectRe: /\blang(?:uage)?-([\w-])\b/i—— 用于从classlanguage-xxx或classlang-xxx中解析语言名cssSelector: pre code——highlightAll()默认作用的元素选择器。highlightElement()在解析语言时还会同时读取元素自身与父级节点的 class见 blockLanguage因此language-*声明拥有最高优先级。若声明的语言未注册会回退为no-highlight并在控制台输出警告。Node.js 服务端用法在 Node.js 中自动检测并高亮一段代码的最小示例// 加载库与全部语言 hljs require(highlight.js); html hljs.highlightAuto(h1Hello World!/h1).value只加载一组常用语言子集与默认 Web 构建同款集合体积更小hljs require(highlight.js/lib/common);使用指定语言精确高亮推荐避免误检html hljs.highlight(h1Hello World!/h1, {language: xml}).value返回对象的结构highlight()返回的对象包含见 src/highlight.js 与 docs/api.rst属性说明language实际使用的语言名与highlightAuto保持一致relevance整数相关度评分用于自动检测排序value带高亮标记的 HTML 字符串code原始未高亮的代码top当前模式栈顶用于 continuationillegal是否检测到该语言的非法语法highlightAuto()额外返回secondBest属性——即相关度评分第二的语言结果可能不存在。自动检测的逻辑在 highlightAuto 中它对候选语言逐一执行_highlight并按relevance降序排序纯文本始终作为兜底选项同分时优先基类语言如 C 优先于 Arduino平局则保持注册顺序靠前的语言胜出。自定义控制highlightElement 与 configure当初始化时机和范围需要更多控制时可以使用highlightElement与configure两个函数它们让你精确决定高亮什么、何时高亮。例如手动实现一遍highlightAll()的等效逻辑document.addEventListener(DOMContentLoaded, (event) { document.querySelectorAll(pre code).forEach((el) { hljs.highlightElement(el); }); });highlightElement()适合在页面加载后动态渲染的内容、或第三方框架的初始化代码中调用见 docs/api.rst。它默认走语言自动检测同样支持通过 DOM 节点的class指定语言。configure 可配置项configure(options)用于更新全局配置未传入的选项保持不变见 docs/api.rst。核心选项如下选项默认值作用classPrefixhljs-生成标记中类名的前缀用于与样式表保持兼容languagesnull限制自动检测只在这些语言及别名中挑选languageDetectRe/\blang(?:uage)?-([\w-])\b/i配置 CSS 类名到语言名的映射规则例如支持grammar-swift风格命名noHighlightRe/^(no-?highlight)$/i哪些 CSS 类对应的代码块完全跳过cssSelectorpre codehighlightAll()作用的元素选择器ignoreUnescapedHTMLfalse遇到未转义 HTML 的代码块时不打印警告throwUnescapedHTMLfalse遇到未转义 HTML 时抛出HTMLInjectionError异常示例改用自定义类名风格、并去掉类前缀hljs.configure({ noHighlightRe: /^do-not-highlightme$/i, languageDetectRe: /\bgrammar-([\w-])\b/i, // 例如 grammar-swift 风格 classPrefix: // 不追加类前缀 // … 其余选项保持不变 });未转义 HTML 的安全检查highlightElement()在渲染前会检查代码块是否包含子元素即未转义的 HTML。默认情况下这只会打印警告见 src/highlight.js如果throwUnescapedHTML为true则直接抛出HTMLInjectionError。这是防止 XSS 注入的重要防线生产环境建议保证代码块内容为纯文本转义后的形式。自定义 HTML 结构与换行保留官方强烈推荐使用precode包裹代码块——语义清晰且零配置即用。如果坚持使用其他 HTML 元素如div需要特别留意换行的保留。假设你的代码块标记是div classcode.../div手动高亮这些块// 先找到所有 div.code 块 document.querySelectorAll(div.code).forEach(el { // 再逐个高亮 hljs.highlightElement(el); });由于div默认不会保留换行需要额外的 CSS 帮助div.code { white-space: pre; }相比之下pre天然保留换行这也是推荐使用它的原因。你同样可以通过插件在前后处理换行但官方建议优先使用 CSS 方案。与 Vue.js 集成Highlight.js 官方提供了highlightjs/vue-plugin插件配合 Vue 使用非常简洁。示例div idapp !-- 绑定 data 属性 code自动检测语言 -- highlightjs autodetect :codecode / !-- 也可以直接传字面量与指定语言 -- highlightjs languagejavascript codevar x 5; / /div该插件内部仍基于highlightElement/highlightAuto的核心 API适合在 Vue 组件化场景中按数据驱动的方式渲染高亮结果。在 Web Worker 中运行处理超大代码块时可以把高亮任务放进 Web Worker避免阻塞浏览器主线程。主脚本中addEventListener(load, () { const code document.querySelector(#code); const worker new Worker(worker.js); worker.onmessage (event) { code.innerHTML event.data; } worker.postMessage(code.textContent); });worker.js 中onmessage (event) { importScripts(path/highlight.min.js); const result self.hljs.highlightAuto(event.data); postMessage(result.value); };注意 Worker 中通过importScripts加载的是预构建的浏览器脚本highlight.min.js而不是 ES 模块源码。导入方式详解Importing the Library使用前先通过npm或yarn安装见下文获取与安装。Node.js CommonJS /require顶层require会注册全部语言// 加载 highlight.js 库及全部语言 const hljs require(./highlight.js); const highlightedCode hljs.highlightAuto(spanHello World!/span).value为了更小体积加载常用语言子集与默认 Web 构建同一套const hljs require(highlight.js/lib/common);为了最小体积只加载核心并按需注册语言const hljs require(highlight.js/lib/core); hljs.registerLanguage(xml, require(highlight.js/lib/languages/xml)); const highlightedCode hljs.highlight(spanHello World!/span, {language: xml}).valueNode.js ES6 Modules /import默认导入注册全部语言import hljs from highlight.js;更高效的做法是只导入核心、按需注册import hljs from highlight.js/lib/core; import javascript from highlight.js/lib/languages/javascript; hljs.registerLanguage(javascript, javascript);如果构建工具支持 CSS 导入还可以把主题作为模块直接引入import hljs from highlight.js; import highlight.js/styles/github.css;浏览器 ES6 Modules浏览器中请使用highlightjs/cdn-assets包内含预构建的 ES6 模块。按需注册语言import hljs from ./assets/js/highlightjs/cdn-assets/es/core.js; import javascript from ./assets/js/highlightjs/cdn-assets/es/languages/javascript.min.js; hljs.registerLanguage(javascript, javascript);注册全部语言import hljs from ./assets/js/highlightjs/cdn-assets/es/highlight.js;注以上路径是示例实际路径取决于你将包安装/复制到项目中的位置。也可以使用 HTMLimportmap用命名键的方式导入script typeimportmap { imports: { highlightjs: ./assets/js/highlightjs/cdn-assets/es/ } } /script之后即可按命名导入import hljs from highlightjs/core.js; import javascript from highlightjs/languages/javascript.min.js; hljs.registerLanguage(javascript, javascript);全量注册的源码机制require(highlight.js)之所以自动注册全部语言是因为 src/stub.js 在导入核心后遍历builtInLanguages由 Rollup 插件注入把每个语言模块转换为短横线命名如grmr_1c→1c后逐一调用registerLanguage。而 src/core.d.ts 则是核心类型声明lib/core与lib/common等入口由构建脚本生成见 tools/build_node.js。registerLanguage内部还会处理语言别名注册、以及语言定义出错时的降级出错语言会退化为纯文本占位不拖垮整个高亮器见 src/highlight.js。获取与安装Getting the LibraryHighlight.js 可以以托管或自定义构建的浏览器脚本、或服务端模块的形式获取。开箱即用的浏览器脚本同时支持 AMD 与 CommonJS因此可以直接配合 RequireJS 或 Browserify 使用无需从源码构建。不要直接链接 GitHub 上的源码库不能脱离构建直接运行请使用下文任一打包好的渠道。若都不满足需求再参考构建文档 docs/building-testing.rst 自行构建。关于 Almond需要借助优化器为模块命名例如r.js -o namehljs paths.hljs/path/to/highlight outhighlight.js通过 CDN 获取多个主流 CDN 托管了预构建的 Highlight.js内置大量常用语言。通过 CDN 使用时还可以借助 Subresource IntegritySRI增强安全性摘要文件见DIGESTS.md由tools/templates/DIGESTS.md模板生成。cdnjsCommon JSlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/styles/default.min.css script srchttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/highlight.min.js/script !-- 也可以很方便地单独加载额外语言 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/languages/go.min.js/scriptES6 Moduleslink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/styles/dark.min.css script typemodule import hljs from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/es/highlight.min.js; // 也可以很方便地单独加载额外语言 import go from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/es/languages/go.min.js; hljs.registerLanguage(go, go); /scriptjsDelivrCommon JSlink relstylesheet hrefhttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/styles/default.min.css script srchttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/highlight.min.js/script !-- 也可以很方便地单独加载额外语言 -- script srchttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/languages/go.min.js/scriptES6 Moduleslink relstylesheet hrefhttps://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/styles/default.min.css script typemodule import hljs from https://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/es/highlight.min.js; // 也可以很方便地单独加载额外语言 import go from https://cdn.jsdelivr.net/gh/highlightjs/cdn-release11.12.0/build/es/languages/go.min.js; hljs.registerLanguage(go, go); /scriptunpkgCommon JSlink relstylesheet hrefhttps://unpkg.com/highlightjs/cdn-assets11.12.0/styles/default.min.css script srchttps://unpkg.com/highlightjs/cdn-assets11.12.0/highlight.min.js/script !-- 也可以很方便地单独加载额外语言 -- script srchttps://unpkg.com/highlightjs/cdn-assets11.12.0/languages/go.min.js/scriptES6 Moduleslink relstylesheet hrefhttps://unpkg.com/highlightjs/cdn-assets11.12.0/styles/default.min.css script typemodule import hljs from https://unpkg.com/highlightjs/cdn-assets11.12.0/es/highlight.min.js; // 也可以很方便地单独加载并注册额外语言 import go from https://unpkg.com/highlightjs/cdn-assets11.12.0/es/languages/go.min.js; hljs.registerLanguage(go, go); /script注意CDN 托管的highlight.min.js并未打包所有语言那会非常庞大。默认打包的常用common语言清单可在官方下载页面查看本仓库中 SUPPORTED_LANGUAGES.md 也注明了这一点默认 Web 构建仅包含约 40 种热门语言。下载预构建的 CDN 资源也可以把 CDN 上托管的同一批构建产物下载下来自托管。这些构建发布在独立的 cdn-release 仓库中如果只需要highlight.min.js加一个 CSS 文件可以方便地用curl等工具从 CDN 端点拉取。此外还有highlightjs/cdn-assets这个 npm 包如果你的构建流程更习惯用npm/yarn拉取资源可以直接依赖它。从官网下载页获取官网下载页可以快速生成只包含所需语言的单文件压缩包。注意从源码构建通常能比网页下载得到更小的体积。通过 NPM 包安装包含全部支持语言的 NPM 包可用 NPM 或 Yarn 安装npm install highlight.js # 或 yarn add highlight.js另一个包highlightjs/cdn-assets包含预构建的 CDN 资源包括可在浏览器中直接 import 的 ES6 Modulesnpm install highlightjs/cdn-assets # 或 yarn add highlightjs/cdn-assets当然也可以选择从源码自行构建 NPM 包。从源码构建当前源码始终可在 GitHub 上获取。构建命令如下node tools/build.js -t node node tools/build.js -t browser :common node tools/build.js -t cdn :common从 tools/build.js 的说明可知构建目标的分工目标产物与用途browser默认目标将核心 指定语言打包为highlight.js默认同时生成压缩版除非传入--no-minify并构建 readthedocs 文档与本地 democdn打包核心 指定语言为highlight.min.js并把全部语言与样式拆分为独立文件供 cdnjs/jsDelivr 等 CDN 使用忽略--no-minifynode转换为 CommonJS 模块并生成index.js即npm install highlight.js发布到 npm 的构建产物all构建所有目标输出到build/下对应的子目录-t browser :common中的:common是分组标识。构建工具会按语言文件中的Category元数据过滤出common组的语言并自动解析依赖与排序见 tools/lib/dependencies.js保证按序注册即可正常工作。因此你也可以写成node tools/build.js -t browser :common elixir ruby这样的分组 单语言混合参数精细控制打包范围。支持的语言Highlight.js 核心库支持180 种语言此外还有大量第三方语言定义可以扩展。完整语言清单含对应 class 名与别名见 SUPPORTED_LANGUAGES.md。该文件还说明实际可用的语言取决于你如何构建或引入库——例如默认的 Web 压缩构建只包含约 40 种热门语言需要额外语言时按上文导入方式或获取与安装中的示例单独加载。语言别名的支持同样映射到核心实现getLanguage会先按小写名称、再按别名表查找见 src/highlight.jsregisterAliases负责把别名写入别名表。社区语言包按highlightjs-lang命名约定发布并可通过registerLanguage注册到自定义构建中。环境要求Requirements运行环境Highlight.js 支持所有现代浏览器以及当前受支持的 Node.js 版本。就本仓库而言package.json 中engines声明为node 20.0.0。参与核心库开发README 中给出的贡献者基础环境为 Node.js 12.x 与 npm 6.x实际请以本机安装的当前版本为准开发相关说明见 docs/building-testing.rst。仓库还提供debugMode()/safeMode()两个运行模式见 src/highlight.js。Safe Mode 是默认的生产模式单个语言出错时其余语言照常高亮出错语言退化为纯文本Debug Mode 会让一切高亮中断并抛出 JavaScript 错误仅建议在语言/库本身的测试与开发阶段使用。demo 页面即采用了hljs.debugMode(); hljs.highlightAll();的启动方式见 demo/demo.js。许可证与延伸阅读Highlight.js 以 BSD 协议发布详见 LICENSE。继续深入可参考以下仓库内文档docs/api.rsthighlight、highlightAuto、highlightElement、highlightAll、configure、registerLanguage、addPlugin/removePlugin等 API 的完整参考docs/building-testing.rst构建与测试指南docs/css-classes-reference.rst所有语言名与 CSS scope 的引用docs/plugin-api.rst 与 docs/plugin-recipes.rst插件 API 与实用配方如行号等能力VERSION_11_UPGRADE.mdv11 破坏性变更汇总与迁移行动项SECURITY.md长期支持LTS与安全相关信息。赞分享前端【免费下载链接】highlight.jsJavaScript syntax highlighter with language auto-detection and zero dependencies.项目地址https://gitcode.com/gh_mirrors/hi/highlight.js点击查看免费下载相关推荐Sway 语法高亮指南基于 highlight.js 的 sway.js 语言定义与构建发布流程Sway 语法高亮指南基于 highlight.js 的 sway.js 语言定义与构建发布流程 本指南围绕仓库中 scripts/highlightjs/R编程语言编译器区块链Rich 高亮机制完全指南自动语法高亮、自定义 Highlighter 与内置高亮器详解Rich 高亮机制完全指南自动语法高亮、自定义 Highlighter 与内置高亮器详解 Rich 是一款用于在终端中生成富文本与精美格式的 Python 库MidScene.js终极指南如何用自然语言实现跨平台UI自动化MidScene.js终极指南如何用自然语言实现跨平台UI自动化 MidScene.js是一个革命性的AI驱动、视觉感知的UI自动化工具它通过自然语言重新定人工智能AI Agent测试GUI 自动化浏览器控制测试智能体上一篇探索DNS世界的新伙伴dog下一篇探索高效UI组件PrimeVue——Vue.js的宝藏库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
