基本用法
在浏览器中使用
在网页上使用highlight.js的最小限度是链接到一个主题库并调用highlightAll：
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
自动检测语言找到并高亮显示<pre><code>标签内的代码。如果自动检测不到，或者你更喜欢直接的，你可以在class属性中手动指定语言：
<pre><code class="language-html">...</code></pre>
纯文本
使用plaintext来处理纯文本：
<pre><code class="language-plaintext">...</code></pre>
忽略高亮
使用nohighlight来跳过代码高亮：
<pre><code class="nohighlight">...</code></pre>
在Node.js中使用
// load the library and ALL languages
const hljs = require('highlight.js');
const html = hljs.highlightAuto('<h1>Hello World!</h1>').value
一般只需要加载通用语言处理即可：
const hljs = require('highlight.js/lib/common');
要使用特定语言高亮显示代码，请使用 highlight：
const html = hljs.highlight('<h1>Hello World!</h1>', {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
强烈建议 <pre><code> 对代码块进行包装。因为这非常语义化，开箱即用，零污染。也可以使用其他 HTML 元素，但您可能需要特别注意保留换行符。
假设使用div进行包装：
<div class='code'>...</div>
那么其高亮脚本就需要如下处理：
// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(el => {
// then highlight each
hljs.highlightElement(el);
});
在不使用<pre>的情况下，通过CSS中的white-space: pre也可以实现代码换行，如下：
div.code {
white-space: pre;
}
在Vue.js中使用
下载 highlightjs/vue-plugin，这是用 highlight.js 封装好的 vue 插件
<template>
<highlightjs
language="js"
code="console.log('Hello World');"
/>
</template>
<script>
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";
export default {
components: {
highlightjs: hljsVuePlugin.component
}
}
</script>
在 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('<path>/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('<span>Hello World!</span>').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('<span>Hello World!</span>', {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
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js"></script>
ES6 模块
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/dark.min.css">
<script type="module">
import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/es/highlight.min.js';
// and it's easy to individually load additional languages
import go from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/es/languages/go.min.js';
hljs.registerLanguage('go', go);
</script>
jsdelivr
普通JS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/languages/go.min.js"></script>
ES6 模块
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
<script type="module">
import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/es/highlight.min.js';
// and it's easy to individually load additional languages
import go from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/es/languages/go.min.js';
hljs.registerLanguage('go', go);
</script>
unpkg
普通JS
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/languages/go.min.js"></script>
ES6 模块
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/default.min.css">
<script type="module">
import hljs from 'https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/highlight.min.js';
// and it's easy to individually load & register additional languages
import go from 'https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/languages/go.min.js';
hljs.registerLanguage('go', go);
</script>
注意
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.xnpm >= 6.x