Question

我尝试设置我喜欢Visual Studio Code的CSS文件，以便在使用markdown文件的预览渲染时使用，以便样式镜像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; }
创建降价文件或打开现有文件并进行预览

降价文字应以红色显示。

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

Answer 2

VSCode拥有自己的用于降价渲染的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”不起作用。

我有个好主意，我们可以使用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风格的存储库只是一个例子，我们应该使用自己的CSS文件。这样更方便且可控制。

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

使用带有VSCode的GitHub实时预览markdown

3 个答案: