優化博客園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() {
    // 根據h2、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() {
        // 根據h2、h3標簽自動生成目錄
        // ...
    },
    runAll: function() {
        // 運行所有方法
        this.setAtarget();
        this.setContent();
        this.setCopyright();
        this.setCodeRow();
    }
}
setMyBlog.runAll();

2.5 下載完整源碼

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

3.使用方法

• 如您喜歡本文樣式，可以嘗試以下方法。
• 將style.css的代碼復制到博客園后台管理的頁面定制CSS代碼中。
• 將footer.js的代碼復制到博客園后台管理的頁腳Html代碼中，添加script標簽需要發送郵件至 [e-mail]，注明用途。
• 在編輯器設置中設置默認編輯器為Markdown
• 推薦一個所見即所得在線Markdown編輯器——作業部落