html代码高亮highlight.js插件的使用，如何使用highlight.js高亮代码

网站html代码高亮，markdown代码语法高亮方法

我们用到就是highlightjs，Highlight.js 是一款代码高亮 js 插件,其使用 JavaScript 编写,可以应用于浏览器和服务端。它囊括了绝大多数语言的语法标记,不依赖于任何其他框架,并且具有自动语言检测功能。

官网下载地址：https://highlightjs.org/

cdn地址：cdnjs，jsdelivr，unpkg

cdnjs
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
jsdelivr
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
unpkg
<link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css">
<script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>

使用方法：下载好之后我们就开始引入我们的网站：

1、引入css和js

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

2、实例化

<script>hljs.highlightAll();</script>

3、示例代码：

<pre><code class="language-html">...</code></pre>

4、说明（其他端说明）：

4.1、浏览器端

highlight.js 最基本的用法，就是在页面上仅引用插件库脚本和一个主题，然后调用 highlightAll()：

<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

上述调用将会检索所有 <pre><code> 标签并对其中内容进行代码高亮处理，它会尝试自动检测语言。如果语言自动检测失败，又或者你想明确指定语言，那么可以使用 class 进行手动指定：

<pre><code class="language-html">...</code></pre>

4.1、纯文本代码块

对于纯文本，若要想应用 Highlight.js 主题样式，而又不对文本内容进行高亮显示，请使用 plaintext 语言：

<pre><code class="language-plaintext">...</code></pre>

4.2、跳过高亮处理

使用 nohighlight class 可以完全跳过本插件所有的处理，保持 code 标签原本的样式：

<pre><code class="nohighlight">...</code></pre>

4.3、服务端 Node.js

最基本用法就是对一段代码进行语言自动检测并返回高亮处理后的内容。

// load the library and ALL languages
hljs = require('highlight.js');
html = hljs.highlightAuto('<h1>Hello World!</h1>').value

4.3、仅加载主流语言的“通用”子集：

hljs = require('highlight.js/lib/common');

4.4、使用 highlight() 可以指定进行高亮处理的代码语言：

html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'}).value

4.5、强烈建议使用 <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);
});

更多使用教程，详见API文档：highlight.js中文文档