网页通过Prettify.js实现代码高亮、显示行号功能

2020-12-08T23:41:00

这段时间在折腾typecho主题的代码高亮,尝试了很多的方案但是都不是很满意,如果使用插件的解决方案,个人不是很喜欢。

这里我使用Google Code的一款开源的js库Prettify.js,它提供一种简单的形式来着色HTML页面上的程序代码,最值得亮点的地方是不需要指明代码的语言类型,它会自动进行判断。大家也可以在网上找到相对应的wiki。

Github:code-prettify
CDN加速:BootCDN

大家可以访问上面的git地址获取代码文件,不建议去其他地方去下载不能保证代码的完整性。下面简单介绍我使用的折腾方法。

实现高亮的步骤

  • 在Github获取代码压缩包,解压得到prettify.jsprettify.cssrun_prettify.js文件,上传到你的主题相对应文件夹
  • 编辑你的主题的header.php或者footer.php文件去添加以下代码,进行引入CSSJS
<link rel="stylesheet" href="css/prettify.css" />
<script type="text/javascript" src="js/prettify.js"></script> 
  • 在页面进行加载执行处理

在官方的文档当中,在body的标签中添加onload事件来执行

<body onload=”prettyPrint()”>

这里就可以使用代码高亮了,但是我的主题好像不支持这个东西,使用了onload事件也没有反应,但是在F12调试的时候,输入prettyPrint()才能进行渲染,不然相当于没有生效。

还有一种方法是把prettify.js替换成run_prettify.js就可以不用在body里面写onload事件,就可以让代码自动加载。

Markdown编辑器可以加高亮标签来使用,如果使用HTML要添加<pre> </pre>来实现高亮。我这里就直接使用JQuery来直接实现,记得在主题引入Jquery文件,很多网站都引用了应该不成问题

$(window).load(function(){
  $("pre").addClass("prettyprint"); //给pre标签加一个父标签选择器
  prettyPrint(); //代替body上的onload事件
})
$('pre').each(function(){
    if( !$(this).attr('style') ) $(this).addClass('prettyprint'); //给pre标签添加父标签选择器
    prettyPrint(); //代替body的onload事件
})

显示行号

Prettify可以通过添加linenums元素来添加行号,但是要注意行号的显示的代码
显示格式一:

<pre>
 <code>
   HelloWord!!!
 </code>
</pre>

显示格式二:

<pre>
  HelloWord!!!
</pre>

通过查看你的源代码看你的输出是怎么的,typecho是第一种方法,这里可以给code添加linenums元素来显示

$('code').each(function(){
    if( !$(this).attr('style') ) $(this).addClass('prettyprint linenums')

参考CSS: https://github.com/googlearchive/code-prettify/blob/master/src/prettify.css

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »