search

yzhang-gh / vscode-markdown

Markdown All in One
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
MIT License
2.91k stars 322 forks source link

Setting for code blocks themes #1230

Open Daviid-P opened 1 year ago

Daviid-P commented 1 year ago

Proposal

A setting option where we can set the URLs for:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">

Other information

Maybe smething like https://www.bookstackapp.com/docs/admin/visual-customisation/#changing-code-block-themes https://codemirror.net/5/demo/theme.html#abcdef

yzhang-gh commented 1 year ago

Do you mean additional CSS files? You can use the option markdown.styles which is a VS Code built-in configuration but also applies to this extension.

See https://code.visualstudio.com/docs/languages/markdown#_using-your-own-css

Daviid-P commented 1 year ago

Do you mean additional CSS files? You can use the option markdown.styles which is a VS Code built-in configuration but also applies to this extension.

See https://code.visualstudio.com/docs/languages/markdown#_using-your-own-css

That kind of works.

I have to download the CSS file and change: .hljs-s-cobalt to code hljs to cm Added !important to all css.

And then it works only if I delete the vscode-light class from the <body> tag.

But it'd still be nice to have codemonkey as an option, besides the easy theme selection there's also the line numbers, line highlight and matching bracket highlight.

It's the little things.

Here's the goal result. image

Here's with "markdown.styles": ["cobalt.css"], with the changes mentioned above image

Here's with cobalt.css and deleting <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css"> image

There are still some differences though, like: The function name is hljs-title in the generated html and cm-def in CodeMonkey. The null keyword is hljs-literal in the generated html and cm-atom in CodeMonkey.

yzhang-gh commented 1 year ago

But it'd still be nice to have codemonkey as an option

This is a valid feature request. However, as you may see, there are still a lot of other feature requests and we can only implement some of the popular ones (or wait the help from other contributers).

And then it works only if I delete the vscode-light class from the <body> tag.

Or you can change print.theme to dark although you will get the vscode-dark class then

The function name is hljs-title in the generated html and cm-def in CodeMonkey.

That is obvious as the syntax tokens are generated by highlight.js which has no knowledge of CodeMonkey.