Line numbers not working as expected

[jwade0]

Seems that the line numbers are added as a data attr correctly with rehypePrism, but there is no built in styling for the numbers. Am I missing something? I tried the example code in a codesandbox. Thanks!

[Jakobud]

I also cannot get line numbers to work at all using the current example. I copy pasted the example 1:1 into this CodeSandbox just as @jwade0 did:

https://codesandbox.io/p/sandbox/https-github-com-uiwjs-react-textarea-code-editor-issues-151-forked-px5jfj?file=%2Fsrc%2FApp.js%3A24%2C1&workspaceId=e268bb81-c582-4f74-bdf5-2e00c927b2a4

[lawlie8]

Any Update on This? Facing the Same Issue

[jacquesg]

You can try something like the following. I've adjusted the padding of the editor to 24px, and use a 14px font.

.code-line {
  position: relative;
}

.code-line::before {
  position: absolute;
  top: -8px;
  left: -20px;
  padding: 4px;
  content: attr(line);
  color: blue;
}

[sergeyvelichkin]

position of cursor is getting messed up after adding this

[jaywcjlove]

• [Feature Request] display line number #36
• JSON Highlighting of Value the same as the Name when a string #148