VSCode怎么设置Markdown预览样式_VSCode Markdown自定义CSS与主题-VSCode-PHP中文网

必须区分内置预览与mpe插件：内置预览通过markdown.styles指向工作区相对路径的css文件，仅支持标准css；mpe则强制读取用户主目录下.mume/style.less，支持less语法且不识别markdown.styles，混用会导致预览空白或样式失效。

vscode怎么设置markdown预览样式_vscode markdown自定义css与主题

VSCode 的 Markdown 预览样式不能靠“主题切换”一劳永逸，必须明确区分：你用的是 内置预览 还是 Markdown Preview Enhanced（MPE）插件 —— 两者加载 CSS 的路径、配置项、文件格式完全不兼容，混用会导致预览空白或样式失效。

怎么确认自己用的是哪个预览？

打开任意 .md 文件，看右键菜单：

如果出现 “Open Preview to the Side”（无后缀）→ 是 VSCode 内置预览
如果出现 “Open Preview with Enhanced” 或 “Markdown Preview Enhanced: Open Preview…” → 是 MPE 插件

两者共存时，MPE 会接管预览行为，但它的 CSS 注入机制和内置预览互不识别。别指望改了 markdown.styles 就能让 MPE 生效，也别把 style.less 丢进 .vscode/ 目录指望内置预览读取。

内置预览：用 `markdown.styles` 指向 CSS 文件

这是最轻量、无需额外插件的方式，但只支持标准 CSS（不支持 Less/Sass），且路径必须相对于工作区根目录：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

在项目根目录创建 .vscode/settings.json，写入：
```
{
  "markdown.styles": ["./styles/custom.css"]
}
```
确保 ./styles/custom.css 存在且可读（不是隐藏文件、没拼错大小写）
路径错误不会报错，只会静默失败——打开开发者工具（Help → Toggle Developer Tools），在 Console 查看是否有 Failed to load resource 404
常用覆盖点：body（背景/字体）、h1～h6（标题间距与边框）、code（行内代码底色）、pre > code（代码块高亮容器）

MPE 插件：必须用 `style.less`，位置固定

MPE 不读 markdown.styles，也不认 .vscode/settings.json 里的路径。它只加载用户主目录下 .mume/style.less（Windows 是 C:\Users\{user}\.mume\style.less，macOS/Linux 是 ~/.mume/style.less）：

该文件不存在就手动创建，MPE 不会自动建目录
文件名必须是 style.less，不是 custom.css 或 preview.css
内容可以是纯 CSS，但推荐用 Less 语法（支持变量、嵌套，MPE 原生解析）
修改后需手动刷新预览（按 Ctrl+R 或点预览页右上角 ↻），不会热更新
常见翻车点：blockquote 默认背景太深，直接加 blockquote { background-color: #f6f8fa; } 即可；长代码不换行，加 pre { white-space: pre-wrap; }