利用prettify.js实现WordPress代码高亮

发布于 2018-09-27  374 次阅读


之前我一直习惯使用Enlighter插件来使文章中的代码高亮,但用着用着就发现了这个插件的一个问题:如果不先点击“Toggle RAW Code”按钮就复制多行代码,复制的代码每一行都会缩进一个tab位。这样用起来太不爽了,因此决定想个新的代码高亮方案来替代这个插件。

去大佬们的网站转了一圈,找到一个看起来做得很棒的代码高亮方案,右键审查元素一顿操作,发现这种代码高亮方案基于Google的Code Prettify代码高亮库。到GitHub上看了看prettify.js的使用方法,没想到用法意外的简单。于是大腿一拍,主意敲定,先拿它来试试。

P.S.:这玩意儿用了一会儿之后我又重新开始用起了Enlighter……

1.关于prettify.js

项目地址:https://github.com/google/code-prettify

2.实现步骤

下面将会介绍使用prettify.js实现代码高亮的详细步骤。

2.1.准备工作

先去Releases页面下载prettify.js的压缩包,把压缩包里的文件全部解压到你正在使用的WordPress主题的目录下。

这里假设你将压缩包里的文件解压到主题目录下的prettify文件夹中。

2.2.引入CSS与JS

在主题的header.php中引入CSS文件prettify.css

<link rel='stylesheet' id='code-css' href='<?php bloginfo('template_url'); ?>/prettify/prettify.css' type='text/css' media='all' />

在主题的footer.php中引入JS文件prettify.js

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/prettify/prettify.js"></script>

2.3.触发执行

引入必要的文件之后,就可以触发执行prettify.js了。

触发的方法很简单,执行一下prettyPrint()函数即可。

在你认为合适的位置添加以下JavaScript代码即可。

$(document).ready(function(){
    prettyPrint();
})

如果你使用的WordPress主题开启了Ajax或者Pjax,那么需要对prettyPrint()函数进行重载。

2.4.添加编辑器按钮

做好上面三个步骤之后,代码高亮功能已经可以正常使用了。让代码高亮的方法是在编辑器的文本模式中,把代码置于<pre class="prettyprint linenums"></pre>标签中。

想要用起来更方便的话,不妨给编辑器添加一个自定义按钮。这里以目前(WordPress 4.9.8版本)默认的编辑器TinyMCE为例介绍编辑器按钮的添加方法。

如果想在编辑器的可视化模式中的“格式”下拉菜单里面添加一个代码高亮按钮,就在主题的functions.php中添加这个函数。

if (!function_exists('newDropdown')){
    function newDropdown($settings){
        $new_styles = array(
            array(
                'title'	=>('Custom Styles'),
                'items'	=>array(
                    array(
                        'title'=>('Code Prettify'),
                        'block' =>'pre', 
                        'classes'=>'prettyprint linenums',
                    ),
                ),
            ),
        );
        $settings['style_formats_merge'] = true;
        $settings['style_formats'] = json_encode($new_styles);
        return $settings;
    }
}
add_filter('tiny_mce_before_init', 'newDropdown');

如果想在编辑器的“文本”模式中添加一个代码高亮按钮的话, 就在主题的functions.php中添加这个函数。

if (!function_exists('addPrettify')){
    function addPrettify(){
        ?><script type="text/javascript">
        QTags.addButton('precode','pre-code','<pre class="prettyprint linenums">','</pre>');
        </script><?php
    }
}
add_action('admin_print_footer_scripts','addPrettify');

2.5.CSS修改

最后一步当然是修改一下CSS样式了。你可以在Code Prettify主题仓库找到很多不错的代码高亮主题。

如果你想让代码显示行号的话,需要对prettify.css进行一些修改。修改内容如下:

li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8 {list-style-type: decimal !important;}

3.个人吐槽

用这种方法实现的代码高亮效果还是很不错的。如果不想用插件来实现代码高亮的话,不妨来试试Code Prettify代码高亮库。