javascript - Enabling line wrap with React-Syntax-Highlighter? - Stack Overflow

admin管理员组

文章数量:1201372

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!

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!

• javascript
• css

Share Improve this question Follow edited Sep 13, 2020 at 17:11 James Moore 9,02666 gold badges7676 silver badges9393 bronze badges asked Jun 20, 2020 at 22:24 Somya AgrawalSomya Agrawal 37511 gold badge33 silver badges1515 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 20

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}
>

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

As per https://www.npmjs.com/package/react-syntax-highlighter docs you can use :

lineProps - props to be passed to the span wrapping each line if wrapLines is true. Can be either an object or a function that receives current line number as argument and returns props object.

try this :

<SyntaxHighlighter
  lineProps={{style: {paddingBottom: 8}}}
  wrapLines={true}
  showLineNumbers={true}
</SyntaxHighlighter>

sandbox snippet : https://codesandbox.io/s/syntax-highlighter-demo-skhkw

I'm using v15 and these properties worked for me.

<SyntaxHighlighter
  wrapLines
  wrapLongLines
>
  {code}
</SyntaxHighlighter>

本文标签： javascriptEnabling line wrap with ReactSyntaxHighlighterStack Overflow