搬码资源网广告位 搬码资源网广告位

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

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

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

wordpress代码高亮教程

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

//正则匹配pre插入相应的prettify.js和cssbysuxing.meadd_filter('wp_footer','add_prettify');functionadd_prettify(){//定义全局postglobal$post;//正则匹配pre开始标签preg_match_all('|(<pre)|i',$post->post_content,$matches);if(is_single()&&!empty($matches[0])){//如果存在pre标签时,就把以下代码加入到footer之中?><linkrel="stylesheet"id="is-load-css"href="<?PHPbloginfo('template_url');?>/js/prettify.css"/><scripttype="text/javascript"src="<?PHPbloginfo('template_url');?>/js/prettify.js"></script><scripttype="text/javascript">jQuery('document').ready(function(){jQuery('.postpre').addClass('prettyprintlinenums').wrap('<divclass="precodeclearfix"></div>');window.prettyPrint&&prettyPrint();});</script><?PHP}}

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

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

<preclass="prettyPrint">代码放这里</pre>

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

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

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11653.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?