Use different underlying syntax highlighting library

Use case or problem

The current syntax highlighting for the markdown previews uses “prismjs” and this highlighting isn’t applied to the code blocks in editing mode. There are many requests for this. To fill the void there is a plugin to achieve this but it is based on “codemirror”. This results in some weird usage:

  • They don’t come with matching themes
  • They use different tokenizers and results in different HTML, so you have to write your themes twice
  • Both prismjs and codemirror are highlighters built for web and they don’t have the best tokenization. Text editors use the textmate tokenizer which results in waaaay better syntax highlighting. It supports theme customization prismjs and codemirror can’t even come close to.

Proposed solution

  1. Switch all code highlighting to GitHub - shikijs/shiki: A beautiful Syntax Highlighter. - It uses TextMate grammar to tokenize strings, and colors the tokens with VS Code themes.
  2. Enable syntax highlighting in editor mode using shiki
  3. Expose a syntaxTheme configuration option that can use any vscode theme, portentially expose two options: lightSyntaxTheme and darkSyntaxTheme

Current workaround (optional)

Use the community plugin for editor syntax highlighting + write two similar (but not matching) themes for both underlying syntax highlighters

Related feature requests (optional)


2 posts were merged into an existing topic: Make Obsidian code blocks compatible with prismjs spec and other apps