是否使用React-Syntax-Highlighter启用换行？

Question

在将标记文件呈现为HTML时，我使用React Syntax Highlighter来突出显示代码。

我看到我必须将wrapLines设置为true，这样每一行都有一个span父对象。但是，我对应该传递给lineProps以启用换行的内容感到困惑。

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

​

​

我也想保留行号。

非常感谢你的帮助！

Answer 1

反应语法更新：从react-syntax 14.0.0开始，你可以使用正确的wrapLongLines来换行到下一行。See details here。

对于14之前的版本:这是对我有效的方法，用wrapLines - wrapping它自己的每一行，然后用lineProps为每一行添加一个自定义样式。向Nitesh之前的回答致敬。请注意，以这种方式进行文本换行时，showLineNumbers将无法正常工作。

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

Answer 2

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

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

试试这个：

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

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

Answer 3

这也让我很困惑。

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

它涉及到包含DOM元素中的每一行(将行“包装”在DOM元素中)。

我认为选项的名称可能应该更改。

资料来源

https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/44

• Pull Request：https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/46

• 原始问题：