Vuepress 修改 Markdown 中代码默认样式

注意

1. 这是修改默认样式；
2. 请查看 Vuepress CSS 样式覆盖：修改内容宽度，有详细说明如何修改默认样式，也就是在 styles/palette.styl 文件；

原样式

修改后

palette.styl 

.page {
    // 代码块：行号字体
    div[class*="language-"].line-numbers-mode .line-numbers-wrapper {
        color: #000;
    }
    // 代码块：语言(右上角)
    div[class*="language-"]::before {
        color: #000;
    }
    // 代码块：背景和边框
    div[class*="language-"].line-numbers-mode::after{
        background: #f8f8f8; 
        border-right: 1px solid #ead2d2;   
    }
    div[class*="language-"] {
        margin-top: 15px;
        background: #f8f8f8; 
        border: 1px solid rgba(6,6,6,.1);
    }
    // 类型为 bash
    div[class*="language-bash"].line-numbers-mode pre {
        padding-left: 14px;
    }
    div[class*="language-bash"].line-numbers-mode::after {
        width: 0;
    }
    div[class*="language-bash"].line-numbers-mode .line-numbers-wrapper {
        color: rgba(0,0,0,0)
    }
    // 代码括号
    .token.punctuation {
        color: #807a7a;    
    }
    // 代码注释
    .token.comment {
        color: #3eaf7c;
    }
    // 代码变量
    .token.string {
        color: rgb(201 140 109);
    }    
}
// 默认主题样式 ----------------------------------------------------------------
// 代码块：默认字体
.theme-default-content pre code, .theme-default-content pre[class*="language-"] code {
    color: #476582
}
// 代码块：代码行高
.theme-default-content pre, .theme-default-content pre[class*="language-"] {
    padding: 0.32rem 1.5rem;
}
// 默认 a 标签样式
.theme-default-content:not(.custom) a {
    color: $mainColor;
}