優化博客園Markdown樣式（代碼行號、版權信息、章節目錄等）

博客逐步遷移至 極客兔兔的小站

1.寫在前面

       以前使用過有道雲筆記和爲知筆記，後來偶然喜歡上用Markdown寫文檔。被Markdown的簡潔與大氣所折服，所以拋棄了有道雲，專心使用爲知筆記，這樣github上的文檔和筆記都能統一塊兒來了。最後索性把園子的編輯器改成Markdown了。

       可是園子裏的Markdown渲染效果和爲知筆記、github上的比起來不夠美觀，所以決心改造園子的Markdown樣式。

2.改造之路

2.1 修改CSS

• 在github上搜索到了針對園子的CSS，而且進行了修改，CSS的修改方在此就不贅述了，右鍵->審查元素便可。

/*部分代碼以下*/
.cnblogs-markdown a {
    background: transparent;
}

.cnblogs-markdown a:active,
.cnblogs-markdown a:hover {
    outline: 0;
}

2.2 支持代碼行號顯示

• 嘗試書寫一些內容後，發現雖然支持代碼高亮，可是不支持行號顯示。代碼怎麼能沒有行號呢？
• 審查元素後發現，當使用Markdown編輯器後，代碼被加上了不少html標籤，園子自帶的SyntaxHighlighter插件並不能徹底發揮做用。所以考慮添加Javascript語句，從新渲染代碼部分。

setCodeRow: function(){
    // 代碼行號顯示
    var pre = $("pre.sourceCode"); //選中須要更改的部分
    if(pre && pre.length){
        pre.each(function() {
            var item = $(this);
            var lang = item.attr("class").split(" ")[1]; //判斷高亮的語言
            item.html(item.html().replace(/<[^>]+>/g,"")); //將<pre>標籤中的html標籤去掉
            item.removeClass().addClass("brush: " + lang +";"); //根據語言添加筆刷
            SyntaxHighlighter.all();
        })
    }
}

2.3 自動生成版權信息與章節目錄

setCopyright: function() {
    /* 設置版權信息，轉載出處自動根據頁面url生成
     * window.location.href：讀取當前url
     */ 
    var info_str = '<p>做者：<a>@geektutu</a><br>'+
        '本文爲做者原創，轉載請註明出處：<a class="uri"></a></p><hr></hr>', 
        info = $(info_str),
        info_a = info.find("a"),
        url = window.location.href; 
    $(info_a[0]).attr("href","https://github.com/geektutu");
    $(info_a[1]).attr("href",url).text(url);
    $("#cnblogs_post_body").prepend(info);
},
setContent: function() {
    // 根據h二、h3標籤自動生成目錄
    var captions_ori = $("#cnblogs_post_body h2"),
        captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
        content = $("<blockquote><h4>目錄</h4></blockquote>");
    $("#cnblogs_post_body").prepend(content.append(captions));
    var index = -1;
    captions.replaceWith(function(){
        var self = this;
        if(self.tagName == "H2" || self.tagName == "h2"){
            // 設置點擊目錄跳轉
            index += 1;
            $('<a name="' + '_caption_' + index + '"></a>')
                .insertBefore(captions_ori[index]); 
            return '<a href="#_caption_' + index + '"><strong>' +
                self.innerHTML + '</strong></a><br>';
        } else {
            return self.innerHTML + "<br>";
        }
    });
},

2.4 方法封裝與執行

• 2016/02/12：這篇隨筆剛發佈時，僅實現了代碼行號顯示，謝謝關注留言的朋友
• 2016/03/13：增長了自動生成版權信息與章節目錄
• 考慮到之後將不斷更新，所以將方法封裝，方便擴展，同時方便各位博客園的朋友選擇性地使用，在runAll()中刪去不須要的方法便可

var setMyBlog = {
    setCopyright: function() {
        // 設置版權信息，轉載出處自動根據頁面url生成 
        // ...
    },
    setCodeRow: function(){
        // 代碼行號顯示
        // ...
    },
    setAtarget: function() {
        // 博客內的連接在新窗口打開
        // ...
    },
    setContent: function() {
        // 根據h二、h3標籤自動生成目錄
        // ...
    },
    runAll: function() {
        // 運行全部方法
        this.setAtarget();
        this.setContent();
        this.setCopyright();
        this.setCodeRow();
    }
}
setMyBlog.runAll();

2.5 下載完整源碼

• 源碼已經上傳至 github，後期不斷優化、更新，歡迎關注留言。
• 若是本文對你有用，不妨右下角點個推薦~

3.使用方法

• 如您喜歡本文樣式，能夠嘗試如下方法。
• 將style.css的代碼複製到博客園後臺管理的頁面定製CSS代碼中。
• 將footer.js的代碼複製到博客園後臺管理的頁腳Html代碼中，添加script標籤須要發送郵件至 contact@cnblogs.com，註明用途。
• 在編輯器設置中設置默認編輯器爲Markdown
• 推薦一個所見即所得在線Markdown編輯器——做業部落