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

Eric 杂记 234 次浏览 抢沙发

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 文档

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

发表评论

电邮地址用于 Gravatar 头像显示,不会被公开可见。