Syntax Highlight has wrong colors

[octref]

Compare to GitHub: https://github.com/Microsoft/vscode-docs/blob/ext-docs/api/extension-guides/tree-view.md

[octref]

@mjbvz Do you wanna try using https://www.npmjs.com/package/shiki to get the same syntax highlighting as VS Code? However we might need to adjust the background color of the code blocks too.

[mjbvz]

Ideally this extension should match whatever sytnax highlighting github is using. Looks like something regressed in our highlighting here. I'll take a quick look

1 + 1

shiki would be great as the default for VS Code's markdown preview though. How much big is the bundle?

[octref]

The package itself is not large, but it needs to load onigasm which is around 500KB. Let's try it in debt week.

[Purpzie]

Arrow functions seem to be affected the worst.

[loilo]

Quickfix for anybody interested: I collected a few CSS rules that introduce some basic GitHub coloring for Markdown preview code blocks.

It merely gives a similar feeling to the code blocks, there's no way to mirror GitHub behavior with only CSS, as the Highlight.js library used by Markdown Preview is not nearly as sophisticated as GitHub's Linguist.

As a little teaser, this is how the code block from the comment above looks in comparison:

To apply these changes to your markdown previews, add the following snippet to your user settings JSON:

"markdown.styles": [
    "https://hljs-github-wswafwfpzt.now.sh"
]

[mjbvz]

See https://github.com/mjbvz/vscode-markdown-shiki for an example of how we can use a more advanced syntax highlighter + a github color theme

PRs welcome

[bLopata]

@loilo can you help me understand why when I copy your class selectors into my own local css file, I cannot get the styling to apply if I remove hljs- from the class name?

[loilo]

@bLopata I'm not sure. The styles haven't worked for me as well for some weeks or months. Even more annoyingly, I wasn't able to debug them — devtools don't give any insight into the webviews used by the extension. Not sure whether that was different when I wrote the stylesheet...

[bLopata]

@loilo Thanks for the reply. I spent way too long trying to figure out how to apply styles on top of the extension before I found this repo and it using the .vscode-body- class. Just to be clear, your classes .hljs-function work great in my custom css file imported through "markdown.styles": [] in settings.json, I was just wondering why I could not get them to work when I removed the prefix. Not a big deal though 🤷‍♂️

[xt0rted]

Use the command Developer: Open Webview Developer Tools to open a devtools instance for the webview. This is documented here but is hard to find if you're just searching the web for it.

[ghost]

This has now been fixed upstream as of 2021-05-15. Refs: highlightjs/highlight.js#3191 @mjbvz please update highlight.js to the latest version :)