博客代码高亮

2019-11-09 Views 经验665字4 min read
featureimg

Prism.js 和 highlight.js 的使用

博客里时常有代码需要显示,不高亮显示效果非常不好,所以我就在网上找能高亮代码的js,找到了以下两个—— Prism.js 和 highlight.js

刚开始使用的是highlight.js,调用方法如下:

<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/ascetic.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

当然如果你想使用不同的主题也可以在 BootCDN 上寻找对应的主题的 link 标签;同时 BootCDN 提供的 js 是包含所有语言的高亮,如果不想要那么多高亮语言的话可以上 highlight.js 官网选择下载对应的语言。


但使用了 highlight.js 后感觉速度有点慢,所以又在网上找到了替代品 prism.js,感觉好像快一些;但是唯一需要注意的就是使用 prism 一定要在 xxx 处标记语言才能高亮;

<code class="language-xxx">
</code>

要使用这个js,需要去它的官网下载对应的 prism.js 文件,然后放置如下代码在 head 标签:

<link href="https://s1.pstatp.com/cdn/expire-1-M/prism/9000.0.1/themes/prism.min.css" rel="stylesheet">
<script type="text/javascript" src="prism.js地址"></script>

同时 prism.js 也支持 pjax 调用:

var _hmt = _hmt || [];
var hm = document.createElement("script");
hm.src = '/prism.js?ver='+Math.random();
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);

注:要使用 Prism.js 代码块一定要包含在 pre 标签下


2019.12.12日 更新

Prism显示行号功能一直有一些问题,不管是国内外都有人反映。以下是一种很好的解决方法:

  1. 引入如下js
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num - 1; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>';
        }
    }
})();
  1. 引入如下css
pre code,
pre .line-number {
  font:"Courier New",Courier,Monospace;
  font-size:.8em;
  padding:0 .5em;
  color:black;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .cl {
  display:block;
  clear:both;
}

注意:如果之前在css里加入了code标签的css,需要删除原先code标签的css;同时,Prism自带的css以及js的文件内的line-numbers有关的功能都可以删除。具体行号显示效果可以看上面的代码!


logo   WRITTEN BY:Serence

一个程序员和文艺青年的博客!

本文章采用CC BY-NC-SA 4.0进行许可。转载请注明出处!

上一篇

Pre-Poetry Era - We


下一篇

独立日