It would be nice to be able to add line numbers. I know there is a prismjs plugin for

You can also check this on how to add line numbers with just CSS: <a class="commit-lin

Wow <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Line numbers about react-simple-code-editor HOT 4 CLOSED

gausie commented on July 22, 2024

Line numbers

from react-simple-code-editor.

Comments (4)

kitten commented on July 22, 2024 5

If you use prism-react-renderer for highlighting it becomes quite trivial to add line numbers :) https://github.com/FormidableLabs/prism-react-renderer

The example CodeSandbox shows how to integrate it with react-simple-code-editor and I have another snippet somewhere that has line numbers which I can upload later :)

from react-simple-code-editor.

cyberwombat commented on July 22, 2024 3

Turns out you can't add html tags in the lines as it breaks weirdly when using thing like backspace. I am injecting the line numbers in the before pseudo element - no idea how well that scales though... I am also adding a sharp gradient background to editor for a nice margin.

  // I am using JSON - make it look nice
  const initialValue = JSON.stringify(myJson, null, 4)

  // Count newlines and pad to match actual line numbers
  const lines = (initialValue.match(/\n/g) || []).length + 2

  // Determine padding needed (length of line number length)
  const pad = String(lines).length

  //  Make sharp stop editor gradient background padded to fit font size/style
  const bg = `linear-gradient(90deg, #EDF2F7 ${20 + pad * 8}px, ${20 + pad * 8}px, #FFF 100%)`

  // Create content with all line numbers and newline them
  const lineNos = [...Array(lines).keys()].slice(1).join('\\00000a')

  // Style pseudo
  const before = {
    fontFamily: 'Inconsolata, monospace',
    paddingTop: '10px',
    content: `"${lineNos}"`,
    width: `${20 + pad * 8}px`,
    position: 'absolute',
    whiteSpace: 'pre',
    paddingRight: '10px',
    textAlign: 'right',
    opacity: 1
  }

  // Note: PseudoBox is from chakra-ui - basically just a div - _before is the pseudo elements style
  return (
    <PseudoBox h="100%" position="relative" background={bg} _before={before}>
      <Editor
        width="100%"
        value={initialValue}
        onValueChange={onChange}
        highlight={code =>
          highlight(code, languages.json)
        }
        padding={10}
        style={{
          fontFamily: 'Inconsolata, monospace',
          fontSize: 16,
          marginLeft: `${20 + pad * 8}px`,
        }}
      />
    </PseudoBox>
  )