在集成代码高亮方面,尝试过好几种办法,又免插件的、有用插件的,其中发现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/