服务本编辑后，使用highlight.js代码高亮处理展示

红太狼 2024-03-23 16:02 7阅读 0赞

### 基本用法 ###

#### 在浏览器中使用 ####

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

自动检测语言找到并高亮显示`<pre><code>`标签内的代码。如果自动检测不到，或者你更喜欢直接的，你可以在`class`属性中手动指定语言：

纯文本

使用`plaintext`来处理纯文本：

忽略高亮

使用`nohighlight`来跳过代码高亮：

#### 在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文档][API]。

### 语言支持 ###

`Highlight.js` 支持 180 多种语言。您可以在 [SUPPORTED\_LANGUAGES][SUPPORTED_LANGUAGES] 中找到支持的语言。

### 自定义 ###

如果您需要对 `Highlight.js` 的初始化进行更多控制，可以使用 `highlightElement` 和 `configure` 函数。这使您可以更好地控制要高亮显示的内容。例如：

document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre code').forEach((el) => {
        hljs.highlightElement(el);
      });
    });

更多[配置][Link 1]选项。

#### 自定义HTML ####

强烈建议 `<pre><code>` 对代码块进行包装。因为这非常语义化，开箱即用，零污染。也可以使用其他 `HTML` 元素，但您可能需要特别注意保留换行符。

假设使用`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][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

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`

### 许可信息 ###

`Highlight.js` 在 `BSD` 许可下发布。有关详细信息，请参阅我们的[许可证][Link 2]文件。

[API]: https://www.fenxianglu.cn/highlightjs/docs/api
[SUPPORTED_LANGUAGES]: https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
[Link 1]: https://www.fenxianglu.cn/highlightjs/docs/api#%E9%85%8D%E7%BD%AE
[highlightjs_vue-plugin]: https://github.com/highlightjs/vue-plugin
[Getting highlight.js]: https://highlightjs.org/download/
[Link 2]: https://github.com/highlightjs/highlight.js/blob/main/LICENSE