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

时间 2019-12-08

标签 tumblr 博客加入代码语法繁體版

原文原文链接

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

网上搜了一下，找到连个语法高亮的 UI 库：html

以 Google Code Prettify 为例，只要在编辑模板 HTML 时，在 <head> 中加入如下代码：jquery

<!-- 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>

而后保存，在写的时候用 <pre><code> 将代码段包住就能够了。svn