Preview Code Blocks with Line Number (Optional)

It will be great if I could preview code blocks with line number by some syntax hint.

e.g. code block preview with line number
image

According to my experience with another markdown editor, it might be as below:

  • Normal Code Block (Preview without line number)
```language
code block content
code block content
code block content
```
  • Code Block with line number hint: :n (Preview with line number)
```language:n
code block content
code block content
code block content
```

Thanks very much.

9 Likes

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).

4 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Hope you share the plugin.

Thanks.

2 Likes

Code block enhancer has a line number functionality, though it’s set as a global setting rather than per codeblock.