强烈推荐手动安装谷歌代码高亮 google-code-prettify到wordpress

文章目录[隐藏]

一、文件介绍
二、引入文件
三、重要说明
四、集成到wordpress文本编辑器
四、css样式修改
五、文件下载
六、有关插件google-code-prettify
七、google-code-prettify支持的高亮语言

google-code-prettify 是最棒的代码高亮插件，一点也不过分，因为它是谷歌官方插件，以前在国内使用非常火爆，现在由于你懂得，我们今天如果把它手动安装在我们的主题下，用起来非常酷，并且我们把它集成在wordpress编辑器中，使用方便，这里给你提供了所有的代码和样式供你下载。文章最后提供百度网盘下载。

一、文件介绍

下载后解压包里主要的两个文件， pretty.css 和 pretty.js我们要在主题下面把它引入到我们的主题为了对多语言的支持，我们在 google-code-prettify 文件夹下面放了所有官方语言支持文件，你可以这样，把解压后的google-code-prettify 文件夹放在你的主题的根目录下，不是网站根目录，是这样滴 \wp-content\themes\主题文件夹\google-code-prettify\，当然你也可以直接放在主题根目录下面，这主要影响你下面的文件引入路径，这不是主要的。

二、引入文件

1、在主题的header.php文件的在< head> 标签中引入 pretty.css 文件：

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

2、在主题的header.php文件的在< head> 标签中引入 jquery.js文件,因为要依赖于jquery。

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

如果主题已经引入 jquery.js，上一行可以删除，WordPress都已经引入了jquery,其实是可以省略的。

3、在主题的header.php文件的在< head> 标签中引入 prettify.js文件。

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/google-code-prettify/prettify.js"></script>

4、初始化prettify

```
<script type="text/javascript">
```
```
 jQuery(document).ready(function () {
```

 jQuery("pre").addClass("prettyprint linenums");

```
 prettyPrint();
```
```
 });
```
```
 </script>
```

三、重要说明

1、我们为了代码执行效率，不主张以上引入方法，你可以参考 WordPress引入css/js两种方法

2、我们已经把初始化代码放到jquery.js文件的最后，所以第四步初始化就不需要了。

3、在初始化时，由于加入了 addClass所以你在引用时，比如每次需要插入代码的时候，我们只需要插入 <pre>你的代码 </pre> 就可以。

4、也就是说，你只需要引入两个文件pretty.css，prettify.js

5、会自动识别你的语言，不要在设置语言格式，默认添加了行号。

四、集成到wordpress文本编辑器

将以下代码拷贝到主题的 functions.php 文件中：

```
/*
```

*添加pre到HTML编辑器自定义标签按钮

```
*/ 
```

add_action('admin_print_footer_scripts','eg_quicktags');

```
function eg_quicktags() {
```
```
?>
```

<script type="text/javascript" charset="utf-8">

QTags.addButton( 'eg_pre', 'pre', '<pre>代码代码代码\n</pre>', '', 'q' );

```
</script>
```
```
<?php
```
```
}
```

效果如下图：

四、css样式修改

你只需要换掉 google-code-prettify文件夹下的prettify.css样式表内容就可以了。这里在百度网盘提供了35个样式表供你选择.

五、文件下载

压缩包里有两个文件夹，一个是样式表：themes,一个是google-code-prettify。

百度网盘：http://pan.baidu.com/s/1dFjuWAt

六、有关插件google-code-prettify

国内作者愚人码头已经制作了插件，如果你喜欢插件方式，直接安装，这里提供插件的百度盘下载，

插件下载：http://pan.baidu.com/s/1jIJc8DK

七、google-code-prettify支持的高亮语言

在默认情况下支持的文件扩展名包括：bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html,java, js, m, mxml, perl, pl, pm, py, rb, sh,xhtml, xml, xsl

也就是说，Google Code Prettify支持高亮的语言：C, Java, Python, Bash, HTML, XML, Javascript, Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, LLVM, Lua, Matlab, Pascal, R, Scala, SQL, LaTeX等等......语言。

推荐另一款代码高亮插件 WordPress代码高亮插件 WP-GeSHi-Highlight

511遇见

不一样的遇见