博客園 Markdown CSS樣式調整


根據博客園的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繞過博客園的判斷,但是鑒於這是博客園的主要收入,所以不建議去除廣告。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM