欢迎光临
我们一直在努力
扫描二维码在手机上浏览
WordPress相关

WordPress不用插件集成Google Code Prettify

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

  1. 先下载JS和CSS文件
    官方地址网址:https://code.google.com/p/google-code-prettify/downloads/list
    本地下载:点击下载
  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>标签中即可。

另外如果你对代码着色不满意,可以去下面的网址下载你认为着色满意的CSS文件替换下载下来的即可。

THE END
历史上的今天
十二月
8
    哇哦~~~,历史上的今天没发表过文章哦
标签
喜欢就支持一下吧!!!
点赞0打赏分享
版权声明
本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。
转载请注明:文章转载自:灵阳星空 » WordPress不用插件集成Google Code Prettify
本文标题:WordPress不用插件集成Google Code Prettify
本文日期:本文发表于 2019/12/08 12:50:14,最后更新于 2019/12/08 12:50:14,如内容失效,请反馈给我们,谢谢!
本文地址: https://www.jsksky.com/wordpress-integration-google-code-prettify.html

网络臭虫

已发布418篇文章
吃得苦中苦,方为人上人,不卧薪藏胆,哪能苦尽甘来?点击进入我的网站了解更多有关我的信息。

评论 抢沙发

评论前必须登录!

 


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏