优化博客园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标签需要发送邮件至 contact@cnblogs.com，注明用途。
• 在编辑器设置中设置默认编辑器为Markdown
• 推荐一个所见即所得在线Markdown编辑器——作业部落