github風格的markdown渲染css
如題,因為個人用的markdown編輯器是typora,默認的github主題也還行,但博客園的渲染效果不是很滿意,找了一圈都要到github上去下載,手邊沒梯子,就直接從typora的目錄下邊扒了一個css文件,刪刪減減勉強湊合着用。
#cnblogs_post_body{
font-size: 16px;
}
#cnblogs_post_body{
font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: rgb(51, 51, 51);
line-height: 1.6;
}
.postBody a {
color: #4183C4;
}
.postBody blockquote{
background: none;
border-left: 4px solid #dfe2e5;
padding: 0 15px;
color: #777777;
}
blockquote blockquote {
padding-right: 0;
}
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
position: relative;
margin-top: 1rem;
margin-bottom: 1rem;
font-weight: bold;
line-height: 1.4;
cursor: text;
}
#cnblogs_post_body h1:hover a.anchor,
#cnblogs_post_body h2:hover a.anchor,
#cnblogs_post_body h3:hover a.anchor,
#cnblogs_post_body h4:hover a.anchor,
#cnblogs_post_body h5:hover a.anchor,
#cnblogs_post_body h6:hover a.anchor {
text-decoration: none;
}
#cnblogs_post_body h1 tt,
#cnblogs_post_body h1 code {
font-size: inherit;
}
#cnblogs_post_body h2 tt,
#cnblogs_post_body h2 code {
font-size: inherit;
}
#cnblogs_post_body h3 tt,
#cnblogs_post_body h3 code {
font-size: inherit;
}
#cnblogs_post_body h4 tt,
#cnblogs_post_body h4 code {
font-size: inherit;
}
#cnblogs_post_body h5 tt,
#cnblogs_post_body h5 code {
font-size: inherit;
}
#cnblogs_post_body h6 tt,
#cnblogs_post_body h6 code {
font-size: inherit;
}
#cnblogs_post_bodyh1 {
font-size: 2.25em;
line-height: 1.2;
border-bottom: 1px solid #eee;
}
#cnblogs_post_body h2 {
font-size: 1.75em;
line-height: 1.225;
border-bottom: 1px solid #eee;
}
#cnblogs_post_body h3 {
font-size: 1.5em;
line-height: 1.43;
}
#cnblogs_post_body h4 {
font-size: 1.25em;
}
#cnblogs_post_body h5 {
font-size: 1em;
}
#cnblogs_post_body h6 {
font-size: 1em;
color: #777;
}
.postBody p,
.postBody blockquote,
.postBody ul,
.postBody ol,
.postBody dl,
.postBody table{
margin: 0.8em 0;
}
其實在typora中打開開發者工具(shift+F12)就能發現,這貨是個偽裝成文本編輯器的離線瀏覽器,所以喜歡typora自帶主題渲染的可以自行抓取。
想了解怎么在博客園使用css的可以閱讀這里,如果使用的是我上邊修改的css,可以不用勾選禁用模板默認css。
需要typora中原始的github主題css文件的,我已經上傳到了度盤
鏈接:https://pan.baidu.com/s/1xXnHvbZLRwskxrILSbO9MQ
提取碼:n4wi想下載typrora或者獲取更多typora主題的可以前往typora中文網。