[Feature Request] display line number

[xsro]

No description provided.

[jaywcjlove]

@xsro It is more difficult to add line numbers, and there is no plan to add this feature before finding a better way.

[marabesi]

Just came across this issue because I would like to support line numbers as well.

Will it be in the roadmap? Or should I try to find a replacement?

[obonyojimmy]

Supporting this feature inclussion , probably aprop like showInlineLineNumbers as an inspiration from https://www.npmjs.com/package/react-syntax-highlighter

[stephensanwo]

I added line numbers by creating a div on the left side of the code editor. Using a useEffect hook ensures that the line numbers increases as the height of the code editor increase. Let me know what you think.

const Code: React.FC<CodeProps> = ({
  id,
  codeData,
  handleCodeChange,
  style,
  language,
  placeholder,
}) => {
  let numStart = 1;
  const ref: any = useRef("");
  const [num, setNum] = useState([numStart]);

  useEffect(() => {
    let currentHeight: number = ref.current.offsetHeight;
    let eachNum = Math.round((currentHeight - 15) / 20);
    let arr = Array.from({ length: eachNum }, (_, i) => i + 1);
    setNum(arr);
  }, [ref.current.offsetHeight]);

  return (
    <CodeContainter>
      <LineNumbers ref={ref}>
        {num.map((item, index) => (
          <LineNumber key={index}>{item}</LineNumber>
        ))}
      </LineNumbers>
      <CodeEditor
        id={id}
        value={codeData}
        language={language}
        placeholder={placeholder}
        onChange={(event) => handleCodeChange(event)}
        padding={15}
        style={style}
        data-color-mode="dark"
      />
    </CodeContainter>
  );
};
export default Code;

[shawnz42]

Hi, from where to import CodeContainter and LineNumbers

[Sumis34]

I added line numbers by creating a div on the left side of the code editor. Using a useEffect hook ensures that the line numbers increases as the height of the code editor increase. Let me know what you think.

const Code: React.FC<CodeProps> = ({
  id,
  codeData,
  handleCodeChange,
  style,
  language,
  placeholder,
}) => {
  let numStart = 1;
  const ref: any = useRef("");
  const [num, setNum] = useState([numStart]);

  useEffect(() => {
    let currentHeight: number = ref.current.offsetHeight;
    let eachNum = Math.round((currentHeight - 15) / 20);
    let arr = Array.from({ length: eachNum }, (_, i) => i + 1);
    setNum(arr);
  }, [ref.current.offsetHeight]);

  return (
    <CodeContainter>
      <LineNumbers ref={ref}>
        {num.map((item, index) => (
          <LineNumber key={index}>{item}</LineNumber>
        ))}
      </LineNumbers>
      <CodeEditor
        id={id}
        value={codeData}
        language={language}
        placeholder={placeholder}
        onChange={(event) => handleCodeChange(event)}
        padding={15}
        style={style}
        data-color-mode="dark"
      />
    </CodeContainter>
  );
};
export default Code;

Looks nice, would be nice to see a working example with the full code needed.

[jonashex]

It would be really nice to have this feature :)

[andreasvirkus]

Line numbers can be implemented with a few lines of CSS:

.code-highlight {
  counter-reset: linenumber;
}

.code-line::before {
  position: absolute;
  translate: -130% 0; /* tweak accordingly */
  content: counter(linenumber);
  counter-increment: linenumber;
  color: #333;
  text-align: right;
  user-select: none;
  padding: 0 4px;
}

---

⚠️ But the very last active line doesn't get a <span class="code-line"> wrapper unless it has content, resulting in a weird editor experience; @jaywcjlove do you know if this is a bug or intended behaviour? Any quick workaround?

Screen.Recording.2024-08-05.at.14.37.45.mov

[jaywcjlove]

react-textarea-code-editor/core/src/Editor.tsx

Line 69 in c3d2efa

)}</code><br /></pre>`,

@xsro Line breaks are added to align with the Textarea.

[andreasvirkus]

@jaywcjlove the line break just adds visual padding, the trailing newline that you can enter in the editor (and that gets no span.code-line wrapper and also no line number) lives inside the code element instead. Is there some known workaround for this or is this a bug?

[jaywcjlove]

@andreasvirkus Line numbers are not displayed by default. If needed, you can add them using the following method.

import rehypePrism from 'rehype-prism-plus';
import React, { useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor';

export default function App() {
  const [code, setCode] = useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <CodeEditor
      value={code}
      language="js"
      placeholder="Please enter JS code."
      onChange={(evn) => setCode(evn.target.value)}
      rehypePlugins={[
        [rehypePrism, { ignoreMissing: true, showLineNumbers: true }]
      ]}
      padding={15}
      style={{
        backgroundColor: "#f5f5f5",
        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
      }}
    />
  );
}

react-textarea-code-editor/core/src/index.tsx

Line 9 in c3d2efa

const { rehypePlugins = [[rehypePrism, { ignoreMissing: true }]] as Pluggable[], ...reset } = props;

2024-09-12.21.45.49.mp4

[andreasvirkus]

@jaywcjlove thanks, I've already tried the rehype plugin but irrelevant of the implementation method, the last line (if just an empty newline) is still without a line number since it's not represented within the editor-preview (pre element) itself, only in the textarea:

This results in the following broken behaviour:

Screen.Recording.2024-09-13.at.11.42.19.mov

I'd expect the line number "5" to appear immediately when pressing enter, otherwise it's as if the cursor is outside the bounds of the editor, trailing in the void.