轻量级代码高亮插件使用

本文主要介绍两款轻量级的插件highlight.js和prism.js。

highlightjs

基本特点

highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。具有以下特色：

支持 189种语言，98种代码格式化风格。
自动检测语言种类
支持多语言混合的代码高亮
支持Node.js
支持使用任何HTML标记
兼容任意js框架

目前最高版本是2020年06月16日发行的。点击 Get version 10.1.1进入，可进行下载。Usage链接的是说明文档。

下载使用

highlight.js可通过CDN 引入包和手动下载等方式导入。官网下载地址：https://highlightjs.org/download/

highlight.js的使用比较简单，这里通过官网提供的CDN链接讲解使用。

1
2

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>

安装的思路非常简单：

导入 CSS 文件
导入 JS 文件
加载 JS

导入highlight.js，最简单的方法是在header.php加入下面代码：

1
2
3

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

为了导入代码的规范化，推荐将JS 放在<body>中而非<head>中，所以改进后的办法是将

1	<script>hljs.initHighlightingOnLoad();</script>

移至footer.php中</body>标签之前。

为实现代码高亮则应将代码放在标签<pre><code class="json">...</code></pre>，采用文本编辑的方式。class用来指定放入代码的数据类型，不写的话，程序可自动检测。防止出错，最好写上。

若采用可视化编辑方式，将直接写入的代码预格式化，可采用下面方式调用方法：

<script>
   $(document).ready(function() {
   $('pre').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>

prismjs

基本特点

Prism是一个轻量级，可扩展的语法着色工具，符合Web标准。每种语言定义约增加300-500自己大小。非常易于使用，只需要插入一个CSS和JS文件即可。支持多种着色主题。

极致易用：引用prism.css和prism.js，使用合适的HTML5标签（code.language-xxxx），搞定！
天生伶俐：语言的CSS类是可继承的，所以你只需定义一次就能应用到多个代码片段。
轻如鸿毛：代码压缩后只有1.6KB。每添加一个语言平均增加0.3-0.5KB，主题在1KB左右。
快如闪电：如果可能，支持通过Web Workers实现并行。
轻松扩展：定义新语言或扩展现有语法，或者新增功能都非常简单。
丰富样式：所有的样式通过CSS完成，并使用合理的类名如：.comment, .string, .property等

下载使用

官网下载地址：http://prismjs.com/download.html 。选择主题样式和支持的语言，根据需要可选Plugins，如Line Numbers，Copy to Clipboard Button等插件。最好下载prism.js和prism.css文件，并上传到服务器主题文件相应的位置。

编辑function.php文件，添加如下代码：

function add_prism()
{
wp_enqueue_style( 'prism-css', get_stylesheet_directory_uri() . '/css/prism.css' );
wp_enqueue_script( 'prism-js', get_stylesheet_directory_uri() . '/js/prism.js', [], false, true );
}
add_action( 'wp_enqueue_scripts', 'add_prism' );

需要插入代码的时候，使用文本编辑，按照如下格式插入代码块:

1	<pre><code class="language-python line-numbers">代码</code></pre>

切记需使用文本编辑模式，否则可能无法识别。标签class="language-xxx" 要写上。

总结

highlight.js可以自动识别数据类型，且样式多样，相较于prism.js，并未提供显示代码行数的功能，需要自定义才能实现。prism.js提供了相应的插件功能，可选复制代码按钮等。