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