作者： "@gzdaijie" 本文為作者原創，轉載請註明出處：http://www.cnblogs.com/gzdaijie/p/5187171.html 。 1.寫在前面 之前使用過有道雲筆記和為知筆記，後來偶然喜歡上用Markdown寫文檔。被Markdown的簡潔與大氣所折服，因此拋棄了有道
作者：@gzdaijie
本文為作者原創，轉載請註明出處：http://www.cnblogs.com/gzdaijie/p/5187171.html 。
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語句，重新渲染代碼部分。
<script type="text/javascript">
// 博客內的鏈接在新視窗打開
$("#cnblogs_post_body a").each(function(){
$(this).attr("target","_blank");
})
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(); //移除 class
item.addClass("brush: " + lang +";"); //根據語言添加筆刷
SyntaxHighlighter.all();
})
}
</script>2.3 下載完整源碼
- 完整代碼已經上傳至 github，後期不斷優化、更新，歡迎關註留言。
