wordpress免插件使用Google Code Prettify实现代码高亮

在集成代码高亮方面,尝试过好几种办法,又免插件的、有用插件的,其中发现Google Code Prettify来实现代码高亮是最简单和方便的,而且prettify 非常小,使用它来实现代码的高亮显示是个不错的选择。

接下来,就给大家介绍下wordpress主题集成prettify代码高亮的办法:

wordpress代码高亮教程

1.检测文章中是否插入了pre标签。若插入了代码,就在网页的footer部分插入相应的prettify.js和prettify.css。把以下代码放到主题文件的functions.php文件中。

//正则匹配pre插入相应的prettify.js和css by suxing.me    
add_filter('wp_footer','add_prettify');    
function add_prettify(){    
//定义全局post    
global $post;    
//正则匹配pre开始标签    
preg_match_all('|(<pre)|i', $post->post_content, $matches);    
if(is_single() && !empty($matches[0])) {    
//如果存在pre标签时,就把以下代码加入到footer之中    
?>    
<link rel=stylesheet id=is-load-css href=<?php bloginfo('template_url'); ?>/js/prettify.css/>    
<script type=text/javascript src=<?php bloginfo('template_url'); ?>/js/prettify.js></script>    
<script type=text/javascript>    
jQuery('document').ready(function(){    
jQuery('.post pre').addClass('prettyprint linenums')    
.wrap('<div class=precode clearfix></div>');    
window.prettyPrint && prettyPrint();    
});    
</script>    
<?php    
}    
}

2.把prettify.js和prettify.css都加载主题目录的JS文件夹里面。

3.最后,在编辑文章的时候,输入

<pre class=prettyPrint>代码放这里</pre>

就可以使用标签实行代码高亮了。

Google Code Prettify下载地址:https://code.google.com/p/google-code-prettify/

相关文章

我想将wordpress的默认接口路由改掉,愿意是默认的带一个 wp...
wordpress自定义分类法之后,我看到链接都自动在后面添加了一...
事情是这样的,我用 get_post_type 函数创建了一个自定义分类...
最近网站莫名其妙的被顶上了,过一个多小时,就注册一个账号...
最近服务器要到期了,就想着把网站转移到另外一台服务器,本...
今天在写wordpress的接口,然后碰到个奇怪的问题,怎么访问都...