WordPress让pre支持php代码并换行

前言

今天在WordPress的使用中，发现放上去php源码后，因为有DIV标签，可能会导致页面错乱。上网搜了一下，是因为WordPress 自身有一个强大的 HTML 标签过滤系统，会导致在文章和评论中插入的 PHP、CSS、HTML、JS 等代码直接消失，因此需要将code或pre内的符号标签编码转义为 HTML 实体。所以，还得动手。

解决方案

使用WordPress的add_filter() 可以挂载一个函数到指定的过滤器上。具体操作就是在所用的主题目录的fuction.php文件加上一下代码：

/*转译php代码*/
add_filter( 'the_content', 'pre_content_filter', 0 );
 
function pre_content_filter( $content ) {
return preg_replace_callback( '|<pre.*>(.*)</pre|isU' , 'convert_pre_entities', $content );
 
}
 
function convert_pre_entities( $matches ) {
return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
 
}

给代码加上高亮

WordPress默认是没用代码高亮的，可以使用google的代码高亮工具Code-prettify。只用把相关的JS和css文件嵌入到你的网页中就行了。你可以选择去官网上把最新的文件Download下来，放在服务器上，也可以选择远程加载  :

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

线上引用发的好处是能实时更新，建议放在整个页面的底部加载应该是个不错的选择。 万事俱备了，加载好文件后想使用Code-prettify就是非常简单的事情了。只需要加上class=”prettyprint”属性就行了，这样就支持了几乎80%的开发语言。

B2主题让pre支持换行

如果你和博主一样使用的7B2主题，默认pre虽然有高亮，但是同样不支持自动换行。可以新增代码：

.entry-content pre{ 
white-space:pre-wrap; /* css3.0 */ 
white-space:-moz-pre-wrap; /* Firefox */ 
white-space:-pre-wrap; /* Opera 4-6 */ 
white-space:-o-pre-wrap; /* Opera 7 */ 
word-wrap:break-word; /* Internet Explorer 5.5+ */