16、修改Markdown Preview Enhanced默认样式

前言 vscode的markdown preview enhanced插件的主题并不一定符合每个人的审美，所以有的时候需要自定义,笔者根据网上大佬的文章整合了下自定义修改Markdown Preview Enhanced默认样式的方法，模板在文章中，大家可以直接使用，希望能帮助到大家。
编辑平台：Win10 64位
编辑器：VSCode Version: 1.92.2

---

一、Markdown Preview Enhanced 简介

Markdown Preview Enhanced 是一个功能强大的 Markdown 预览插件，适合所有喜欢使用 Markdown 记录和写作的开发者和作者。这个插件不仅提供了实时的 Markdown 预览，还支持丰富的 Markdown 扩展语法，比如数学公式、流程图、甘特图和代码块高亮等。此外，你还可以自定义渲染样式，使预览效果更加符合你的审美需求。更棒的是，它支持导出为多种格式，包括PDF、HTML等，让你的Markdown文档在各个平台上都能完美展示。
目前在Atom上面已经不维护了，只在VS Code上面支持安装

二、style.less

style.less文件是Markdown Preview Enhanced的默认样式文件，它位于Markdown Preview Enhanced的安装目录下，通过这个文件可以定制自己喜欢的风格。
2023.5.14后未更新。该文件未优化！，经历了 less 👉 css 👉 less 👉 css，导致style.less有些地方写了@important仍无法直接覆盖preview_theme的默认样式，但是可以修改其他的变量，达到自定义的目的。

打开 style.less 文件

打开命令面板，输入Customize CSS，打开 style.less 文件

自定义样式

笔者使用的 style.less 配置代码如下，你可以根据需要定制自己喜欢的风格

/* 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
  // eg: background-color: blue;
  /*  */
  #nice {
    line-height: 1.8;
    color: #383838;
    font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light;
    line-height: 30px;
    word-break: break-word;
    letter-spacing: 2px;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 20px 20px;
    background-position: center center;
    font-style: normal;
}
/*正文内容设置*/
p{
  font-size:15px !important;
  font-style: normal;
}
/* 一级标题 */
h1 {
    display: table;
    margin: 30px auto 20px auto !important;
    padding: 10px !important;
    background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #ccc;
    font-size: 20px !important; 
    text-align:center;
}
h2 {
    display: table;
    margin: 30px auto 20px auto !important;
    padding: 0px 10px !important;
    border-bottom: 5px solid #205792;
    text-align: left;
    font-size: 18px !important;
}
/* 三级标题 */
h3 {
    border-bottom: #2b2b2b;
}
h3:before {
    content: "✒️ ";
}
h4 {}
h4:before {
    content: "✏️";
}
h5 {
    background-color: #f1f1f1;
    border-left: 5px solid #fff;
    padding-left: 5px !important;
    box-shadow: -3px 0px #205792;
}
h6 {
    border-left: 5px solid rgba(0, 0, 0, 0);
    box-shadow: 0px 2px #205792;
}
img{
    width:95%;
    margin: 5px auto 8px auto !important;
    border-radius: 5px;
    box-shadow:3px 2px 3px #ccc ;
}
strong{
  color:#ff4c00 !important;
}
em{ 
  font-weight:800;
  font-style:normal !important;
}
/* 下划线粗细设置 */
hr {
    margin: 2em 0;
    border-top: 1px solid #a862ea
}
/* 目录设置 引用设置*/
a {
    display: inline-block;
    color: #a862ea;
    cursor: pointer;
    text-decoration: none;
    position: relative
}
/* 块引用设置*/
blockquote {
    padding: .5em 1em;
    margin: 12px 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-left: 3px solid #a862ea;
    background-color: #f8f5ff
}
blockquote>p {
    margin: 0
}
/* 代码块设置 */
code {
    padding: 2px .4em;
    overflow-x: auto;
    color: #a862ea;
    font-weight: 700;
    word-break: break-word;
    font-family: Operator Mono,Consolas,Monaco,Menlo,monospace;
    background-color: #f8f5ff
}
pre {
    margin: 2em 0
}
pre>code {
    display: block;
    padding: 1.5em;
    word-break: normal;
    font-size: .9em;
    font-style: normal;
    font-weight: 400;
    font-family: Operator Mono,Consolas,Monaco,Menlo,monospace;
    line-height: 18px;
    color: #383838;
    border-radius: 2px;
    scroll-behavior: smooth;
    box-shadow: 0 0 10px #e7daff
}
pre>code:hover {
    box-shadow: 0 0 20px #e7daff
}
pre>code::-webkit-scrollbar {
    height: 6px;
    background-color: #f8f5ff
}
pre>code::-webkit-scrollbar-thumb {
    background-color: #e7daff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px
}
}

三、总结

MPE默认样式文件style.less网上没有太多的介绍，不过根据喜欢的css样式更改less文件，也是能满足大部分的需求，其他的自定义Markdown样式的方法笔者后期求证后再更新文章。

四、参考文献

• 4.1 https://juejin.cn/post/7241538641570480188
• 4.2 https://blog.csdn.net/qq_43827595/article/details/104983125
• 4.3 https://blog.csdn.net/hippyoo/article/details/130716012
• 4.4 https://www.jianshu.com/p/60560e2af9b7
• 4.5 https://shd101wyy.github.io/markdown-preview-enhanced/#/
• 4.6 https://nagominmoon.com/markdown-preview-css/
• 4.7 https://qiita.com/take_me/items/5ff5304b58d9feec21df