Document Line Numbers Snippet

Hey there!

Would be cool to add a small stub to the Readme to document adding line numbers either via either of the following methods:

• the CodeSandbox demo - src/basic.js - something like the code below
• @kitten: “I have another snippet somewhere that has line numbers which I can upload later”

Would the prism-react-renderer team be open to this?

---

CodeSandbox version

import React from 'react'
import styled from 'styled-components'
import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'

const exampleCode = `
(function someDemo() {
  var test = "Hello World!";
  console.log(test);
})();

return () => <App />;
`.trim()

const LineNo = styled.span`
  display: inline-block;
  width: 2em;
  user-select: none;
  opacity: 0.3;
`

const Pre = styled.pre`
  text-align: left;
  margin: 1em 0;
  padding: 0.5em;

  & .token-line {
    line-height: 1.3em;
    height: 1.3em;
  }
`

const Basic = () => (
  <Highlight {...defaultProps} theme={theme} code={exampleCode} language="jsx">
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <Pre className={className} style={style}>
        {tokens.map((line, i) => (
          <div {...getLineProps({ line, key: i })}>
            <LineNo>{i + 1}</LineNo>
            {line.map((token, key) => <span {...getTokenProps({ token, key })} />)}
          </div>
        ))}
      </Pre>
    )}
  </Highlight>
)

export default Basic

[huy-nguyen]

I tried @karlhorky’s solution and encounter a problem. It looks like the last element of tokens is an empty line that looks like this:

[{types: ["plaint"], content: "", empty: true}]

If you don’t add line numbering, this last line is not visible. However, the addition of the <LineNo/> React element causes this line to always be visible, leading to one extra empty line always showing up in every code block. My solution was to add a conditional check for for this empty line and also remove the styling for .token-line inside the Pre styled-component, so here’s how my solution looks (without the dynamic line number offset):

import React from 'react'
import styled from 'styled-components'
import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'

const exampleCode = `
(function someDemo() {
  var test = "Hello World!";
  console.log(test);
})();

return () => <App />;
`.trim()

const LineNo = styled.span`
  display: inline-block;
  width: 2em;
  user-select: none;
  opacity: 0.3;
`

const Pre = styled.pre`
  text-align: left;
  margin: 1em 0;
  padding: 0.5em;
`

const Basic = () => (
  <Highlight {...defaultProps} theme={theme} code={exampleCode} language="jsx">
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <Pre className={className} style={style}>
        {tokens.map((line, i) => {
            // Remove the last empty line:
            let lineNumberElem;
            if (
              line.length === 1 &&
              line[0].empty === true &&
              i === tokens.length - 1
            ) {
              lineNumberElem = null;
            } else {
              lineNumberElem = <LineNo>{i + 1}</LineNo>;
            }

            return (
              <div key={i} {...getLineProps({ line, key: i })}>
                {lineNumberElem}
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token, key })} />
                ))}
              </div>
            );
          })}
      </Pre>
    )}
  </Highlight>
)

export default Basic

I didn’t add it here but it’s also helpful to change the LineNo to display: inline-flex; justify-content: flex-end; padding-right: 0.5rem; to make line numbers right-align, which looks better instead of the jagged right edge with the original formatting.

[karlhorky]

Working on a PR now.