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

Question

我在 github 中找到了降价 css，我想用它来预览我的 vscode 的 md 文件。 css 文件 url 是：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/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",
  }
}

~/tools/editors/vscode/settings/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 4

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

更新

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

我现在只将 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 5

使用 Github/Gist 中的原始 URL 并将其与 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

为了将任何样式表加载到预览中，https 链接通常可以在 markdown.styles 中工作，但 github returns X-Frame-Options: deny 在该资源上，因此我们无法嵌入 markdown 预览中

作为解决方法，您可以：

为 github 内容使用 https 镜像
将样式表下载到您的工作区并使用 markdown.styles 包含它。
```
"markdown.styles": ["github-markdown.css"]
```
重要提示：Markdown 预览只能从当前工作区加载样式表。

Answer 7

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

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

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

How can I use an online style.css on the visual studio code markdown preview?

editor

visual-studio-code

vscode settings.json:

更新

项目文件夹

settings.json

markdown.css