在Markdown使用代码高亮Google Code Prettify

Markdown上代码高亮,最开始打算用SyntaxHighlighter(为了跟之前保持一致),折腾了一段时间,发现有个问题很难逾越:SyntaxHighlighter要求<pre>...</pre>间的代码,所有左尖括号<必须全部转化成HTML实体&lt;,详情见博文《在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中“前加入如下代码就能实现代码高亮了。

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

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

2. 与SyntaxHighlighter兼容或取代

在Markdown使用triple backticks插入代码块会被解析成<pre><code>...</code></pre>,这里<pre>...</pre>会被SyntaxHighlighter处理,而
<code>...</code>`...`冲突(我还自定义了样式),所以如果只是按上述步骤3简单加载Google Code Prettify,新插入的代码会高亮得一塌糊涂,更别说SyntaxHighlighter要求所有<需要转换成&lt;)。

有个解决办法很容易想到,那就是将<pre><code>...</code>转化成<pre class="...">...</pre>,以下是实现该功能的源代码(得益于@powerxing的指点):

<script>
jQuery(document).ready(function(){
    jQuery('pre').each(function(){
        var el = jQuery(this).find('code');
        var code_block = el.html(); // remove the pairwise tag of <code></code>
        var lang = el.attr('class');

        if (el.length > 0) { // <pre>...</pre> with <code>...</code> inside
            if (lang) {
                jQuery(this).addClass('prettyprint linenums lang-' + lang).html(code_block);
            } else {
                jQuery(this).addClass('prettyprint linenums').html(code_block);
            }
        } else { // <pre>...</pre> without <code>...</code> inside
            jQuery(this).removeClass().addClass('prettyprint linenums'); // take over SyntaxHighlighter
        }
    });
});
</script>

事实上,上述代码让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插入代码块了,此刻我泪流满面。

Series: 代码高亮Syntax Highlighting (1/5)

Leave a Reply

Your email address will not be published. Required fields are marked *

4 thoughts on “在Markdown使用代码高亮Google Code Prettify

  • Sunday March 20th, 2016 at 11:20 AM
    Permalink

    你好,你这里写的,是不是在Mou编辑器中无法预览的, 我想问一下在Mou中如何去让代码高亮?还有functions.php文件是在哪里??

    Reply
    • Sunday March 20th, 2016 at 08:30 PM
      Permalink

      没用过Mou,本文介绍如何在wordpress使用google code prettify。functions.php是在wp-content/themes/yourthemename/functions.php

      Reply
      • Monday March 21st, 2016 at 09:30 AM
        Permalink

        哦哦哦.好的,谢了,我用的hexo,怪不得

  • Pingback: 在Markdown使用代码高亮SyntaxHighlighter | | Spark & Shine