在 Visual Studio Code Markdown Preview 上设置背景颜色答案

【问题标题】：Set background color on Visual Studio Code Markdown Preview在 Visual Studio Code Markdown Preview 上设置背景颜色
【发布时间】：2019-03-15 10:02:18
【问题描述】：

我目前在 Visual Studio Code 上使用默认的 Dark+ 颜色主题，并且 Markdown 预览使用相同的样式（黑色背景颜色和白色文本）。

如何更改为仅用于 Markdown 预览的浅色主题，例如深色文本和白色背景？我试过在settings.json 文件中写"markdown.preview.background": "#FFFFFF" 之类的东西，但没有成功。

谢谢

【问题讨论】：

似乎你必须编写自己的扩展，或者使用类似这样的东西：marketplace.visualstudio.com/…
重点是看vscode markdown page code.visualstudio.com/assets/docs/languages/Markdown/…

标签： visual-studio-code markdown

【解决方案1】：

有了Markdown Preview Enhanced 扩展，您现在可以在GUI 或settings.json 中选择您的主题。写作时间2021-04-08

"markdown-preview-enhanced.previewTheme": "github-dark.css"

【讨论】：

这不是内置功能。你必须安装一个插件才能让它工作！
对不起，我应该指定内置到 Markdown Preview 增强扩展。

【解决方案2】：

除了为每个项目创建自己的样式表之外，实现此目的的一种简单方法是安装Markdown Preview Enhanced 扩展。扩展的默认markdown主题是白色的，但您也可以通过在settings.json中设置“markdown-preview-enhanced.previewTheme”来选择不同的主题

"markdown-preview-enhanced.previewTheme": "medium.css"

当您开始输入 json 值时，将显示可用主题的完整列表。

【讨论】：

【解决方案3】：

我遇到了同样的问题，但找不到开箱即用的解决方案来解决它。所以我继续修改默认markdown.css 的版本以适用于Dark+ 主题：https://github.com/dhdhagar/vscode-md-preview-light。

在 VSCode 中，只需编辑 Markdown: Styles 配置或将以下行添加到settings.json：

"markdown.styles": [
        "https://cdn.jsdelivr.net/gh/dhdhagar/vscode-md-preview-light/style.min.css"
    ]

【讨论】：

【解决方案4】：

在您的目录/工作区的根目录中创建 styles.css 文件。
在settings.json中添加markdown.styles: ["styles.css"]
在styles.css中，添加body { background: #fff; }

要在没有这些麻烦的情况下实现相同的目标，您也可以这样做：

<body style="background: #fff;">
// Your markdown code
</body>

【讨论】：

在 settings.json 中
请注意，通过使用 css 文件，VS Code 不会立即更新预览面板以反映更改。背景样式似乎仅在打开时反映在预览面板中。

【解决方案5】：

在具有深色 VS Code 主题的同时在 Markdown 预览中获得白色背景颜色的一种方法是使用 Matt Bierner 的 Markdown Preview GitHub Styling VS Code 扩展。

由于 Markdown Preview GitHub 样式默认会根据你的 VS Code 主题选择主题类型（浅色 vs 深色），你需要设置

    "markdown-preview-github-styles.colorTheme": "light",

在您的settings.json 中。 (Ctrl-Shift-P -> Preferences: Open Settings (JSON))。

【讨论】：

【解决方案6】：

在Visual Studio Code markdown documentation page 上，他们实际上使用了扩展名Markdown Preview Github Styling

【讨论】：

【解决方案7】：

签出这个名为Markdown Live 的扩展程序，它有助于预览markdown，它带有一个所见即所得的编辑器，有助于轻松编辑任何markdown 内容。它还提供以下功能

呈现多个 .md 文件
立即将所见即所得编辑器中的更改同步到文本文档中，反之亦然
支持 vscode 主题

【讨论】：

【解决方案8】：

我在尝试仅在白色背景中呈现文档的一部分时偶然发现了这个问题。这是您在不弄乱设置文件的情况下执行此操作的方法。

my text in default styling

<div style="background: #FFFFFF; color: #000">
my text in black with white background
</div>

my text back in default styling

PS：你可以用这个技巧来渲染 LaTeX 方程，以便截图给其他编辑器。

【讨论】：

【解决方案9】：

通过将 settings.json 文件中的 "editor.renderWhitespace": "none" 属性更改为 true 为我解决了：

{
    "editor.renderWhitespace": true
}

【讨论】：