基本用法​

在浏览器中使用​

在网页上使用highlight.js的最小限度是链接到一个主题库并调用highlightAll：

自动检测语言找到并高亮显示

标签内的代码。如果自动检测不到，或者你更喜欢直接的，你可以在class属性中手动指定语言：
 
...
 
 
纯文本​
 
使用plaintext来处理纯文本：
 
...
 
 
忽略高亮​
 
使用nohighlight来跳过代码高亮：
 
...
 
 
在Node.js中使用​
 
// load the library and ALL languages
const hljs = require('highlight.js');
const html = hljs.highlightAuto('
Hello World!
').value
 
 
一般只需要加载通用语言处理即可：
 
const hljs = require('highlight.js/lib/common');
 
 
要使用特定语言高亮显示代码，请使用 highlight：
 
const html = hljs.highlight('
Hello World!
', {language: 'xml'}).value
 
 
更多使用请参考 API文档。
 
语言支持​
 
Highlight.js 支持 180 多种语言。您可以在 SUPPORTED_LANGUAGES 中找到支持的语言。
 
自定义​
 
如果您需要对 Highlight.js 的初始化进行更多控制，可以使用 highlightElement 和 configure 函数。这使您可以更好地控制要高亮显示的内容。例如：
 
document.addEventListener('DOMContentLoaded', (event) => {document.querySelectorAll('pre code').forEach((el) => {hljs.highlightElement(el);});
});
 
 
更多配置选项。
 
自定义HTML​
 
强烈建议 
 对代码块进行包装。因为这非常语义化，开箱即用，零污染。也可以使用其他 HTML 元素，但您可能需要特别注意保留换行符。
 
假设使用div进行包装：
 
...
 
 
那么其高亮脚本就需要如下处理：
 
// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(el => {// then highlight eachhljs.highlightElement(el);
});
 
 
在不使用
的情况下，通过CSS中的white-space: pre也可以实现代码换行，如下：
 
div.code {white-space: pre;
}
 
 
在Vue.js中使用​
 
下载 highlightjs/vue-plugin，这是用 highlight.js 封装好的 vue 插件
 

 
 
在 Web Worker 中使用​
 
如果要高亮显示的代码内容非常多，您可以使用 Web Worker 来处理
 
window.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 中：
 
worker.onmessage = (event) => {importScripts('/highlight.min.js');const result = self.hljs.highlightAuto(event.data);postMessage(result.value);
};
 
 
加载highlight.js​
 
首先，您可能会通过 npm 或 yarn 来获取 highlight.js。
 
Node.js / require​
 
// require the highlight.js library, including all languages
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('Hello World!').value
 
 
一般只需要加载公用语言处理即可。
 
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('Hello World!', {language: 'xml'}).value
 
 
ES6 模块 / import​
 
注意
 
您也可以直接从完全静态的 URL 引入，例如： ES6 模块 CDN 资源。
 
默认引入将加载全部语言：
 
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';
 
 
获取highlight.js​
 
highlight.js支持AMD和CommonJS规范，开箱即用，像通过RequireJS 或 Browserify获取，不需要做任何其他操作，当然您也可以使用r.js来构建：
 
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
 
 
通过 CDN 获取​
 
cdnjs​
 
普通JS​
 




 
 
ES6 模块​
 

 
 
jsdelivr​
 
普通JS​
 




 
 
ES6 模块​
 

 
 
unpkg​
 
普通JS​
 



 
 
ES6 模块​
 

 
 
注意
 
CDN 托管的 highlight.min.js 可能不是最新版本，以致不能包含到所有语言
 
官网下载​
 
下载地址：Getting highlight.js
 
下载页面可以快速生成自定义的单文件压缩包，其中仅包含您想要的语言。
 
通过 NPM 安装​
 
使用 NPM 或 Yarn 安装：
 
npm install highlight.js
# or
yarn add highlight.js
 
 
或者您可以从源代码构建 NPM 包。
 
从源代码构建​
 
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :common
 
 
环境要求​
 
Highlight.js 适用于所有现代浏览器和当前支持的 Node.js 版本。
 
Node.js >= 12.x
npm >= 6.x