CODEWITHSUNDEEP
csssassmarkdownvisual-studio-code
AdamHurwitz
AdamHurwitz

Reputation: 10364

VS Code CSS Configuration Preview Not Working With Markdown Workspace Settings

Issue

CSS styling is not displaying in the the VS Code preview for Markdown files despite being configured under the Workspace Settings per the VS Code documentation Extending the Markdown preview.

Expected

Here is how the published Markdown file media.md displays when being hosted.

Note: Green border added to highlight Markdown code.

enter image description here

Result

Here is how the Markdown file media.md displays in the VS Code preview.

Note: Green border added to highlight Markdown code.

enter image description here

Setup

Workspace Structure

The Markdown file attempting to be styled with assets/css/style.scss is media.md.

enter image description here

Workspace Settings

This is configured under Workspace Settings as opposed to User Settings.

{
    "markdown.styles": [
        "assets/css/style.scss"
    ]
}

Upvotes: 0

Views: 737

Answers (1)

agentwaj
agentwaj

Reputation: 76

It looks like the "markdown.styles": [] setting of VSC is particularly for CSS, not SCSS.

You can use Sass to process your *.scss into *.css files that the VSC Markdown preview will be able to understand.

From the looks of it, though, it seems you're working on a Jekyll site (I see a _config.yml Jekyll configuration file). In that case, serving your Jekyll site locally to preview changes may be a better option.

P.S. it would be easier to parse your question if the Markdown screenshots had a border around them to better differentiate between them and the details of the question itself :)

Upvotes: 2

Related Questions