当前位置: 首页> 财经> 产业 > 16、修改Markdown Preview Enhanced默认样式

16、修改Markdown Preview Enhanced默认样式

时间:2025/7/11 14:43:16来源:https://blog.csdn.net/roujian0985/article/details/141868871 浏览次数:0次

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


文章目录

  • 一、Markdown Preview Enhanced 简介
  • 二、style.less
    • 打开 style.less 文件
    • 自定义样式
  • 三、总结
  • 四、参考文献

一、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
关键字:16、修改Markdown Preview Enhanced默认样式

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: