Custom user styles not working

[seamusm02]

Create a simple style.css as a test:

body { background-color: green}

With extension enabled, the extension overrides the custom style. With the extension disabled, the style is rendered correctly.

One of the features listed is

Customize styling using your own markdown.styles css

Am I misunderstanding something?

Markdown Preview Github Styling v1.0.1

VSCode / OS
Version: 1.63.2 (user setup)
Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3
Date: 2021-12-15T09:40:02.816Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.19045

[jjspace]

It seems that styles are added to the markdown preview in the following order per the docs

• VSCode built in styles
• Extension styles (these ones)
• User styles in markdown.styles

However, the way this extension works is it wraps all the rendered markdown content in an extra div to be able to specify which theme to use (see img). This is why your style on body is being overridden. Change body to .github-markdown-body and I believe it should work

The red box is the actual content which would be rendered in body if the extension is turned off

The code that does this can be seen here

vscode-github-markdown-preview-style/dist/extension.js

Lines 43 to 47 in f2cb247

	md.renderer.render = function() {
	return `<div class="github-markdown-body github-markdown-${getColorTheme()}">
	<div class="github-markdown-content">${render.apply(md.renderer, arguments)}</div>
	</div>`;
	};

It would probably be good to add something about this to the README so others don't have to dig into the code just to use that feature.

[seamusm02]

Yup, that works! Thanks!