Markdown All in One Documentation

Syntax highlighting for fenced code blocks

In editor

It's handled by VS Code. The key here is tokenization. VS Code detects embedded languages in parent file, and redirects them to proper extensions that support the language.

To implement such support for a language, typically, two kinds of TextMate language grammars are needed: One defines language grammars for the language; the other provides scope redirection. Following TextMate's naming conventions is important for them.

A language extensionopen in new window provides language grammars for the language.

As for scope redirection, if the language is widely accepted enough, you can simply register it at microsoft/vscode-markdown-tm-grammaropen in new window. Or you can create an extension to inject grammars. When contributing such injection grammars, it's recommended to also set embeddedLanguages properly in extension manifest, so that most declarative language features, which are contributed by related language extensions, can work in the embedded language area.

An extension can also implement both. For example, LaTeX Workshopopen in new window provides language grammars for LaTeX, and injects scope redirection for LaTeX fenced code block. This way is often more practical.

After tokenization, themes come to assign colors and styles to the document.

In preview and exporting

It's powered by highlight.jsopen in new window.

Syntax highlighting in preview uses the one bundled with VS Code's built-in vscode.markdown-language-features extension. In exporting to HTML, it uses the one shipped with this product.

References