最近蘇醒的網(wǎng)站改版，在集成代碼高亮方面，嘗試過好幾種辦法，又免插件的、有用插件的，其中發(fā)現(xiàn)Google Code Prettify來實現(xiàn)代碼高亮是最簡單和方便的，而且prettify 非常小，使用它來實現(xiàn)代碼的高亮顯示是個不錯的選擇。接下來，就給大家介紹下主題集成prettify代碼高亮的辦法：
教程
1.檢測文章中是否插入了pre標(biāo)簽。若插入了代碼，就在網(wǎng)頁的footer部分插入相應(yīng)的prettify.js和prettify.css。把以下代碼放到主題文件的functions.php文件中。
//正則匹配pre插入相應(yīng)的prettify.js和css by suxing.me
add_filter('wp_footer','add_prettify');
function add_prettify(){
//定義全局post
global $post;
//正則匹配pre開始標(biāo)簽
preg_match_all('|(<pre)|i', $post->post_content, $matches);
if(is_single() && !empty($matches[0])) {
//如果存在pre標(biāo)簽時，就把以下代碼加入到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>就可以使用標(biāo)簽實行代碼高亮了。
下載
[download-button ]百度云下載[/download-button][download-button ]官方下載[/download-button]