fail to show line number

[jytang0621]

here is my code. I'm confused where goes wrong.

import CodeEditor from "@uiw/react-textarea-code-editor";
import rehypePrism from "rehype-prism-plus";

export const Sparql = () => {
  return (
    <CodeEditor
      value={`  SELECT ?x ?name
  {
    ?x  foaf:mbox <mailto:alice@example> .
    ?x  foaf:knows ?a1 .
    ?a1 foaf:knows ?a2 .
    ?a2 foaf:name ?name .
  }`}
      language="sparql"
      data-color-mode="light"
      rehypePlugins={[
        [rehypePrism, { ignoreMissing: true, showLineNumbers: true }],
      ]}
      style={{
        fontFamily:
          'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
      }}
    />
  );
};

[sergeyvelichkin]

up this

[sporto]

Same, doesn't seem to do anything

[jaywcjlove]

Added line numbers to code using the rehype-prism-plus package, which only adds className and related info to HTML tags. The styling needs to be controlled via CSS, but displaying it properly in the interface is not easy to implement.

[rowlinsonmike]

This worked for me.

Wrap the code editor in a div with a gutter (margin) so the typing and code layer stay locked.

      <div style={{ marginLeft: "40px" }}>
        <CodeEditor
          value={content}
          language="python"
          rehypePlugins={[[rehypePrism, { ignoreMissing: true, showLineNumbers: true }]]}
          onChange={(evn) => handleContentChange(evn.target.value)}
          padding={15}
          readOnly={readOnly}
          className="h-full w-tc-editor"
          style={{
            fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
          }}
        />
      </div>

apply this css on .w-tc-editor to drop the line numbers visibly into that gutter and prevent them from being copied when selecting the content.

/* prevent editor cutting off numbers */
.w-tc-editor {
  overflow: visible !important; 
}

/* pull numbers left into margin */
.w-tc-editor .code-line {
  position: relative;
  display: block;
}

.w-tc-editor .code-line::before {
  content: attr(line);           
  position: absolute;
  left: -35px; /* pull number cleanly into the parent div margin */
  width: 25px;
  text-align: right;
  color: #8892b0;                
  user-select: none;             
  pointer-events: none;          
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}