我的markdown自定义css

效果如图

插件

使用vscode插件:markdown preview enhanced

css代码


/* Please visit the URL below for more information: */
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
   
  // modify your style here
    background-color: #2c2c2c; body {
   
        font-family: "Avenir Next", Helvetica, Arial, sans-serif;
        padding:1em;
        margin:auto;
        max-width:42em;
        background:#2c2c2c;
    }

    h3, h4, h5, h6, p, ul, ol, dl, li, table, strong, i, td, tr, th{
   
      color: rgb(197, 191, 191);
    }

    
    h1 {
   
        text-align: center;
        color: rgb(197, 191, 191);
        font-size: 30pt;
        // border-bottom: 1px solid #CCCCCC;
    }

    h2 {
   
        color: rgb(197, 191, 191);
        font-size: 26px;
    }

    h3 {
   
        font-size: 20px;
    }

    h4 {
   
        font-size: 18px;
    }

    h5 {
   
        font-size: 16px;
    }

    h6 {
   
        background-color: inherit;
        font-size: 14px;
    }

    hr {
   
        height: 0.2em;
        border: 0;
        color: #c8a8ae;
    }

    p, blockquote, ul, ol, dl, li, table, pre {
   
        margin: 15px 0;
    }


    a, a:visited {
   
        color: #4183C4;
        background-color: inherit;
        text-decoration: none;
    }

    #message {
   
        border-radius: 6px;
        border: 1px solid #ccc;
        display:block;
        width:100%;
        height:60px;
        margin:6px 0px;
    }

    button, #ws {
   
        font-size: 10pt;
        padding: 4px 6px;
        border-radius: 5px;
        border: 1px solid #bbb;
        background-color: #eee;
    }

    code, pre, #ws, #message {
   
        font-family: Consolas;
        font-size: 12pt;
    }

    code {
   
        border: 1px solid #EAEAEA;
        margin: 0 2px;
        padding: 0 5px;
    }

    pre {
   
        border: 1px solid #CCCCCC;
        overflow: auto;
        padding: 2px 2px;
    }

    pre > code {
   
        border: 0;
        margin: 0;
        padding: 0;
    }

    #ws {
    background-color: #DC143C; }

    .send {
    color:#77bb77; }
    .server {
    color:#77***; }
    .error {
    color:#AA0000; }

    th {
   
      background-color: #171347;
    }
    //下面控制表格隔一行换一个颜色 table tr:nth-child(2n) {
   
      background-color: #444243;
    }
    /* Monokai style - ported by Luigi Maselli - http://grigio.org */

    .hljs {
   
      display: block;
      overflow-x: auto;
      padding: 0.5em;
      background: #272822; color: #ddd;
    }

    .hljs-tag, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-strong, .hljs-name {
   
      color: #f92672;
    }

    .hljs-code {
   
      color: #66d9ef;
    }

    .hljs-class .hljs-title {
   
      color: white;
    }

    .hljs-attribute, .hljs-symbol, .hljs-regexp, .hljs-link {
   
      color: #bf79db;
    }

    .hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-section, .hljs-emphasis, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable {
   
      color: #a6e22e;
    }

    .hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {
   
      color: #75715e;
    }

    .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-title, .hljs-section, .hljs-type, .hljs-selector-id {
   
      font-weight: bold;
    }
}