Enabling line wrap with React-Syntax-Highlighter?

Question

I'm using React Syntax Highlighter to highlight code when I render a markdown file to HTML.

I see that I have to set wrapLines to true so that there's a span parent for each line. However, I'm confused on what I should be passing to lineProps to enable line wrap?

For an example, you can look at this screenshot.

I'd like to preserve the line numbers too.

Thank you very much for the help!

Answer 1

Update: as of react-syntax-highlighter 14.0.0, you can use the prop wrapLongLines in order to wrap the lines to the next line. See details here.

For versions before 14: Here's what worked for me – wrapping each line it's own with wrapLines prop and then adding a custom style to each line with lineProps. Hat tip to a Nitesh's previous answer. Note that showLineNumbers won't work correctly with text-wrapping in this way.

<SyntaxHighlighter
  lineProps={{style: {wordBreak: 'break-all', whiteSpace: 'pre-wrap'}}}
  wrapLines={true} 
  language="jsx" 
  style={a11yDark}
>

Answer 2

This was also really confusing to me.

The wrapLines is NOT about wrapping lines of code at a pre-defined length or the container width.

It's about surrounding each line in a containing DOM element ("wrapping" the line in a DOM element).

I suppose the name of the option should probably be changed.

Sources

• Original issue: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/44
• Pull Request: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/46