How to add line numbers to code block using prismjs

I am using PrismJs to highlight the code block’s inside the editor, when I use the Line Numbers plugin, it basically re-renders the DOM, & when I put a debugger, I can see the line numbers, but after that it gets disappeared.

I have made a small demo using Tiptap here on stackblitz, not sure how to proceed further, if I run the same locally, where debugger is commented out, I can see code is going somewhere inside prosemirror code and the whole DOM get’s re-rendered again

Has anyone faced this problem earlier ?

Changing the DOM inside a ProseMirror editor like that is just not going to work. The editor is watching for DOM mutations, and will re-parse and re-render the content every time it gets changed. If you want the code to be directly editable, as part of the ProseMirror content, you cannot use Prism on it. You could replace it with an uneditable node view, or even embed a code editor.

1 Like

@marijn thanks alot for quick response