之前我一直习惯使用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代码高亮库。
0 Comments