根據博客園的Markdown文章 樣式優化 實戰經歷,大部分的事情已經搞定了,而且原作者[huizong](github: huizhong/github-markdown-css)已經把所有
.markdown-body
替換成了.cnblogs-markdown
,不需要自己再手動操作了。
huizong的CSS
我的主題是SimpleMemory,應用后發現個問題:發表后的blockquote樣式會和原來的模板重疊,同時有豎線和引號顯示。
經過檢查發布后的元素,發現了一個新的外部容器,.postBody
。如果這個不做修改,那么顯示結果仍舊可能會比較糟糕。
這就需要在頁面定制 CSS 代碼
中,對於顯示不正常的元素,增加一條.postBody
樣式,比如.postBody blockquote{background:none;}
。增加之后顯示正常。
其他CSS
對於其他沒有定義外部容器的CSS,如果直接應用會影響整個頁面的顯示。所以要在css里批量加.cnblogs-markdown
。暫時還沒發現什么好的方法。幸好不多,手動改改吧。。
推薦少數派CSS,很好看。
代碼區域優化
又發現了不一樣的容器:.cnblogs-markdown .hljs, .cnblogs-post-body .hljs
懶得管是什么了,直接對pre,code等幾個字段重新改一次,搞定。
但是行號依然沒有。
發現比用戶CSS優先級更高的CSS
發現新bug,H1,H2等等的格式都不太對,於是再次檢查,發現了這個外部容器:#cnblogs_post_body
這個東西的樣式比用戶CSS級別還高,所以所有跟這個樣式有沖突的CSS全都被覆蓋了。
直接拿來加在CSS里:
#cnblogs_post_body h1 {
font-size: 2.2em;
font-weight: 700;
line-height: 1.1;
padding-top: 16px;
margin-bottom: 4px;
border-bottom: 2px solid #eee;
}
這次顯示差不多正常了
增加行號顯示
注意:需要先在后台申請JS權限,申請入口在自定義CSS下邊一點點
參考改進博客園Markdown顯示功能(加代碼行號、顯示代碼所用編程語言)
文章代碼並不好用!無法正確顯示行號,以及代碼格式混亂,暫時先不用了
關於下方廣告
可以用js繞過博客園的判斷,但是鑒於這是博客園的主要收入,所以不建議去除廣告。