如何设置VSCode预览模式显示效果-VSCode-PHP中文网

VSCode的Markdown预览样式可通过markdown.styles配置注入外部CSS文件实现定制，需使用绝对路径（如file:///C:/path/my-md.css），修改后须手动刷新预览窗口（Ctrl+R）才生效。

如何设置vscode预览模式显示效果

VSCode 的“预览模式”本身不提供显示效果定制，它只是控制标签页是否临时、可被覆盖；真正能调样式的是 Markdown 预览、HTML 实时预览、PDF 预览等具体场景——别混淆概念。

斜体标签是预览模式的视觉标识，但它的出现依赖两个前提：

workbench.editor.enablePreview 必须为 true（默认值）
文件必须通过“触发预览的路径”打开：资源管理器单击、Ctrl+P 回车、Ctrl+Click 跳转定义等
拖拽文件到编辑器组、GitLens 比较、Test Explorer 日志等扩展行为，会绕过该设置，直接生成斜体标签（这不是 bug，是 VSCode 编辑器组的底层逻辑）

如果你关了预览却还见斜体，大概率是后者在起作用——检查右下角状态栏有没有 GitLens、Test Explorer 等扩展图标亮起。

这是靠 workbench.editorAssociations 强制绑定 viewType，和“预览模式”无关：

VSCode

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

下载

在 settings.json 中添加：

{
  "workbench.editorAssociations": {
    "*.md": "vscode.markdown.preview.editor"
  }
}

viewType 必须写成 vscode.markdown.preview.editor，错一个字符（比如写成 markdown.preview 或 vscode-markdown-preview-editor）都不生效
改完后需关闭已打开的 .md 标签，再从资源管理器单击打开才触发新规则
通配符支持 *.md 和精确匹配如 README.md；若同时存在多个匹配项，数组顺序决定优先级

VSCode 不允许直接改内置预览的 HTML 结构，但支持注入外部 CSS：

新建一个 my-md.css 文件（路径任意，推荐放项目根目录或用户配置目录）
在 settings.json 中配置：
```
"markdown.styles": ["file:///full/path/to/my-md.css"]
```
注意：file:// 后必须是绝对路径，Windows 下要写成 file:///C:/path/to/my-md.css
CSS 里只能选 Markdown 渲染后生成的 class（如 body、h1、code、blockquote），不能用 ID 或内联 style
改完 CSS 文件后，需手动刷新预览窗口（Ctrl+R 或右键 → Reload Preview）才生效

这个预览和内置 Markdown 预览不是一回事，它是独立服务，配置项也不同：

缩放控制靠鼠标滚轮 + Ctrl，或快捷键 Ctrl + +/Ctrl + -，默认不保存缩放状态
自动刷新策略由 livePreview.autoRefreshPreview 控制，可选 On Save、On All Changes in Editor、Manual Only
如果修改 HTML/CSS 后没刷新，先确认 livePreview.openPreviewTarget 是 Embedded Preview（非外部浏览器），再检查是否误开了 Manual Only
端口冲突会导致启动失败，错误信息通常是 Address already in use :::3000，此时改 livePreview.portNumber 即可