博客園 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代碼」添加以上代碼