在 Tumblr 的博客中加入代码语法高亮

Tumblr 的博客默认不支持代码的语法高亮,但是发现 Customize 模板的时候可以选择编辑模板的 HTML。这样就可以修改模板使其支持代码的语法高亮。

网上搜了一下,找到连个语法高亮的 UI 库:

  • Alex Gorbachev’s Syntax Highlighter
  • Google Code Prettify

以 Google Code Prettify 为例,只要在编辑模板 HTML 时,在 中加入以下代码:

<!-- For Syntax Highlighting -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link>  
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> 
<script>
    function styleCode() {
        if (typeof disableStyleCode != 'undefined') { return; }

        var a = false;

        $('code').each(function() {
            if (!$(this).hasClass('prettyprint')) {
                $(this).addClass('prettyprint');
                a = true;
            }
        });

        if (a) { prettyPrint(); } 
    }

    $(function() {styleCode();});
</script>

然后保存,在写的时候用

 将代码段包住就可以了。

你可能感兴趣的:(工具)