Question

我在github中找到了一个markdown css，我想用它来预览我的vscode的md文件。 css文件网址为：https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css

vscode settings.json：

// Place your settings in this file to overwrite the default settings
{
    "editor.fontFamily": "Consolas, Microsoft YaHei", 
    "editor.fontSize": 16,
    "markdown.styles": [
        "https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css"
    ]
}

但什么都没发生。我该怎么办？

Answer 1

如果您想使用本地.css文件，例如d:\vscode-markdown.css，那么您的配置应为

"markdown.styles": [
    "file:///D:/vscode-markdown.css"
]

Answer 2

https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css的css文件不适合编辑。

文档here已经编写了预览css的格式。

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
    color: cornflowerblue;
}

工作场所设置：将style.css放到Workspace folder，配置"markdown.styles": ["style.css"]也可以。
全局设置：使用files:///协议的绝对本地路径。

Answer 3

似乎vscode normalizes paths，从markdown文件本身的位置开始，所以看起来通用的绝对路径规范只能从文件系统的根目录而不是项目的根目录。

更新

我刚刚注意到vscode正在向MS团队发送Application Insights，因为无法解析文件。下面显示的是有效的，但如果它引起的错误错误可能会有点激烈。如果你需要做这样的事情，你至少应该禁用见解，或者只是将css复制到与降价相同的文件夹中。

我现在只需将markdown.css保留在根文件夹中，并使用路径使配置饱和，从而允许将markdown放入项目中的各个子文件夹中。当然，这里只需要一个实际的样式源，只需给vscode更多的地方来找到它。

项目文件夹

root
├─ .vscode 
│  └─ settings.json                 
│
├─ config
│  └─ README.md
│
├─ src
│  └─ client
│     └─ README.md
│
├─ markdown.css
└─ README.md

settings.json

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.trimTrailingWhitespace": false,
  "markdown.styles": [
    "./markdown.css",
    "../markdown.css",
    "../../markdown.css",
    "../../../markdown.css"
  ]
}

markdown.css

body {
  font-family: cordova, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background-color: white;
  padding: 20px;        
  color: #333;
}

body, body * {
  background-color: white !important;
  color: black;
}

pre {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  margin-bottom: -1.25em !important;
}

pre div {
  padding: 10px;
  background-color: #eee !important;
  border-radius: 2px;
  overflow: auto;
}

pre code * {
  color: black !important;
  background-color: #eee !important;
}

Answer 4

这是我个人项目的一个小设置 - 它非常接近你最初想要的东西。

〜/ .vscode / settings.json

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true
  },
  "files.trimTrailingWhitespace": true,
  "search.exclude": {
    "**/node_modules": true
  },
  "markdown.styles": [
    "tools/editors/vscode/settings/markdown.styles.css"
  ]
}

〜/的package.json

{
  "name": "seed",
  "main": "index.js",

  ...

  "scripts": {
    "postinstall": "node tools/editors/vscode/settings/markdown.styles.js",
  },

  ...

  "devDependencies": {
    "generate-github-markdown-css": "^1.2.0",
  }
}

〜/工具/编辑/ vscode /设置/ markdown.styles.js

'use strict'

 const fs = require('fs')
 const githubMarkdownCss = require('generate-github-markdown-css')

 /**
  * Use the stylesheet from github's markdown over the vscode defaults.
  */
 githubMarkdownCss((err, css) => {
   css = `body {\n  background-color: #fff;\n}\n\n${css.replace(/.markdown-body/g, 'body')}`
   fs.writeFileSync('tools/editors/vscode/settings/markdown.styles.css', css, 'utf8')
 })

 //NOTE: the CSS var is set with es6 string interpolation. (node 4.x and up)
 //      the background-color is set here because GitHub inherit's it from another stylesheet -- so we need to set it.

希望这对某人有帮助。（同样，抱歉疯狂的文件路径）

干杯！

Answer 5

使用Github / Gist中的原始网址，并将其与https://rawgit.com/一起使用。

以下是我的VSCode设置的示例。您应该在白色背景和深色文本中看到Fira Sans和Fira Mono字体。

// settings.json from VSCode
{
  ...
  "markdown.styles": ["https://rawgit.com/thewazir/50486310d50fb2d6da2c8ab91d26756a/raw/1760755deb7bff05fadcaf6927c4950d256e6838/visualStudioCodeMarkdownStyles.css"]
}

Answer 6

当前答案已过期。要在预览中使用github样式，请尝试this extension

要将任何样式表加载到预览中，通常可以在该资源上的markdown.styles中使用https链接，但是在该资源上使用github returns X-Frame-Options: deny，因此我们不能将其嵌入降价预览中

作为解决方法，您可以：

将https镜像用于github内容
将样式表下载到您的工作区，并使用markdown.styles进行添加。
```
"markdown.styles": ["github-markdown.css"]
```
重要：降价预览只能从当前工作空间内加载样式表。

Answer 7

如果您要使用文件“ 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"] }

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

如何在visual studio代码降价预览中使用在线style.css？

vscode settings.json：

7 个答案:

更新

项目文件夹

settings.json

markdown.css