prettify实现代码高亮后挤成一团不分行怎么办？

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

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

昨晚为了解决这个问题，反复测试调试都未能解决，以为是代码问题换了其他代码不行，人工分行输入进去不行，以为是换行符问题结果又不是，进入数据库直接看文章内容中的代码又一切正常，最后认命放弃使用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之间的代码功能添加上之后，果然一切正常了。正常高亮显示的代码如下图：

prettify.js实现代码高亮已分行

折腾代码有时候往往就卡在某一个小问题上，从这件事也看得出以后添加某些功能时一定要添加完整的代码，不要漏掉某一部分，要不然出问题排查的时候会非常耗时。

您可能感兴趣的文章

• 「推荐」WordPress新手入门教程，适合新手站长
• 如何利用老薛主机自带功能创建WordPress站点？
• 老薛主机怎么更改wordpress模板?
• 怎么搭建一个WordPress独立博客？
• 老薛主机的cPanel面板添加文件白名单教程
• 老薛主机cPanel面板自定义php.ini的图文教程
• 老薛主机磁盘空间满了怎么办?如何清理空间?
• 老薛主机如何申请购买独立IP？附操作流程
• 老薛虚拟主机如何提交工单解决问题？
• 老薛主机怎么优化从而提高访问速度？
• 老薛虚拟主机如何自助生成SSL证书？
• 如何解决老薛主机大淘客500错误问题?