腾讯云服务器优惠活动华纳云香港服务器

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

WordPress主题推荐

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

WordPress使用prettify实现代码高亮后挤成一团不分行怎么办?-第1张-boke112百科(boke112.com)

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 之间的代码功能添加上之后,果然一切正常了。正常高亮显示的代码如下图:

WordPress使用prettify实现代码高亮后挤成一团不分行怎么办?-第2张-boke112百科(boke112.com)

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

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

总得来说,正确添加 prettify.js 实现代码高亮显示之后都能正常使用,如果发现前端代码不分行挤成一团的,建议看看自己所使用主题的相关函数或功能代码或相关压缩插件,特别是压缩前端 HTML 代码功能

以上内容整理自@老午博客

赞 (0) 打赏
版权声明:本文为转载文章,来源于 转载砖家 ,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
香港云主机55元/年
wu