highlight.js的使用
基本用法
在浏览器中使用
在网页上使用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.xnpm >= 6.x
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！