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

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文件不适合编辑器。

这里的文档编写了预览css的格式。

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

h1 {
    color: cornflowerblue;
}

---

• 工作区设置：将style.css放到Workspace folder并配置"markdown.styles": ["style.css"]也可以。
• 全局设置：使用带files:///的绝对本地路径files:/// protocol。

Answer 3

似乎vscode 规范化路径 ，从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中的原始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样式，请尝试此扩展名

---

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

作为解决方法，您可以：

• 使用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 “，该URL无效。

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

在您的存储库中添加一个子模块，例如“ 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。

步：

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. 设置vscode setting.json
   { "markdown.styles":["https://sepcode.github.io/vscode-markdown-style/preview/github.css"] }

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