Google Code Prettify 是 Google 开源的一个用于代码高亮的 Javascript 库,支持 C/C++, Java, Python, Ruby, PHP,Javascript 等等常见语言,目前包括 Google Code、Stackoverflow.com 在内的很多网站都在使用它。最吸引人的是,在使用它进行代码高亮时,甚至不需要指明语言类型,Prettify 会自动判断并处理。
使用 Prettify 一般只需要包含两个文件:prettify.js 和 prettify.css,压缩过后的 prettify.js 大小差不多在 15K 左右,非常小巧。
简单使用
在网站页面中引用 Prettify文件:
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
同时增加以下代码,让页面加载完成时执行 Prettify:
<script type="text/javascript"> window.onload = function(){prettyPrint();}; </script>
Prettify 会在网页中查找<pre class="prettyprint">...</pre>
或者<code class="prettyprint">...</code>
包围的代码片断,对它们进行高亮。
下面是一个简单的例子:
<pre class="prettyprint"> import os def getcwd(): return os.getcwd() </pre>
更多详细的用法可以看 Prettify 的 Readme 页面。
WordPress 集成 Prettify
之前我一直通过插件的形式来使用 Prettify,Wordpress 上这种类型的插件很多,例如WP Code Prettify。安装插件的好处是省力,不需要折腾,但是不好的地方是插件往往会引入些额外的 CSS 和 JS 文件。
所以在制作 dangopress 主题的时候我就希望把代码高亮的功能集成到主题中,而不是再额外通过插件来实现(其实我一直希望有一款给程序员专用的主题,但是貌似没找到)。看了下市面上的几个高亮插件,核心的功能其实就几行代码,移植过来也非难事。
首先,将以下代码拷贝到主题的 functions.php 文件中:
/* * Escape special characters in pre.prettyprint into their HTML entities */ function dangopress_esc_html($content) { $regex = '/(<pre\s+[^>]*?class\s*?=\s*?[",\'].*?prettyprint.*?[",\'].*?>)(.*?)(<\/pre>)/sim'; return preg_replace_callback($regex, dangopress_esc_callback, $content); } function dangopress_esc_callback($matches) { $tag_open = $matches[1]; $content = $matches[2]; $tag_close = $matches[3]; //$content = htmlspecialchars($content, ENT_NOQUOTES, get_bloginfo('charset')); $content = esc_html($content); return $tag_open . $content . $tag_close; } add_filter('the_content', 'dangopress_esc_html', 2); add_filter('comment_text', 'dangopress_esc_html', 2); function setup_load_script() { // Register prettify.js wp_enqueue_script('prettify-js', $url_prefix . '/scripts/prettify.min.js', array(), '20130504', true); } add_action('wp_enqueue_scripts', 'setup_load_script');
这段代码的核心功能是将<pre class="prettyprint">...</pre>
标签中的特殊字符,例如'<','>',转换成对应的HTML 字符实体,以便代码正确地输出。然后,在页面载入的时候加载 prettify.min.js 脚本。
有同学会问,不是还要加上window.onload = function(){prettyPrint();};
吗?哈,为了简单起见,我已经把这句加到 prettify.min.js 的最后面了,具体可以看未压缩前的版本 prettify.js。除此之外,我还将 lang-css.js 的内容也集成到 prettify.js 里面了,能少加载一个文件就是一个文件。
请问博主集成进dangopress主题的代码高亮插件都支持哪些编程语言?(我看到当前页面只有lang-bash)
@m0ver:参考:https://github.com/google/code-prettify
@m0ver:常见的语音应该都支持的,不过主题里面默认用的版本不是最新的,但是应该差别不大。如果需要,可以更新。
加入这样的代码就可以不用每次都写 class=“prettyprint”了:
$(document).ready(function(){
$("pre").addClass("prettyprint");
});
博主的主题不错,大赞!
我是技术盲,但是想问一下要是用的Highlight.js高亮应该怎么集成到function.php里面呢
这个我的主题是集成的,可是不能显示PHP代码,会直接转义的,能帮我看看嘛
安装教程,高亮已经成功显示了。 但是还有个问题,怎么才能显示行号呢? 我用的是Google提供的沙漠主题~ 谢谢
@第十一颗行星:
@第十一颗行星:你好,我按你的弄,怎么还是不行,麻烦你了
评论测试: