添加代码高亮

前面写了几篇文章,里面有不少代码,但是没有颜色看起来够奇怪的,看见别人博客里面的代码都有高亮,yellowko表示也想要啊QAQ。然后就发现了Google的一个开源项目google-code-prettify,这是一个能自动识别代码语法并高亮代码的js脚本,只要把这行代码插入到header.php的里似乎就好了。

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

使用时把代码包含在<pre class=”prettyprint”>…</pre><code class=”prettyprint”>…</code>就好了,还提供添加linenums来添加行号等功能。然后我就试了试。

emmmmm啥玩意啊,怎么这么简单啊,就一行代码的事,我看你这是在看轻我yellowko。

不过这个颜色和字体看起来真不爽,还有明显的边框我偏要换掉它,口亨!去问谷歌娘,发现一个专为GCP准备的开源主题代码,下载到主题目录后用下面的语句同样加入到header.php的</header>前,成功更改主题。

<link href="<?php bloginfo('template_directory'); ?>/prettify.css" type="text/css" rel="stylesheet" />

在这里使用到了这个WordPress的PHP函数:

bloginfo('template_directory');

作用是获取到目前所使用到的主题这个文件夹的根目录,后面紧接着的是我的复制来的主题的代码文件的名称。

不过偶然发现这个东西直接从Google那里调用似乎挺花时间的:

反正也不大,直接从GitHub把代码下到主题文件夹里(注意这里使用的是prettify.js,不是原来的run_prettify.js,如果使用,那个脚本还是会下载一份pretty.css那么就与我们的目的相背了,下载到的代码只需保留各种语言的js以及prettify.js和自己修改过的prettify.css就行),把js的地址稍作修改:

<script src="<?php bloginfo('template_directory'); ?>/gcp/prettify.js"></script>

还得在后面加一句让他能够在页面加载后执行,Google给的例子也是在这里加载

<script type="text/javascript">window.onload = function(){prettyPrint();};</script>

但是使用这种方法的话由于yellowko的页眉背景图片比较大,要加载很久导致所以会导致迟迟不能出现效果,所以yellowko不用上面这句来代码,而是选择在footer.php中插入这段代码

<script type="text/javascript">prettyPrint();</script>

这样就会在页头的背景加载之前给代码上色。可以看到从本地加载脚本快了不少嘛:


下面是其他发现

在尝试中还发现了linenums只能每5行写一个行号,结果仔细看一看原来文档里有说。。。。 还有就是另一个重大发现,当修改style.php时,第一次回生效,但第二次以后怎么改都不会生效,主机上看见的文件里都改掉了,但是浏览器调试工具里看见的代码就是没变,这就很气啦!问了谷歌娘相关问题后发现是因为.htaccess有缓存的原因,由于修改style.php文件后没有修改它的版本号,所以导致主机认为没有改变所以一直在加载缓存中旧版本的style.php,所以在style.php中找到下面的代码(按照函数名找就好啦,不同主题里面的具体代码都不同)

wp_enqueue_style( $stylesheet, get_stylesheet_uri(), false, defined( 'PRIMER_CHILD_VERSION' ) ? PRIMER_CHILD_VERSION : PRIMER_VERSION );

这里面的变量就是主题的版本号啦,找到定义的位置随便改一下,不过最好往更高版本改,style.php的新特性就能被添加啦,成功后似乎再改回来也不会加载回原来版本。具体怎么改这个参数能实现什么效果就要探索一下,yellowko了解得也不多,如果你知道而且有兴趣的话可以告诉我的。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据