使用 GitHub 和 VSCode 的 Markdown 实时预览

Question

我正在尝试设置我想要的 CSS 文件 Visual Studio 使用我正在处理的降价文件的预览渲染时要使用的代码，以便样式镜像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 文件的内容...

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

Answer 1

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

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

降价文本应显示为红色。

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

Answer 2

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

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", we know that "https://raw.githubusercontent.com/SepCode/vscode-markdown-style/master/preview/github.css”，URL 不工作。

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

在您的存储库中添加一个子模块，例如“git submodule add https://github.com/SepCode/vscode-markdown-style.git”。而现在我们可以使用 URL "https://sepcode.github.io/vscode-markdown-style/preview/github.css" set 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

设置vscodesetting.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

使用 GitHub 和 VSCode 的 Markdown 实时预览

Live preview of markdown using GitHub with VSCode

html

css

markdown

visual-studio-code