highlight.js

一行代码就能让我的网站支持代码高亮的工具库，也支持在 Vue 中使用，强烈推荐给大家。

highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代扒启手码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于旁稿 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：

最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。

下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。

虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。

下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：

就是这么简单，highlight.js 会自动将文章中的

点击查看本次分享的网址以春嫌及代码高亮效果

highlight.js - 让网页上的代码高亮美化的免费开源工具库 那些免费的砖

一般压缩都经过混淆，如果你看到变量名都是A,B,C,D之类的无规则的命名，那就是被混淆过的，一般来说也很难阅读，就算你 还原了格式。

如果是没有混淆的，你可以试试用js的格式化工具来重新格式化一下的，比如：

/* 美化：格式化代码，使之容易阅读 */

/* 净化：去掉代码中多余的注释、换行、空格等 */

/* 压缩：将代码压缩为更小体积，便于传输 */

/* 解压：将压缩后的代码转换为人可以阅读的格式 */

/* 混淆：将代码的中变量名简短化以减小体积，但可读性差，经混淆后的代码无法还原 */

/* 如果有用，请别忘了推荐给你的朋友： */

/* javascript在线美化、净化、压缩、解压：http://tool.lu/js */

/* 以下是演示代码 */

var Inote = {}

Inote.JSTool = function(options) {

this.options = options || {}

}

Inote.JSTool.prototype = {

_name: 'Javascript工具',

_history: {

'v1.0': ['2011-01-18', 'javascript工具上线'],

'v1.1': ['2012-03-23', '增加混淆功能差陆'],

'v1.2': ['2012-07-21', '升级美化功能引擎'],

'v1.3': ['2014-03-01', '升级解密功能，支持eval,window.eval,window["虚雹顷eval"]等肆伍的解密'],

'v1.4': ['2014-08-05', '升级混淆功能引擎'],

'v1.5': ['2014-08-09', '升级js压缩引擎'],

'v1.6': ['2015-04-11', '升级js混淆引擎']

},

options: {},

getName: function() {return this._name},

getHistory: function() {

return this._history}

}

var jstool = new Inote.JSTool()

---