让文章页中的代码高亮显示有助于提升用户体验，所以网络上有各种各样实现代码高亮显示的办法，其中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实现代码高亮已分行
折腾代码有时候往往就卡在某一个小问题上，从这件事也看得出以后添加某些功能时一定要添加完整的代码，不要漏掉某一部分，要不然出问题排查的时候会非常耗时。
您可能感兴趣的文章
文章标签：prettify , WordPress
本文地址：http://www.laow.wang/278.html
版权声明：本文为原创文章，版权归 老午博客 所有，欢迎分享本文，转载请保留出处！
本文地址：http://www.laow.wang/278.html
版权声明：本文为原创文章，版权归 老午博客 所有，欢迎分享本文，转载请保留出处！