Skip to content

Line numbers not working as expected #176

Open
Open
Line numbers not working as expected#176

Description

@jwade0
jwade0
opened on Oct 29, 2024

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!

image

Activity

  1. Jakobud commented on Nov 18, 2024

    @Jakobud
    Jakobud
    on Nov 18, 2024

    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

    image

  2. lawlie8 commented on Dec 10, 2024

    @lawlie8
    lawlie8
    on Dec 10, 2024

    Any Update on This? Facing the Same Issue

  3. jacquesg commented on Dec 13, 2024

    @jacquesg
    jacquesg
    on Dec 13, 2024

    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;
}

  4. sergeyvelichkin commented on Feb 27, 2025

    @sergeyvelichkin
    sergeyvelichkin
    on Feb 27, 2025

    position of cursor is getting messed up after adding this

  5. jaywcjlove commented on Aug 16, 2025

    @jaywcjlove
    jaywcjlove
    on Aug 16, 2025
    Member
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions