优化博客园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，后期不断优化、更新，欢迎关注留言。
- 如果本文对你有用，不妨右下角点个推荐~
