欢迎来访我的博客。

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

Django 小张哥哥 613浏览 2评论

作为一个码农,在博客上展示代码的时候,很希望代码能够很漂亮,很优雅的形式展示出来。这其中代码的高亮效果是非常重要的一个因素。

最近在完善自己的博客的时候,发现文章代码的高亮不是很好。于是就在网上查了一下。发现貌似prism.js插件的高亮效果还不错。我这边就拿来试一下。

本文中的代码高亮效果就是使用的Prism js。


Prism.js的下载

插件的官网地址是:https://prismjs.com/
首页展示的是插件的功能。我们点击页面上方的下载就进入到下载页面。
我们下载插件时候,可以根据我们的需要选择不同的压缩版本,主题,需要支持的语言,以及一些插件。
如下图:

prism_1.png

左上角Compression level,我们可以选择开发版本和最小化版本两种;右边的Themes我们也可以根据自己的喜欢选择不同的主题。可以点击右边的圆圈预览主题的效果。
然后,在Languages下面,我们可以根据需要勾选我们需要支持的语言。勾选我们需要的即可,也不要贪多。因为勾选的越多,你的js和css文件也会越大,你的网页在加载时候需要加载的文件也越大,会拉慢速度。

我们把下载页面往下拉,还能看到一些插件,其中的Line Numbers插件很常用,用于显示我们代码的行号,我们可以勾选一下。

prism_2.png

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

prism_3.png

Prism.js的高亮效果测试

我们可以根据prism.js的语法来测试一下它的高亮效果。
prism.js对网页中的<pre><code class="language-xxx">your code...</code></pre>标签中的内容进行高亮处理。

其中code代码的class属性是我们的当前代码的语言。

另外如果下载了Line Nunbers插件,想支持行号显示的话,我们需要在pre标签中添加属性class="line-numbers"

写下如下的测试代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>prism.js test</title>
<!-- 引入 prism 的css 和 js -->
<link rel="stylesheet" type="text/css" href="prism.css">
<script type="text/javascript" src="prism.js"></script>
</head>
<body>

<pre class="line-numbers"><code class="language-python">import&nbsp;random
for&nbsp;i&nbsp;in&nbsp;range(100):
&nbsp;&nbsp;&nbsp;&nbsp;a = i**2
&nbsp;&nbsp;&nbsp;&nbsp;b = random.randint(1, 100)
&nbsp;&nbsp;&nbsp;&nbsp;print("a: {}; b:{}".format(a,b))</pre>
</body>
</html>

使用浏览器打开,高亮效果如下:

prism_4.png

如果不喜欢这样的主题,可以去官网下载其它的主题,看一下,自己最喜欢哪种效果吧。

Markdown和Prism的配合

我们来看一下我们常用的markdown与Prism的配合情况
我这边编辑Markdown使用的是VS Code。
新建一个.md文件,写入如下内容:

prism_markdown_01.png

然后点击 Ctrl + Shift + P,输入命令“Markdown: Print current document to HTML”。

然后发现在该文件同级文件夹下生成了同名的HTML文件。

我们使用编辑器打开该HTML文件,HTML内容如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>快速排序</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }
</style>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<p>快速排序的python实现:</p>
<pre><code class="language-python"><div><span class="hljs-comment"># 快速排序</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">quick_sort_2</span><span class="hljs-params">(array, left, right)</span>:</span>
<span class="hljs-keyword">if</span> left &gt;= right:
<span class="hljs-keyword">return</span>
base = array[left]
l, r = left, right    <span class="hljs-keyword">while</span> l &lt; r:
<span class="hljs-keyword">while</span> l &lt; r <span class="hljs-keyword">and</span> array[r] &gt;= base:
r -= <span class="hljs-number">1</span>
<span class="hljs-keyword">while</span> l &lt; r <span class="hljs-keyword">and</span> array[l] &lt;= base:
l += <span class="hljs-number">1</span>
<span class="hljs-keyword">if</span> l &lt; r:
array[l], array[r] = array[r], array[l]
array[left], array[l] = array[l], array[left]

quick_sort_2(array, left, l<span class="hljs-number">-1</span>)
quick_sort_2(array, l+<span class="hljs-number">1</span>, right)
</div></code></pre>
<p>blablablabla...</p>

</body>
</html>

可以看到Markdown默认生成的语法符合Prism.js的高亮需要。


此时,我们只需要在<head>标签内引入我们的js和css文件就行了。

......
<!-- 引入 prism 的css 和 js -->
<link rel="stylesheet" type="text/css" href="prism.css">
<script type="text/javascript" src="prism.js"></script>
......

如果,我们需要支持显示行号,我们还需要在pre标签内添加属性class="line-numbers"

我们可以在head标签添加如下代码:

<script type='text/javascript' src='jquery.min.js'></script><!-- 需要放在prism.js引入之前 -->
<link rel="stylesheet" type="text/css" href="prism.css">
<script type="text/javascript" src="prism.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    var doc_pre = $("pre");
        doc_pre.each(function(){
        $(this).attr("class",'line-numbers');
        });
    });
</script>

修改完成后,浏览器打开HTML之后发现,代码已经按照我们希望的格式高亮了。

prism_markdown_02.png


Ueditor与Prism.js的配合

另外一个使用比较广泛的富文本编辑器是百度的ueditor。我们可以进入到我们的ueditor安装目录下,打开给出的示例页面index.html
在该页面同样写入类似的内容,代码是按照ueditor插入代码的方式插入,如下:

prism_ueditor_02.png

点击获得内容,复制得到我们输入的内容的html格式代码。

prism_ueditor_03.png

新建一个html文件把这些代码粘贴到body标签下:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>归并排序的Python实现:</p><pre class="brush:python;toolbar:false">#&nbsp;归并排序
def&nbsp;merge(left,&nbsp;right):
&nbsp;&nbsp;&nbsp;&nbsp;i,&nbsp;j&nbsp;=&nbsp;0,&nbsp;0
&nbsp;&nbsp;&nbsp;&nbsp;merged_array&nbsp;=&nbsp;[]
&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;i&nbsp;&lt;&nbsp;len(left)&nbsp;and&nbsp;j&nbsp;&lt;&nbsp;len(right):&nbsp;#&nbsp;将两个序列中元素从前面开始依次比较,从小到大归并进新序列
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;left[i]&nbsp;&lt;=&nbsp;right[j]:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;merged_array.append(left[i])
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i&nbsp;+=&nbsp;1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;merged_array.append(right[j])
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;j&nbsp;+=&nbsp;1
&nbsp;&nbsp;&nbsp;&nbsp;merged_array.extend(left[i:])&nbsp;#&nbsp;将序列中剩余的元素也归并进去
&nbsp;&nbsp;&nbsp;&nbsp;merged_array.extend(right[j:])&nbsp;#&nbsp;将序列中剩余的元素也归并进去
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;merged_array&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
def&nbsp;merge_sort(array):
&nbsp;&nbsp;&nbsp;&nbsp;array_len&nbsp;=&nbsp;len(array)
&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;array_len&nbsp;==&nbsp;1:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;array
&nbsp;&nbsp;&nbsp;&nbsp;mid&nbsp;=&nbsp;array_len//2&nbsp;#&nbsp;将序列二分为两个部分
&nbsp;&nbsp;&nbsp;&nbsp;left&nbsp;=&nbsp;array[:mid]
&nbsp;&nbsp;&nbsp;&nbsp;right&nbsp;=&nbsp;array[mid:]
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;merge(merge_sort(left),&nbsp;merge_sort(right))&nbsp;#&nbsp;递归调用</pre><p>blablablabla......<br/></p><br/><p><br/></p>

</body>
</html>

分析代码可知,格式与prism.js高亮需要的格式不同。ueditor得到的代码中,只有pre标签,pre标签内部没有code标签,因此无法直接高亮显示。

分析pre标签的clas属性可以看到,代码块中的语言类型是以
class="brush:python;toolbar:false"格式显示的。

此时,我们同样可以类似上一节中的方法,对内容进行处理,使其符合prism.js要求的格式。
我们在head标签内引入prism.js和prism.css文件的同时,也对pre标签进行处理:

  1. 在pre标签内部添加code标签;

  2. 设定code标签的属性,根据pre标签中的class属性内容设定其class属性;

  3. 给pre标签中添加行号的属性。

我们在head标签中,添加如下代码即可:

......
<script type='text/javascript' src='jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="prism.css">
<script type="text/javascript" src="prism.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var doc_pre = $("pre");
    doc_pre.each(function(){
        $(this).removeAttr('style');
        var class_val = $(this).attr('class');
        var class_arr = new Array();
        class_arr = class_val.split(';');
        class_arr = class_arr['0'].split(':');
        var lan_class = 'language-'+class_arr['1'];
        var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
        $(this).html(pre_content);
        $(this).attr("class",'line-numbers '+lan_class);
    });
});
</script>
......

使用浏览器打开,我们可以看到代码块的高亮效果:

prism_ueditor_04.png

另外,如果在使用Markdown编辑器编辑完成之后,又复制到了ueditor编辑器中保存。则html代码的内容会有更多不同,处理起来会比较麻烦。最好还是避免这种情况。



如果你也感兴趣,觉得这个插件还不错的话,可以去下载来试一试。

转载请注明:禅思 » 使用Prism.js实现文章页面中代码块的高亮?

喜欢 (3) or 分享 (0)

我的个人微信公众号,欢迎关注

扫码或搜索:Python后端开发Django

Python后端开发Django

微信公众号 扫一扫关注

结交朋友、一起学习,一起进步。

科波之主

QQ号 386046154 立即加入

添加微信,进行技术交流

专注技术交流, 一同成长进步

我的微信号

如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
    1. 这个高亮效果还不错。回头我也试着搞一下。
      飞鸟 2019-07-10 17:31:27 回复
      • tadalafil online tadalafil 30 mg 40 mg tadalafil
        Wesleyviord 2021-03-06 00:39:43 回复