Live preview of markdown using GitHub with VSCode

Question

I'm trying to set the CSS file that I'd like Visual Studio Code to use when using a preview rendering of the markdown file I'm working on so that the style mirrors the GitHub style CSS... but so far unable to do it.

I get that VSCode uses the same CSS that matches what VSCode uses, but I'd like it to instead use GitHub's CSS. I've tried saving the CSS file from GitHub onto my system and then referencing the full path to that CSS within the settings.json file using the instructions here: https://code.visualstudio.com/Docs/languages/markdown#_using-your-own-css

But it isn't taking effect it seems... is this actually working in VSCode? I'm using the latest version 0.7.0.

updated Here's how I have it setup. Within my workspace I have a file .settings/settings.json that contains:

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

Then I have the CSS file located in .settings/github-markdown.css . I've tried using the contents of the following two CSS files...

• https://github.com/sindresorhus/github-markdown-css
• https://gist.github.com/tuzz/3331384

...but neither is having any impact. I've also tried a fully qualified path tot he CSS file and relative ( ./github-markdown.css ). Between each change, I've also restarted VSCode to see if that had an impact.

Answer 1

Paths to markdown styles will be resolved relative to the root of your workspace. I can get markdown styling to work with the following steps:

• add an entry to the workspace settings "markdown.styles": [ "styles.css" ]
• create a top level styles.css file and add a simple rule body { color: red; } body { color: red; }
• create a markdown file or open an existing one and preview it

The text of the markdown should appear in red.

If you are using CSS classes with a specific prefix, you have to make sure that those classes are in your markdown code. VSCode is not adding CSS classes by itself.

Answer 2

VSCode has it's own CSS for markdown rendering.

C:\\Program Files (x86)\\Microsoft VS Code\\resources\\app\\extensions\\markdown\\media\\markdown.css

This is the main reason why custom CSS does not apply.

I've override some attributes and it works well now.

I've uploaded codes to my github repository .

I hope this helps you.

Answer 3

If you want to use that file " 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 ", the URL is not working.

I have a good idea, we can use Github Pages.

Add a submodule in your repository, like this " git submodule add https://github.com/SepCode/vscode-markdown-style.git ". And now we can use the URL " https://sepcode.github.io/vscode-markdown-style/preview/github.css " set markdown.styles.

Step:

• clone your GitHub pages " 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
• setting vscode setting.json

   { "markdown.styles":["https://sepcode.github.io/vscode-markdown-style/preview/github.css"] } 

the vscode-markdown-style repository is just an example, we should use ourself's CSS file. This way is more convenient and controllable.

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