markdown自定义css

最新推荐文章于 2024-04-04 09:50:17 发布

秃头暴躁哥

最新推荐文章于 2024-04-04 09:50:17 发布

阅读量1.1k

点赞数

分类专栏：配置文章标签： markdown

本文链接：https://blog.csdn.net/qq_45673245/article/details/114692322

版权

配置专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在VSCode中使用markdownpreviewenhanced插件来自定义Markdown文件的样式。通过编辑CSS代码，可以实现背景颜色、字体大小及颜色等个性化设置，并展示了针对不同元素的具体样式配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的markdown自定义css

效果如图
vscode-markdown preview enhanced

插件

使用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:#7799bb; }
    .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;
    }
}