我如何使用一个在线style.css上的visual studio代码markdown预览

Question

我在github中找到了一个markdown 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文件不适合编辑器使用

这里的文档都写了一个预览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规范路径，从markdown文件本身的位置开始，所以似乎一个通用的绝对路径规范只能从文件系统的根，而不是项目的根。

更新

我刚刚注意到vscode正在发送应用程序的见解在MS的团队，基于失败的解决文件。下面所示的工作，但如果它引起错误，那么它可能有点激烈。如果你需要这样做，你至少应该禁用洞察，或者直接将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 4

目前的答案已经过时了。在预览中使用github样式，试试这个扩展

---

对于加载任何样式表到预览，https链接通常在markdown.styles中工作，但github在该资源上返回X-Frame-Options: deny，因此我们不能嵌入到markdown预览

作为变通方法，您可以:

• 为github内容使用https镜像

• 下载样式表到您的工作空间，并使用markdown.styles将其包含。

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

  重要提示: markdown预览只能从当前工作区内加载样式表。

Answer 5

这是我为一个个人项目做的一个小设置——它非常接近你最初想要的。

~/.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}nn${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 6

使用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 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"， URL不工作。

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

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

步骤:

1. 克隆GitHub页面" git clone https://github.com/SepCode/SepCode.github.io.git "
2. cd SepCode.github.io
3. git submodule add https://github.com/SepCode/vscode-markdown-style.git
4. git commit -am 'added vscode-markdown-style module'
5. git push
6. setting vscode setting.json
   { "markdown.styles":["https://sepcode.github.io/vscode-markdown-style/preview/github.css"] }

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