如何配置VSCode的Markdown预览样式 自定义预览主题与字体攻略

vscode的markdown预览样式可通过多种方式自定义。1. 可安装“markdown theme picker”扩展一键切换内置主题，或手动创建markdown.css文件并通过设置指定其路径以实现个性化样式；2. 在设置中调整“markdown: preview font family”、“markdown: preview font size”和“markdown: preview line height”可改变字体、字号与行高；3. 通过本地css文件可深度定制样式，如修改标题颜色、引入google fonts加载特定字体，但需注意文件位置、格式及网络限制问题。以上方法适配不同用户需求，从简单换肤到高级定制均可实现。

VSCode 的 Markdown 预览功能非常实用，但默认样式可能不太符合每个人的审美或阅读习惯。其实我们可以很方便地自定义预览的主题和字体，让写 Markdown 更舒服一些。

1. 自定义 Markdown 预览主题

VSCode 支持通过安装扩展或者手动添加 CSS 文件来修改 Markdown 预览的主题样式。

• 使用扩展方式更简单：可以搜索安装像 “Markdown Theme Picker” 这样的插件，它提供多种内置主题，一键切换。
• 手动添加 CSS 文件：
  • 在工作区根目录下创建一个 .vscode 文件夹（如果没有的话）。
  • 在该文件夹中新建一个 markdown.css 文件。
  • 在 VSCode 设置中搜索 Markdown: Styles，填写这个 CSS 文件的路径。
  • 然后你就可以在这个 CSS 文件里写自己的样式了，比如修改背景色、字体大小等。

这种方式适合有一定前端基础的人，如果你只是想换个好看的主题，推荐用第一种方式。

2. 修改 Markdown 预览字体

有时候我们希望预览窗口的字体跟编辑器一致，或者换成更适合阅读的字体。

可以在设置中搜索以下配置项：

• Markdown: Preview Font Family：设置预览区域的字体，比如 'Segoe UI', '微软雅黑', sans-serif
• Markdown: Preview Font Size：调整字号，默认是 14
• Markdown: Preview Line Height：行高，默认是 1.6

这些设置会直接影响预览窗口的文字显示效果，建议根据自己的显示器和阅读习惯做微调。

3. 使用本地 CSS 样式实现高级定制

如果你对样式有更高要求，比如想要特定的标题颜色、代码块背景、段落间距等，可以通过上面提到的 markdown.css 文件进行深度定制。

举个简单的例子，如果你想把所有一级标题改成深蓝色，可以加这样一行 CSS：

h1 {
  color: #333399;
}

还可以引入 Google Fonts 加载自己喜欢的字体：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

注意：CSS 只影响当前工作区的 Markdown 预览，换项目时需要重新配置。

基本上就这些方法了，不复杂但容易忽略的是 CSS 文件的位置和格式是否正确，还有字体加载是否被网络限制等问题。只要一步步试一下，很快就能调出自己喜欢的 Markdown 预览风格。