Request for CSS compatibility in markdown preview feature

hazeyez commented 4 months ago

I find that no CSS works in preview mode -

Whether it be external in a styles.css file and used in...

<head>
    <link rel="stylesheet" href="styles.css">
</head>

and styles.css contains:

.resize-image {
    height: 65%;
    width: auto;
}

Or internal...

<head>
    <style>
        .resize-image {
            height: 65%;
            width: auto;
        }
    </style>
</head>

And in either of the above cases, brought into the html tag within the markdown file such as:

<img src="image.jpg" class="resize-image">

OR

Whether it be inline within the html itself, in this case using the \<img> tag:

<img src="image.jpg style="height: 65%; width: auto;">

In this example I am just using tag as an example, but all CSS styling features would be good to have.

It would be fantasic to have this feature within markdown preview mode available, especially since your markdown extension is the # 1 markdown extension for Visual Studio Code!

yzhang-gh commented 4 months ago

Not sure whether it is because of the <head> scope. I always use it like this

As for external CSS files, you can set the markdown.styles option (which is provided by VS Code itself). Although I remember there are some restrictions (e.g. local files should be inside the current folder?) due to security concerns.

hazeyez commented 4 months ago

Interesting, I'll give it a shot. Thank you for replying and offering a solution! As long as there is some way to do it.. even if not traditional then that's fine, I suppose. However would love to see standard compatibility one day given the popularity of the extension. I hope you consider it!

Nice work by the way, bravo.

yzhang-gh / vscode-markdown

Request for CSS compatibility in markdown preview feature #1425