使用 GitHub 和 VSCode 实时预览 Markdown

Question

我正在尝试设置我希望 Visual Studio Code 在使用我正在处理的 Markdown 文件的预览呈现时使用的 CSS 文件，以便样式反映 GitHub 样式 CSS...但是所以远远做不到。

我知道 VSCode 使用与 VSCode 使用相同的 CSS，但我希望它改用 GitHub 的 CSS。我尝试将 GitHub 中的 CSS 文件保存到我的系统中，然后使用此处的说明在 settings.json 文件中引用该 CSS 的完整路径：https://code.visualstudio.com/Docs/languages/markdown#_using-your-own-css

但它似乎没有生效......这实际上在 VSCode 中工作吗？我使用的是最新版本 0.7.0。

更新 这是我的设置方式。在我的工作区中，我有一个文件 .settings/settings.json，其中包含：

{
  "markdown.styles": ["github-markdown.css"]
}

然后我的 CSS 文件位于 .settings/github-markdown.css。我尝试使用以下两个 CSS 文件的内容...

• https://github.com/sindresorhus/github-markdown-css
• https://gist.github.com/tuzz/3331384

...但两者都没有任何影响。我还尝试了 CSS 文件和相对文件 (./github-markdown.css) 的完全限定路径。在每次更改之间，我还重新启动了 VSCode 以查看是否有影响。

Answer 1

markdown 样式的路径将相对于工作空间的根进行解析。我可以通过以下步骤获得降价样式：

• 在工作区设置中添加一个条目"markdown.styles": [ "styles.css" ]
• 创建一个顶级styles.css文件并添加一个简单的规则body { color: red; }
• 创建 Markdown 文件或打开现有文件并预览

markdown 的文本应该显示为红色。

如果您使用带有特定前缀的 CSS 类，则必须确保这些类在您的降价代码中。 VSCode 本身不会添加 CSS 类。

Answer 2

VSCode 有自己的用于 Markdown 渲染的 CSS。

C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\markdown\media\markdown.css

这是自定义 CSS 不适用的主要原因。

我已经覆盖了一些属性，现在效果很好。

我已将代码上传到我的github repository。

希望对你有帮助。

Answer 3

如果您想使用该文件“https://github.com/SepCode/vscode-markdown-style/blob/master/preview/github.css”，我们知道“https://raw.githubusercontent.com/SepCode/vscode-markdown-style/master/preview/github.css”，该 URL 不起作用。

我有个好主意，我们可以使用 Github Pages。

在您的存储库中添加一个子模块，例如“git submodule add https://github.com/SepCode/vscode-markdown-style.git”。现在我们可以使用 URL "https://sepcode.github.io/vscode-markdown-style/preview/github.css" 设置 markdown.styles。

步骤：

• 克隆您的 GitHub 页面“git clone https://github.com/SepCode/SepCode.github.io.git”
• cd SepCode.github.io
• git submodule add https://github.com/SepCode/vscode-markdown-style.git
• git commit -am 'added vscode-markdown-style module'
• git push
• 设置 vscode setting.json

  {
      "markdown.styles":["https://sepcode.github.io/vscode-markdown-style/preview/github.css"]
  }
  

vscode-markdown-style 仓库只是一个例子，我们应该使用自己的 CSS 文件。这种方式更方便可控。

https://github.com/microsoft/vscode/issues/76384#issuecomment-507101841