热搜： Python 编程 PHP Microsoft 编程语言

WordPress如何使用prettify如何实现代码高亮后挤成一团不分行怎么办？

发布时间：2023-05-22 13:19:04 来源：互联网

.

一个兢兢业业、无微不至的保姆。你用自己的一只手——雪，把那青绿的麦苗爱抚地搂在怀里，给他以温暖和关怀。麦苗在那层层棉被下静静地期待，期待着来春生长发育。蛇、鳝、熊等等，有的钻进了深泥，有的藏入树洞，休息一冬，养精蓄锐，方有新春来到时的精神振奋。你用自己的另一只手――寒风，举刀挥剑，把那些残害农作物的害虫，砍光杀尽，把那些残害人类、牲畜的虎豹豺豺狼驱赶进深山老林。冬呵！你严守阵地，不容侵犯；你，是一位最负责任的对友火热温情，对敌残忍无情的好保姆。

让文章页中的代码高亮显示有助于提升用户体验，所以网络上有各种各样实现代码高亮显示的办法，其中 WordPress 网站使用 prettify.js 实现代码高亮显示还是比较简单的，具体实现和使用办法可以参考『Nana 主题和 Blogs 主题代码自动高亮及使用好代码教程』。但是老午博客添加这个功能之后前端显示的代码都是挤成一团不分行的，具体见下图：

prettify.js 实现代码高亮未分行挤成一团

昨晚为了解决这个问题，反复测试调试都未能解决，今天早上在雅兮网博主的提醒下，对比正常分行和不分行的 HTML 代码，果然发现了问题。原来是老午博客原先添加的 HTML 代码压缩功能时忘记添加 pre 之间的代码不压缩功能（如果确定站点文章不会分享代码，可以不要这个功能），具体代码如下：

//当检测到文章内容中有代码标签时文章内容不会被压缩
function unCompress($content) {
if(preg_match_all('/(crayon-|<\/pre>)/i', $content, $matches)) {
$content = '<!--wp-compress-html--><!--wp-compress-html no compression-->'.$content;
$content.= '<!--wp-compress-html no compression--><!--wp-compress-html-->';
}
return $content;
}
add_filter( "the_content", "unCompress");

把这个不压缩 pre 之间的代码功能添加上之后，果然一切正常了。正常高亮显示的代码如下图：