Preview Code Blocks with Line Number (Optional)

Plugins ideas
1

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.

10 Likes
2

I did a proof of concept this week to create a plugin which adds the line number feature for code blocks in preview mode.

image
image1801×714 76.6 KB

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

7 Likes
3

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

5

Hope you share the plugin.

Thanks.

2 Likes
6

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

1 Like
7

Code Block Enhancer is a great plugin, but I’ve recently noticed that it’s line numbering does not align correct with the actual lines of code. Hope this gets fixed.

1 Like
8

well he/they didn’t :frowning:
It looks really strange when the line numbers look totally out of place like it is now with code block enhancer.

is there maybe a theme that solves this?

1 Like
9

Markdown do not have a good format standard for codeblock hightlights

It takes long time that community have

``` -> ```lang

And may also take long from

```lang -> ```lang LN=True TI="title"

It just don’t have standard on the syntax, some md dialect has these things, but there is no format standard on them.

obsidian as a big markdown community , should consider design a wide considerable extended standard for thsese issues.

2 Likes
10

Just find the advanced-codeblock plugin can achieve this:

```language nums {4}

```

It can also highlight the specific lines (e.g. 4 in the above example)

11

My plugin GitHub - mayurankv/Obsidian-Code-Styler: A plugin for Obsidian.md for styling codeblocks and inline code can also do this. It also has some other quality of life improvements including codeblock folding, inline code syntax highlighting, line highlights and more!

2 Likes