简介

SyntaxHighlighter是一款完全基于Javascript的代码高亮插件，可以对大部分编程语言进行着色渲染，而且代码高亮的性能也非常不错。它既可以在纯浏览器端，也可以在服务端使用。还可以自定义主题文件，支持复制、在新窗口查看源代码等较多的可选功能。

简单使用

1.  引入文件

<link rel="stylesheet" href="static/css/sunburst.min.css">

<script src="static/js/jquery.min.js"></script>
<script src="static/js/highlight.min.js"></script>

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

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

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

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

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

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

2. 调用

1）基本用法，即在浏览器页面中使用：

<script type="text/javascript">
  hljs.highlightAll();
</script>

2）服务端 Node.js：

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

3）添加行号：

引入行号插件：

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

调用

<script type="text/javascript">
  hljs.highlightAll();
  hljs.initLineNumbersOnLoad();
</script>

相关链接：

中文文档 地址 ：  http://highlight.cndoc.wiki/doc

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

GitHub 地址 ：https://github.com/syntaxhighlighter