I’ve just discovered Obsidian. Am very, very impressed by how such a simple interface solves so many pain points I’ve had with text notes.
However!
Use case or problem
Obsidian defines prismjs code blocks using backticks followed by the language, e.g., ```js
The prismjs spec requires prefixing with language- or lang-, e.g., ```language-js
This means that code blocks inserted via Obsidian are not compatible if the text file is opened in any other apps using prismjs (in my case DEVONthink), and vice versa.
Proposed solution
Allow Obsidian to recognise code blocks in a manner consistent with the prismjs spec, i.e., with the language- or lang- prefix.
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.
Having written a plugin now I see that switching to shiki would be quite hard. all current plugins are tied to codemirror so changing to shiki (an by extension monaco) would probably be a huge lift.
Instead the solve for this could be just switching the preview pane from using prism to highlighting with codemirror. We miss out on the better textmate tokenization, but will at least have matching themes when switching between the editor and preview
I merged the two threads for and against using primjs, as both options can’t be implemented. I’m tempted to merge this with the syntax highlighting thread as well.
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.
