I did a proof of concept this week to create a plugin which adds the line number feature for code blocks in preview mode.
It has some extra features as well, e.g. the top-right “Copy” button on hover, and color preview in
css code blocks (see screenshot above)
Essentially what I have done is to extend the Prism.js (i.e. the syntax highlighter used in the preview mode) with its own plugins (e.g. this one). Thanks to the Obsidian API (
MarkdownPostProcessor), I’m able to listen to the editor changes and re-render the line number whenever something changed in the code block.
I still love to see this feature to officially become part of Obsidian. Worth noting that there may be a better solution for this, which is proposed here to consolidate the syntax highlighting library - as of today we have CodeMirror for editor, and Prism.js for code blocks in preview mode.
P.s.: Since my plugin is just a proof-of-concept sort of thing and its code quality is below my acceptance criteria, I am not going to publish it. However, if you are interested, feel free to ping me here or on Obsidian discord server (same id).