对hightlight.js的使用给出一些实例代码和方向。

官网:https://highlightjs.org/

CDN:https://unpkg.com/browse/@highlightjs/cdn-assets@10.5.0/

快速上手:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>highlightjs</title>
<link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@10.5.0/styles/vs2015.min.css">
<!-- 选择代码风格,具体风格参见:https://unpkg.com/browse/@highlightjs/cdn-assets@10.5.0/styles/ -->
<script src="//unpkg.com/@highlightjs/cdn-assets@10.5.0/highlight.min.js"></script>
</head>

<body>
<pre>
<code>
#include &lt;stdio.h&gt; <!-- "<"与">"需要转义 -->

int main()
{
printf("Hello, World! \n");

return 0;
}
</code>
</pre>
</body>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>

</html>

这样会渲染code标签内的代码,其中”<>”需要进行转义。
代码会自动识别语言,也可以手动指定,例如:

1
2
3
<code  class="language-html">
your code here……
</code>

类也可以以language-或前缀lang-+语言名。

如果想使用纯文本或禁止高亮,则写”plaintext”与”nohighlight“。

添加行号需要额外插件或自行更改源码:https://github.com/wcoder/highlightjs-line-numbers.js

需要自动格式化,原生并未支持,可以调用js-beautify: https://www.npmjs.com/package/js-beautify

对于前端上应用可以先引用:https://cdn.rawgit.com/beautify-web/js-beautify/v1.13.4/js/lib/beautify.js

再使用js_beautify(js_source_text);即可。

更多用法(如vue下、node下)见官网:https://highlightjs.org/usage/