wordrepss让pre支持php代码并换行

前言

今天在wordpress的使用中,发现放上去php源码后,因为有DIV标签,可能会导致页面错乱。上网搜了一下,是因为WordPress 自身有一个强大的 HTML 标签过滤系统,会导致在文章和评论中插入的 PHP、CSS、HTML、JS 等代码直接消失,因此需要将codepre内的符号标签编码转义为 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+ */ 
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。本站所有内容均由李哒胖子原创,码字不易,欢迎打赏。如需在使用过程中有遇到任何问题,可以随时联系本人+V18003862798!!!

给TA打赏
共{{data.count}}人
人已打赏
bootstrap前端笔记

BootStrap框架的优缺点以及使用中的BUG

2022-10-16 13:13:36

前端教程前端笔记

关于webkit-transition CSS过渡不适用于百分比高度

2022-11-3 19:12:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧