使用Prism.js实现文章页面中代码块的高亮

作为一个码农，在博客上展示代码的时候，很希望代码能够很漂亮，很优雅的形式展示出来。这其中代码的高亮效果是非常重要的一个因素。
最近在完善自己的博客的时候，发现文章代码的高亮不是很好。于是就在网上查了一下。发现貌似prism.js插件的高亮效果还不错。我这边就拿来试一下。
Prism.js的下载
插件的官网地址是：https://prismjs.com/首页展示的是插件的功能。我们点击页面上方的下载就进入到下载页面。我们下载插件时候，可以根据我们的需要选择不同的压缩版本，主题，需要支持的语言，以及一些插件。如下图：

左上角Compression level，我们可以选择开发版本和最小化版本两种；右边的Themes我们也可以根据自己的喜欢选择不同的主题。可以点击右边的圆圈预览主题的效果。然后，在Languages下面，我们可以根据需要勾选我们需要支持的语言。勾选我们需要的即可，也不要贪多。因为勾选的越多，你的js和css文件也会越大，你的网页在加载时候需要加载的文件也越大，会拉慢速度。
我们把下载页面往下拉，还能看到一些插件，其中的Line Numbers插件很常用，用于显示我们代码的行号，我们可以勾选一下。

上面的选择完之后，我们就可以在页面最下方，点击Download JS和Download CSS下载JS和CSS文件。

[h1]Prism.js的高亮效果测试[/h1]我们可以根据prism.js的语法来测试一下它的高亮效果。prism.js对网页中的your code...标签中的内容进行高亮处理。
其中code代码的class属性是我们的当前代码的语言。
另外如果下载了Line Nunbers插件，想支持行号显示的话，我们需要在pre标签中添加属性class="line-numbers"
写下如下的测试代码：

[/code][code]

复制代码

[/code][code]

复制代码

prism.js test

复制代码

[/code][code]

复制代码

[/code][code]

复制代码

[/code][code]

复制代码

import聽random

复制代码

for聽i聽in聽range(100):

复制代码

聽聽聽聽a = i**2

复制代码

聽聽聽聽b = random.randint(1, 100)

复制代码

聽聽聽聽print("a: {}; b:{}".format(a,b))

复制代码

[/code][code]= right:

复制代码

return

复制代码

base = array[left]

复制代码

l, r = left, right while l < r:

复制代码

while l < r and array[r] >= base:

复制代码

r -= 1

复制代码

while l < r and array[l]

复制代码

[/code][code]

复制代码

[/code][code]$(document).ready(function(){

复制代码

var doc_pre = $("pre");

复制代码

doc_pre.each(function(){

复制代码

$(this).attr("class",'line-numbers');

复制代码

});

复制代码

});

复制代码

[/code]修改完成后，浏览器打开HTML之后发现，代码已经按照我们希望的格式高亮了：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-ae2fe2e99e2908a21f6b64499b037fd2[/img]
[h1]Ueditor与Prism.js的配合[/h1]另外一个使用比较广泛的富文本编辑器是百度的ueditor。我们可以进入到我们的ueditor安装目录下，打开给出的示例页面index.html在该页面同样写入类似的内容，代码是按照ueditor插入代码的方式插入，如下：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-65a4f33f8cb79e9917392c089e908062[/img]
点击获得内容，复制得到我们输入的内容的html格式代码。
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-d8df84766388cdd7f7440bcd93ba8c37[/img]
新建一个html文件把这些代码粘贴到body标签下：
[list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码