github風格的markdown渲染css


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中文網


免責聲明!

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



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