在 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

相關標籤/搜索