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

    本篇文章首发自魔芋红茶的博客https://www.cnblogs.com/Moon-Face/ 请尊重其他人的劳动成功,转载请注明。
  • 相关阅读:
    Jpa 一对多级联查询 排序设置
    Spring Data Jpa Specification 调用Oracle 函数/方法
    Spring boot 集成 阿里 Mqtt
    将Jquery序列化后的表单值转换成Json
    Linux安装和卸载MySQL5.7
    NoNodeAvailableException[None of the configured nodes are available: [{#transport#-1}{3bFuKD5MTOWOCfJ1ZFrfdw}{192.168.0.105}{192.168.0.105:9301}]]
    Docker下安装RabbitMQ
    JAVA数据结构与算法-稀疏数组
    第一篇博客
    测试用例编写方法:边界值分析方法
  • 原文地址:https://www.cnblogs.com/Moon-Face/p/14453564.html
Copyright © 2020-2023  润新知