本站所用的代码高亮 JavaScript 代码库:Prism js

文 / @WordPress主题

Prism:一个轻量级的Javascript代码高亮库

我是小本本,因为本站要分享很多代码,所以在页面上实现代码高亮是必须的。在WordPress官方找了许多插件,都需要加载额外的css和js到网页头部,对我这种优化控来说,这是无法接受的。搜索了很多地方,最后找到了我爱水煮鱼介绍的Prism。当时,Prism支持的语言还比较少,文件压缩后只有1.5k,但现在Prism支持的语言包括html、js、css、php、python等十多种语言。

prismjs代码高亮脚本

集成Prism到网站

使用时,在官网选择需要的语言和代码高亮的主题,然后下载到本地,解压,把解压出来的JS和CSS文件引入到网页的中。为了减少两个http请求,我当然是直接把js和css和网站其他的合并在一起。然后,需要代码高亮的时候,直接用类似下面的代码把需要高亮的代码包裹起来就可以了。

<pre><code class="language-css">p{color:red}</code></pre>

等等,使用起来好像有点麻烦,还有输入那么多东西,就不能更简单一点吗?答案当然是可以的。我们可以使用WordPress的Qtag API为文本编辑器添加一个快速输入按钮,具体方法如下所示。

function mxthemes_add_quicktags() {
  ?>
  <script type="text/javascript">
    QTags.addButton('Prism', 'Prism', '\n<pre><code class="language-php">', '</code></pre>\n'); //为[Prism]标签添加快速输入按钮
  </script>
<?php}
add_action('admin_print_footer_scripts', 'mxthemes_add_quicktags');

平时我需要高亮的php语言比较多,所以只添加了php,按钮名称为Prism(为了感谢开发者)。如果你需要高亮其他语言,请自行添加快速输入按钮。

使用小技巧

需要注意的是:Qtags快速输入按钮需要在文本编辑模式下使用,如果直接粘贴代码到这里可能会被WordPress自动过滤掉。直接在可视化编辑模式下粘贴代码,WordPress会自动将代码中的符号进行转义。此时,切换到文本编辑模式下,选中刚刚粘贴的代码,然后狠狠地点击一下Prism按钮即可。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。