markdown.js中代码样式优化css_米醋屋个人技术博客

默认的代码背景是灰色的，替换后可以改为黑色背景

原版如下

[![](https://micuu.com/data/avatar/20211027/18222ed28a614b858c883edd71a35271.png)](https://micuu.com/data/avatar/20211027/18222ed28a614b858c883edd71a35271.png)

改版后效果

[![](https://micuu.com/data/avatar/20211027/107d65961745307e3c20483d64d2575a.png)](https://micuu.com/data/avatar/20211027/107d65961745307e3c20483d64d2575a.png)

#### 主题一

```

/*markdown 代码样式开始*/
tt, code, kbd, samp {
    font-family: consolas;
}

.prettyprint, pre.prettyprint {
    background-color: #272822;
    border: 1px solid #272822;
    overflow: hidden;
    margin: 10px 0;
}

.prettyprint.linenums, pre.prettyprint.linenums {
    -webkit-box-shadow: inset 40px 00 #39382E, inset 41px 0 0 #464741;
    -moz-box-shadow: inset 40px 00 #39382E, inset 41px 0 0 #464741;
    box-shadow: inset 40px 00 #39382E, inset 41px 0 0 #464741;
}

.prettyprint.linenums ol, pre.prettyprint.linenums ol {
    padding-left: 28px !important;
    margin: 0000px;
}

.prettyprint.linenums ol li, pre.prettyprint.linenums ol li {
    padding-left: 12px;
    color: #bebec5;
    line-height: 20px;
    margin-left: 0;
    margin: 5px;
    list-style: decimal;
}

.prettyprint .com {
    color: #93a1a1;
}

.prettyprint .lit {
    color: #AE81FF;
}

.prettyprint .pun, .prettyprint .opn, .prettyprint .clo {
    color: #29f800;
}

.prettyprint .fun {
    color: #dc322f;
}

.prettyprint .str, .prettyprint .atv {
    color: #E6DB74;
}

.prettyprint .kwd, .prettyprint .tag {
    color: #F92659;
}

.prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var {
    color: #A6E22E;
}

.prettyprint .pln {
    color: #66D9EF;
}

.prettyprint li.L1, li.L3, li.L5, li.L7, li.L9 {
    background: #272922;
}

/*markdown 代码样式结束*/
```

#### 主题二

```
.editormd-preview-theme-dark .editormd-preview-container {
    color: inherit;
    background-color: inherit
  }

.editormd-preview-theme-dark .editormd-preview-container blockquote {
    background: inherit;
    border-color: inherit
  }

.markdown-body img {
    margin: 10px 0
  }

.markdown-body strong {
    font-weight: bold
  }

.editormd-dialog-container select {
    display: inline-block
  }

.editormd-preview-theme-dark .typ {
    color: #a8b6c5
  }

.editormd-preview-theme-dark pre .pln {
    color: #a8b6c5
  }

.editormd-preview-theme-dark .kwd {
    color: #cb7832
  }

.editormd-preview-theme-dark .tag {
    color: #89bdff
  }

.editormd-preview-theme-dark .com {
    color: #7f7f7f
  }

.editormd-preview-theme-dark .str {
    color: #65b042
  }

.editormd-preview-theme-dark .atv {
    color: #65b042
  }

.editormd-preview-theme-dark .atn {
    color: #bdb76b
  }

.editormd-preview-theme-dark .lit {
    color: #65b042
  }

.editormd-preview-theme-dark .pun {
    color: #bdb76b
  }

.CodeMirror-activeline-background {
    background: #f0fbeb
  }

.markdown-body li {
    list-style: inherit
  }

.editormd-html-preview ol.linenums,
  .editormd-preview-container ol.linenums {
    color: #6c7978;
    padding-left: 2.5em
  }

.markdown-body pre li {
    border-left: 1px solid #6c7978;
    padding-left: 10px
  }

.markdown-body a {
    background: 0;
    color: #009688;
    text-decoration: none
  }

.markdown-body a:hover {
    color: #01aaed;
    text-decoration: none
  }

.editormd-preview-theme-dark {
    color: #333;
    background: #fff
  }

.editormd-preview-theme-dark pre {
    background: #282c34
  }

.editormd-html-preview,
  .editormd-preview-container {
    padding: 5px;
    font-size: 15px;
    color: #000
  }
```

注:原创不易,转载请注明出处( https://micuu.com/new/2292.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

markdown.js中代码样式优化css

留言反馈