WordPress不用插件集成Google Code Prettify

Google Code Prettify是一个用来对各种页面上的源码进行语法着色高亮显示的JavaScript库。相对于其它的代码高亮功能,Google Code Prettify很小巧,解压后也只有15K的大小。并且支持大部分常用的语言。不需要指定语言,能够自动检测代码的语言,比较智能。

1.先下载JS和CSS文件

本地下载:点击下载

2.下载上面提供的JS和CSS文件放到主题目录下,并把下面的代码放到主题目录functions.php文件中。想改调用的路径的请自行处理…

/*-----------------------------------------------------------------------------------*/
/* 代码高亮(正则匹配pre插入相应的prettify.js和css) */
/*-----------------------------------------------------------------------------------*/
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'); ?>/prettify/prettify.css"/>
		<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/prettify/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
	}
}

3.把需要着色的代码放到<pre>标签中即可。

© 版权声明
THE END
喜欢就支持一下吧
点赞9赞赏
分享
评论 抢沙发

请登录后发表评论