› › › 文章

在wordpress中用google code prettify使代码高亮

A-A+
765次浏览
  编辑于：2018-04-12
文章目录

前言

最近看到其他大佬博客的代码高亮挺漂亮的，所以就研究了一下谷歌出品的代码高亮项目google code prettify。这里记录一下使用的过程。

安装

虽然可以通过一些插件来使用这个项目，但是我个人不太喜欢加入太多的插件，所以这里采用了项目文档所介绍的方法。

在线资源

因此在国内使用此种方法，你需要把文件下载到本地服务器，然后修改run_prettify.js的“var LOADER_BASE_URL =”，将其修改为你的本地路径，因此推荐使用本地资源的方法。
你可以在线引用相关的代码：
在wordpress后台中进入，外观-编辑-主题页脚，如果你在这个页面看不到任何文件，请修改php的配置文件php.ini(lnmp此文件在/usr/local/php/etc/php.ini，删掉里面的scandir,保存并重启php-fpm:service php-fpm restart
将下面这段代码加入到</body>标签之前。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

本地资源

当然，你也可以把文件下载到本地来运行。
在线和本地二选一即可。
进入到你网站的目录

cd /home/wwwroot/你的网站目录

下载并解压相关文件

wget https://github.com/google/code-prettify/raw/master/distrib/prettify-small.zip
unzip prettify-small.zip

将下面这段代码插入到</body>标签之前。

<link rel="stylesheet" type="text/css" href="/google-code-prettify/prettify.css">
<script type="text/javascript" src="/google-code-prettify/prettify.js"></script>
#如果你把google-code-prettify文件放到了其他目录请相应的修改

调用资源（在线引用相关资源不需要这一步）
这些代码依然插入到</body>标签之前。

<body onload="PR.prettyPrint()">

使用

在插入代码的时候只需要将其放置在<pre class="prettyprint linenums">和</pre>之间即可。

<pre class="prettyprint linenums">
代码
</pre>

这样写是默认会显示行数的，如果不想显示行数，删掉linenums即可。

优化

默认情况下，每次想要使用这个代码高亮，都需要输入<pre class="prettyprint linenums">，显得很麻烦。
可以在</body>标签之前加入下面的代码，

<script type="text/javascript">
 jQuery(document).ready(function () {
 jQuery("pre").addClass("prettyprint linenums");
 prettyPrint();
 });
</script>

这个功能需要jQuery，如果主题没有引用jQuery，那么在</body>标签之前加入如下代码，当然很多主题已经引用了jQuery。

<script type="text/javascript" src="<?php echo home_url(''); ?>/wp-includes/js/jquery/jquery.js"></script>

以后使用的时候，就可以直接

<pre>
代码
</pre>

这样会方便一点
代码高亮默认是每行不展开的，一行不论多长都会显示在一行里，这样看起来不太美观，可以自定义下CSS。
在wordpress后台中进入，外观-编辑-主题页眉，将下面这段代码插入到</head>标签之前。

<style type="text/css">
        pre {
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+ */
        }
</style>

默认的行号显示是每五行显示一次，可以修改为每行都显示。
将下面这段代码插入到上面代码的</style>之前}之后。

li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }

enjoy and have fun.
参考链接：
https://www.jeffdesign.net/blog/71/
http://www.lrxin.com/archives-355.html
https://github.com/google/code-prettify

发表回复