How to add line numbers to code blocks

[joshua7v]

I am aware of #321 and prismjs with its line numbers plugin.

However, it seems its not that easy when I actually trying to add line numbers.
line numbers need to be manually triggered according to PrismJS/prism#1487 (comment)

The issue here is primjs will change the dom after triggering a highlight.
The picture below shows the dom difference.
The good news is the line numbers do show correctly, but the bad news is the code block is no longer editable.
Any update would lead to an exception like Error: Cannot resolve a Slate point from DOM point: [object Text],1

So, is there a feasible/good way to add line numbers to code blocks?
Thanks.

[joshua7v]

Acutally you can make your own line numbers component within custom CodeBlockElement, no need to use the prism plugin.

[zbeyens]

You can do that within CodeLineElement. Just make sure it's contentEditable=false.

[12joan]

I tried doing this in my app and eventually gave up. Everything was working fine, except I couldn't get the line numbers to be consistently non-selectable and non-copyable in all browsers.