WordPress集成Google Code Prettify实现代码高亮

WordPress代码高亮插件我一直在使用WP Code Highlight,今日我介绍个集成 Code Prettify实现WordPress代码高亮的方法,我的博客已经换成了这种方法。

直接引用cdn:https://cdn.rawgit.com//code-prettify/master/loader/run_prettify.js,我是下载到主题中,所以手动引用:

加载js

加载class

我的文章class是.post-content,所以查找.post-content中的pre加class prettyprint。

做监听

在body标签内增加

效果示例

WordPress集成Google Code Prettify实现代码高亮效果1
WordPress集成Google Code Prettify实现代码高亮效果1
WordPress集成Google Code Prettify实现代码高亮效果2
WordPress集成Google Code Prettify实现代码高亮效果2

注意

这里我是加载文章也和页面中,你也可以全局加载根据需求,加载js需要在jquery之后。prettify不支持在pre标签中影响全局或者出现夸张的标签,比如script、、body等。

WordPress主题运营访谈QQ群:33148198

WP Code Highlight与do_shortcode的冲突:无法解析PHP代码

WP Code Highlight可以直接使用pre直接解析代码,虽然有些小BUG,但是是唯一HTML标准兼容性检测通过的插件。今天发现它与WordPress的do_shortcode一个冲突,又是一个坑,无法解析php代码。

WordPress主题运营访谈QQ群:33148198