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支持AMDCommonJS规范,开箱即用,像通过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.x
  • npm >= 6.x
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拾月拾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值