美文网首页
我优化了李笑来的MarkdownHere,附css样式代码,文章

我优化了李笑来的MarkdownHere,附css样式代码,文章

作者: 启四说 | 来源:发表于2019-10-15 23:12 被阅读0次

    文丨启四

    公众号:启四说(ID:qisisay)


    Markdownhere 是李笑来制作的一套 CSS 主题,已开源在 GitHub 上,对于中文的显示效果比较友好,字距、行距比直接套用英文模板更加自然,是为数不多的优质中文 CSS 主题。

    使用Markdownhere可以帮你轻松搞定排版,美观又高效。

    这是使用方法:Markdown-here帮你轻松搞定微信公众号排版

    李笑来原版的css样式:

    李笑来原版样式代码:

    .markdown-here-wrapper {  font-size: 15px;  line-height: 1.8em;  letter-spacing: 0.1em;}

    pre, code { font-size: 14px; font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace; margin: auto 5px;}
    code { white-space: pre-wrap; border-radius: 2px; display: inline;}
    pre { font-size: 15px; line-height: 1.4em; display: block; !important;}
    pre code { white-space: pre; overflow: auto; border-radius: 3px; padding: 1px 1px; display: block !important;}
    strong, b{ color: #BF360C;}
    em, i { color: #009688;}
    hr { border: 1px solid #BF360C; margin: 1.5em auto;}
    p { margin: 1.5em 5px !important;}
    table, pre, dl, blockquote, q, ul, ol { margin: 10px 5px;}
    ul, ol { padding-left: 15px;}
    li { margin: 10px;}
    li p { margin: 10px 0 !important;}
    ul ul, ul ol, ol ul, ol ol { margin: 0; padding-left: 10px;}
    ul { list-style-type: circle;}
    dl { padding: 0;}
    dl dt { font-size: 1em; font-weight: bold; font-style: italic;}
    dl dd { margin: 0 0 10px; padding: 0 10px;}
    blockquote, q { border-left: 2px solid #009688; padding: 0 10px; color: #777; quotes: none; margin-left: 1em;}
    blockquote::before, blockquote::after, q::before, q::after { content: none;}
    h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-style: bold !important; color: #009688 !important; text-align: center !important; margin: 1.5em 5px !important; padding: 0.5em 1em !important;}
    h1 { font-size: 24px !important; border-bottom: 1px solid #ddd !important;}
    h2 { font-size: 20px !important; border-bottom: 1px solid #eee !important;}
    h3 { font-size: 18px;}
    h4 { font-size: 16px;}

    table { padding: 0; border-collapse: collapse; border-spacing: 0; font-size: 1em; font: inherit; border: 0; margin: 0 auto;}
    tbody { margin: 0; padding: 0; border: 0;}
    table tr { border: 0; border-top: 1px solid #CCC; background-color: white; margin: 0; padding: 0;}
    table tr:nth-child(2n) { background-color: #F8F8F8;}
    table tr th, table tr td { font-size: 16px; border: 1px solid #CCC; margin: 0; padding: 5px 10px;}
    table tr th { font-weight: bold; color: #eee; border: 1px solid #009688; background-color: #009688;}

    我优化后的效果:

    优化后的代码:

    如果想要的话,可以关注我的公众号回复【markdown】免费获取。

    相关文章

      网友评论

          本文标题:我优化了李笑来的MarkdownHere,附css样式代码,文章

          本文链接:https://www.haomeiwen.com/subject/jkrulftx.html