Make Obsidian code blocks compatible with prismjs spec and other apps

This is also just clicking for me: Obsidian has syntax highlighting, but only in Reading-mode.
But I never even noticed, because I’m always editing.

There’s the Editor Syntax Highlight Plugin, which works even while editing the syntax.

The built-in one uses PrismJS, the plugin uses CodeMirror. So the results look different. And behave different:

  • the style and colors are different.
  • the language names are different. py works as code definition Prism, but not for CodeMirror.
  • the plugin/CodeMirror supports far fewer languages. Godot’s GDScript and ABAP for example. Adding new language to CodeMirror’s codebase isn’t an option.

Not terrible - but also not very nice to use. And neither seem extendable with new syntax definitions. E.g. your personalized syntax.

Ideally the same system would cover both reading, editing and preview views. And allow syntax modification. Prism seems better. Shiki which hipstersmoothie mentioned above even better, as it takes VSCode definitions, so looks the same and provides the most code options. But I can see how that could be too much work.

3 Likes