在Markdown使用代码高亮Google Code Prettify

Markdown上代码高亮，最开始打算用SyntaxHighlighter（为了跟之前保持一致），折腾了一段时间，发现有个问题很难逾越：SyntaxHighlighter要求

…

间的代码，所有左尖括号<必须全部转化成HTML实体<，详情见博文《在Markdown使用代码高亮SyntaxHighlighter》。所以决定寻找另一款代码高亮，最后选择Google Code Prettify，因为StackOverflow和Google Code也用这个货，除此之外，Google Code Prettify还有一个很酷的特性，可以启发式识别语言。本文分享如何安装Google Code Prettify并介绍如何使其与SyntaxHighlighter兼容。

1. 无插件安装Google Code Prettify

步骤1：下载和定制

在Google Code Prettify官网下载prettify-small-4-Mar-2013.tar.bz2，放到主题或子主题目录下。另，Google Code Prettify已经移到了GitHub，在这里。

目前官方只提供5种主题样式，在这里预览效果，下载自己喜欢的主题样式（在prettify-4-Mar-2013.tar.bz2下的styles/），并放到上述的google-code-prettify/目录下。也可以找个第三方提供的主题样式，比如这里。

步骤2：加载js和css

在functions.php添加必备css样式和js脚本，源代码如下（选个自己喜欢的主题）：

function add_google_code_prettify_scripts() {    wp_enqueue_style( ‘prettify.css’, get_stylesheet_directory_uri() . ‘/google-code-prettify/prettify.css’ );    wp_enqueue_style( ‘sons-of-obsidian.css’, get_stylesheet_directory_uri() . ‘/google-code-prettify/sons-of-obsidian.css’ );     wp_enqueue_script( ‘prettify.js’,  get_stylesheet_directory_uri() . ‘/google-code-prettify/prettify.js’, array(), false, false);}add_action( ‘wp_enqueue_scripts’, ‘add_google_code_prettify_scripts’ );

我的google-code-prettify是在子主题，使用get_stylesheet_directory_uri()获取当前目录，如果是放在主题，则使用get_template_directory_uri()。

步骤3：启用Google Code Prettify

在footer.php中“前加入如下代码就能实现代码高亮了。

在我的例子种，如果用$代替jQuery会提示Uncaught TypeError: $ is not a function错误。

2. 与SyntaxHighlighter兼容或取代

在Markdown使用triple backticks插入代码块会被解析成

…

，这里

…

会被SyntaxHighlighter处理，而

…跟...冲突（我还自定义了样式），所以如果只是按上述步骤3简单加载Google Code Prettify，新插入的代码会高亮得一塌煳涂，更别说SyntaxHighlighter要求所有<需要转换成<）。

有个解决办法很容易想到，那就是将

…转化成…，以下是实现该功能的源代码（得益于＠powerxing的指点）：

事实上，上述代码让Google Code Prettify彻底代替了SyntaxHighlighter，见这一行jQuery(this).removeClass().addClass(‘prettyprint linenums’);，这样整个网站的代码风格再次统一了。

如果triple backticks后没有声明语言，不用担心，Google Code Prettify的启发式算法会自己判段。Google Code Prettify默认支持的语言后缀lang-*有：

“bsh”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, “java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”,”xhtml”, “xml”, “xsl”

至此，可以自豪地在Markdown插入代码块了，此刻我泪流满面。