通过安装Markdown Preview Enhanced扩展并配置自定义CSS文件，可显著提升VSCode中Markdown预览的美观性与可读性，支持字体、颜色、布局等个性化设置，增强写作体验。
在使用 VSCode 编写 Markdown 文档时，默认的预览样式比较基础，无法满足个性化或专业排版需求。通过自定义 CSS 样式主题，可以显著提升预览效果，让文档更清晰、美观、易读。
启用 Markdown 预览增强支持
VSCode 原生支持通过扩展和配置加载自定义 CSS 到 Markdown 预览中。关键在于使用 Markdown Preview Enhanced 扩展（由 shd101wyy 维护），它提供了强大的样式定制能力。
安装步骤：
- 打开 VSCode 扩展市场
- 搜索 “Markdown Preview Enhanced”
- 点击安装并重启编辑器
创建自定义 CSS 文件
在项目根目录或任意位置创建一个 CSS 文件，例如 markdown-styles.css，用于定义你想要的样式。
立即学习“前端免费学习笔记（深入）”；
示例内容：
body {
font-family: "Segoe UI", sans-serif;
line-height: 1.7;
color: #333;
max-width: 900px;
margin: 2rem auto;
padding: 1rem;
background-color: #f9f9fb;
}
h1, h2, h3 {
color: #2c3e50;
border-bottom: 1px solid #ddd;
padding-bottom: 0.3em;
}
code {
background-color: #f0f0f0;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: Consolas, monospace;
}
pre > code {
display: block;
background-color: #282c34;
color: #abb2bf;
padding: 1em;
border-radius: 6px;
overflow: auto;
}
关联 CSS 到 Markdown 预览
右键点击 Markdown 文件，选择 “Open Preview with Enhanced Renderer”，首次使用会提示生成配置文件。
或者手动在项目中创建 .vscode/settings.json，添加以下配置：
{
"markdown-preview-enhanced.styleOverrides": {
"fontSize": "16px",
"padding": "2rem"
},
"markdown-preview-enhanced.customCss": "
@import url('file:///path/to/your/markdown-styles.css');
"
}
注意：路径需为绝对路径，Windows 示例：file:///C:/Users/Name/project/markdown-styles.css
应用主题与实时预览
保存配置后，重新打开 Markdown 预览，即可看到自定义样式生效。
小技巧：
- 修改 CSS 后刷新预览（Ctrl+R 或 Cmd+R）可查看更新效果
- 可为不同项目设置不同的样式文件
- 支持导入 Google Fonts 或内嵌响应式设计
基本上就这些。通过简单的 CSS 定制，就能让 Markdown 预览更符合你的阅读习惯或品牌风格，写作体验也会随之提升。
