highlight.js的使用

基本用法​

在浏览器中使用​

在网页上使用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 版本。

标签 , ,

发表回复