search

mjbvz / vscode-fenced-code-block-grammar-injection-example

Example of injecting a new grammar into VSCode's builtin markdown syntax highlighting for fenced code blocks
MIT License
98 stars 26 forks source link

Syntax highlighting of injected language not shown in Preview #7

Closed ThFriedrich closed 3 years ago

ThFriedrich commented 4 years ago

Thanks @mjbvz for this super helpful example. Running the example as it is I get the following behavior: image It seems within the md.-file the injected Syntax is highlighted but in the Preview, it isn't. Is that by design? Is it possible to transfer the Syntax highlighting functionality into the Preview as well?

My Setup: Version: 1.46.1 Electron: 7.3.1 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Linux x64 5.3.0-61-generic

mjbvz commented 4 years ago

This is a known limitation. The markdown preview uses highlight.js for highlighting, not VS Code's highlighting

mjbvz commented 3 years ago

Closing this as this is current design of VS Code.

https://github.com/microsoft/vscode/issues/56356 would let the preview use VS Code's built-in highlighter instead

tjpalmer commented 2 years ago

For those finding this in the future, the mermaid markdown example also by @mjbvz shows where to plug in custom syntax highlighting in markdown preview. And vscode-textmate can be used to adapt tokens to hljs class names. It would be nice if vscode did this automatically, but it's possible to wire up manually at this point.

ThFriedrich commented 2 years ago

Thanks @tjpalmer I had reached a very similar conclusion back then, indeed using vscode-textmate and vscode-oniguruma. You can check the StackOverflow Question and my implementation for the details.