详解代码高亮Prettify.js库使用及其应用

张绪航 2019-11-11 17:13:43 2659 浏览前端 Html

转载：https://www.csweigou.com/article/565.html

由于最近需要写自己的博客，后台上传的一些代码，前端需要高亮显示，找了一些js插件，决定使用prettify.js，这篇文章主演简单介绍prettify.js的使用

1、最简单的使用

下载项目的文件保存到到本地项目文件夹中。然后在页面中引入（注意自己的路径）

<script type="text/javascript" src="prettify/prettify.js"></script>
<!--很多文章中所忽略的调用CSS，那样出来的效果不堪入目哦-->
<link  type="text/css" rel="stylesheet"  href="prettify/prettify.css"/>

然后在body标签使用onload事件载入prettyPrint()方法<body onload=”prettyPrint()”>

这样就可以使用Prettify.js带给你代码高亮的体验了，不过好像貌似官方的CSS我个人不是特别的喜欢，特别是字体它没约束，而Chrome给点额默认pre标签的字体为monospace，虽然还可以，但如果你的网站一旦指定了字体，比如微软雅黑等，那代码使用微软雅黑就有点儿够呛的。包含字体原因，我提供一下覆盖的部分CSS，其实你加到官方CSS文件最后就可以，当然你为了追求性能与完美完全可以把官方对应的代码删除

.prettyprint *{font-family:'courier new',monospace;}
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #AE81FF; }
.prettyprint .pun,
.prettyprint .opn, 
.prettyprint .clo { color: #F8F8F2; }
.prettyprint .fun { color: #dc322f; }
.prettyprint .str, 
.prettyprint .atv { color: #E6DB74; }
.prettyprint .kwd, 
.prettyprint .tag { color: #F92659; }
.prettyprint .typ, 
.prettyprint .atn, 
.prettyprint .dec, 
.prettyprint .var { color: #A6E22E; }
.prettyprint .pln { color: #66D9EF; }

当然如果你要选择跟我们一样的，可以直接看我们的官网对应的CSS，我们官网就是使用这个JS库来实现代码高亮的，比如你现在看到的就是最终的效果，而这就是基础的应用

默认行号是5行一显示，只要把对应的css的list-style-type的值改为decimal就行，这样每行都有行号

2、高级应用

其实上面只是这个强大库的最基础的应用，其实它还有更高级的应用，当然这里我也不可能完全讲到（主要是英文有点烂，怕理解不够透彻，然后误导大家），爱折腾的朋友可以直接去项目的WIKI页面查看更多内容。

首先说一个最基本的应用，就是在前面显示行号，这个其实就是在pre标签的class选择器中加入linenums就可以了，就会得到如下风格：

/*这里演示添加选择器linenums来显示行号*/
.prettyprint *{font-family:'courier new',monospace;}
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #AE81FF; }

其次再说下，其实我们可以不再body里面写onload事件，也就是让代码自动加载，这时候我们只需要把prettify.js换成run_prettify.js即可，但是需要说明的是run_prettify.js文件中有引用Google源的内容，而国内屏蔽了谷歌的访问，因此如果要使用这种方式请把这个库文件解压后找出其中引用谷歌源的文件下载到本地然后再引用，否则打开特别慢甚至打不开。

此外，当我们使用这种方式的时候，在wiki中有autoload、lang、skin、callback四种参数供我们使用，具体使用技巧请访问项目wiki页面参考。除此之外还有更多说明哦，这里就不多说，直接看wiki哦。

3、相关延伸

其实说到这里，大家可能会觉得，特别是小白，这样插入也挺麻烦的，每次都要插入<pre class=”prettyprint “>和</pre”>，但实际上我们可以进一步改装，比如我们可以把这些东西写入我们网站的编辑器中。就算我们不写入编辑器中，我们让代码更简单。

比如每次需要插入代码的时候，我们只需要插入<pre>和</pre>就可以，同时也可以把body的解放出来。比如这里我演示一下用jQuery来简单的改装一下。

<script>
        $(window).on('load', function(){
            $("pre").addClass("prettyprint linenums");//如果其他地方也要用到pre，我们可以再加一个父标签的选择器来区分
            prettyPrint();//代替body上的onload事件加载该方法
        });
</script>

当然不要忘记引用jQuery库了，实际上现在很多网站都应用到了jQuery，这样就不成问题了，当然如果你的网站不使用jQuery，那么你也可以用原生JS来处理。