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

posted @ 2021-02-26 18:15  魔芋红茶  阅读(1092)  评论(0编辑  收藏  举报