使用React-Synred-Highlight启用换行？

Question

当我将降价文件渲染为超文本标记语言时，我正在使用React语法荧光笔突出显示代码。

我看到我必须将wrapLines设置为true，以便每行都有一个spans父级。但是，我对应该传递给lineProps什么来启用换行感到困惑？

例如，您可以查看此屏幕截图。

我也想保留行号。

非常感谢您的帮助！

Answer 1

根据 https://www.npmjs.com/package/react-syntax-highlighter 文档，您可以使用：

lineProps-如果wrapLines为true，则要传递给包装每行的span的props。可以是一个对象或函数，它接收当前行号作为参数并返回props对象。

试试这个：

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

沙盒片段 ： https://codesandbox.io/s/syntax-highlighter-demo-skhkw

Answer 2

这对我来说也真的很困惑。

wrapLines不是以预定义的长度或容器宽度包装代码行。

它是围绕包含DOM元素的每一行（在DOM元素中“包装”该行）。

我想这个选项的名字应该改一下。

• 原刊：https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/44
• 拉取请求：https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/46

Answer 3

更新：从react syntax highlighter14.0.0开始，您可以使用propwrapLongLines将行包装到下一行。请参见此处的详细信息。

对于14之前的版本：以下是对我有用的方法 -

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