Feature: Right align line numbers

[Nate-Wilkins]

I was looking to see if react-syntax-highlighter or prizm.js had the ability to right align the line numbers.

Example

This is the code I currently have:

<SyntaxHighlighter
  children={<>
  # Header
  
  Paragraph and line numbers.
</>}
  style={{ ...coldarkCold }}
  language={"markdown"}
  showLineNumbers
  wrapLongLines
  PreTag="div"
/>

Possible Solutions

• Align the line numbers to the right by default (there looks to be a style that right aligns the text but this doesn't seem to work on my Chromium version?)
• Provide a possible option to align them

Workaround

It looks like you can apply grid line styles with the desired effect:

<SyntaxHighlighter
  children={<>
  # Header
  
  Paragraph and line numbers.
</>}
  style={{ ...coldarkCold }}
  lineNumberContainerStyle={{
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
  }}
  lineNumberStyle={{
    gridColumn: '1',
    minWidth: 'unset',
    width: '1.5em',
    textAlign: 'right',
    paddingRight: '0.25em',
  }}
  language={"markdown"}
  showLineNumbers
  wrapLongLines
  PreTag="div"
/>