为 WordPress 文章添加代码高亮支持

WordPress 编辑器没有代码高亮功能，为改善文章代码片段显示效果，研究了下手动添加方法。先找个代码高亮 JS 现成轮子（这里用的是 Google Code Prettify），然后设置按需加载和触发事件，最后添加 CSS 样式，往编辑器添加代码插入按钮就完成了。

从 JS 里加载文件及触发事件

在 JS 里引入文件有个好处，可以添加判断，只在有代码片段的文章页面加载。

if ($("pre.prettyprint").length > 0) {
	$.getScript("https://cdn.bootcss.com/prettify/r298/prettify.min.js").done(function() {
		PR.prettyPrint();
	});
}

上面是 jQuery 用法，如需原生 JS 代码查看这篇文章。

如果你不想单独创建 JS 文件，也可直接输出到页面。将下面代码放入主题 functions.php 文件。

function load_prettify_script() {
	if ( is_single() || is_page() ) {
$add_check_js = <<<'EOT'
<script>
$(document).ready(function() {
	if ($("pre.prettyprint").length > 0) {
	$.getScript("https://cdn.bootcss.com/prettify/r298/prettify.min.js").done(function() {
		PR.prettyPrint();
	});
	}
});
</script>
EOT;
echo $add_check_js ."\n";
	}
}
add_action( 'wp_footer', 'load_prettify_script' );

设置“文章”和“页面”加载 JS

function post_scripts() {
	if ( is_single() || is_page() ) {
		wp_enqueue_script( 'code-prettify', get_theme_file_uri( '/js/code-prettify.js' ), array(), null, true );
	}
}
add_action( 'wp_enqueue_scripts', 'post_scripts' );

如第 1 步骤选择直接输出到页面，那么这步可以省略。

添加代码高亮CSS样式

pre.prettyprint{background:#273238;border:0px solid #888}
ol.linenums{margin-top:0;margin-bottom:0}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#969896;list-style-type:decimal;padding-left:.625rem}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#273238}
span.str{color:#ec7600}
span.kwd{color:#d4a0e9}
span.com{color:#6e98ab}
span.typ{color:#6dcdcb}
span.lit{color:#ffce54}
span.pun{color:#e9eded}
span.pln{color:#f1f2f3}
span.tag{color:#a0d468}
span.atn{color:#e0e2e4}
span.atv{color:#f2777a}
span.dec{color:#e28964}
/* 打印样式 */
@media print{
span.str{color:#060}
span.kwd{color:#006}
span.com{color:#600}
span.typ{color:#404}
span.lit{color:#044}
span.pun{color:#440}
span.pln{color:#000}
span.tag{color:#006}
span.atn{color:#404}
span.atv{color:#060}
}

点击查看更多配色方案。

往文本编辑器添加代码插入标签

function add_quicktags_custom_button() {
	if (wp_script_is('quicktags')){
$quicktags_custom_js = <<<'EOT'
<script>
QTags.addButton('eg_pre_2', '代码块(带行号)', "\n<pre class=\"prettyprint linenums\">", "</pre>\n", '', '预格式化文本标签');
QTags.addButton('eg_pre_1', '代码块', "\n<pre class=\"prettyprint\">", "</pre>\n", '', '预格式化文本标签');
</script>
EOT;
echo $quicktags_custom_js ."\n";
	}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags_custom_button' );

如需调整按钮顺序，请查看 Quicktags API 文档。

之后要插入代码片段，点击文本编辑器里的添加按钮即可。如果遇到编辑器字符转义问题，切换到可视化模式里粘贴。