博客園 Markdown 樣式優化筆記

配置博客園

進入博客園后台管理界面，按“設置”頁。

• 在“頁面定制CSS代碼”定制 CSS。
• 在“頁腳Html代碼”添加相應的JavaScript標簽與代碼。

優化博客園Markdown樣式（代碼行號、版權信息、章節目錄等）
如何自定義博客園代碼高亮主題，同時分享自己使用的黑色主題

怎樣為 Kotlin 這樣的非“常用語言”添加語法高亮？

博客園使用 hightlightjs 插件渲染代碼着色高亮。博客頁面的源碼中可以看到對 hightlightjs 的引用。
hightlightjs 着色的原理是將<pre><code>標簽范圍內代碼中的關鍵字，數字，字符串等元素套上<span>標簽並加上專用的 class 。
hightlightjs 當前支持 176 種語言，但是非“常用語言”需要引用相應的語言包。
這里非“常用語言”是指 hightlightjs 官網下載頁中 Common 類 23 種常用語言之外的語言。

使用方法：How to use highlight.js
下載頁：Getting highlight.js
語法高亮演示：highlight.js demo
Kotlin 以及其他語言包：highlight.js - cdnjs.com

引用 Kotlin 語言包的方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/kotlin.min.js"></script>

※在“頁腳Html代碼”添加以上代碼

博客頁面加載后雖然加上了語法高亮，但由於不是常用語言缺乏語言包，Kotlin 語言代碼被誤認為 Nginx 腳本，代碼已經渲染完畢被加上了<span>標簽，因此要再次渲染的話首先需要將代碼還原。
以下 JavaScript 代碼清除 pre 標簽中除 code 以外的標簽，在引用了相應語言包的前提下讓 hightlightjs 重新渲染。

<script type='text/javascript'>
    var setMyBlog = {
        resetPreCode: function(){
            var pre = $("pre"); //選中需要更改的部分
            if(pre && pre.length){
                pre.each(function() {
                    var item = $(this);
                    // 將<pre>標簽中的html標簽去掉 然后再套上原來的code標簽
                    // 這是因為我們需要重新加上語法高亮，而 hightlightjs 渲染的范圍是<pre><code>中的代碼
                    item.html("<code>" + item.html().replace(/<[^>]+>/g,"") + "</code>"); 
                })
            }
        },
        runAll: function() {
            /* 運行所有方法
             * resetPreCode() 清除代碼中的標簽
             */ 
            this.resetPreCode();
            hljs.initHighlightingOnLoad(); // 重新渲染，添加語法高亮
        }
    }
    setMyBlog.runAll();
</script>

※在“頁腳Html代碼”添加以上代碼

看看效果。以下代碼采用 Markdown 標記```kotlin來標識 Kotlin 語言代碼。

fun <T, R> Collection<T>.fold(
    initial: R, 
    combine: (acc: R, nextElement: T) -> R
): R {
    var accumulator: R = initial
    for (element: T in this) {
        accumulator = combine(accumulator, element)
    }
    return accumulator
}

怎樣為代碼加上行號?

答案是使用 highlightjs-line-numbers.js
該插件將 hightlightjs 插件已經渲染完畢的代碼插入到表格中，然后加上行號。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>

※在“頁腳Html代碼”添加以上代碼

// ...
        runAll: function() {
            this.resetPreCode();
            hljs.initHighlightingOnLoad(); // 重新渲染，添加語法高亮
            hljs.initLineNumbersOnLoad(); // 為代碼加上行號
        }
// ...

※在“頁腳Html代碼”添加以上代碼