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

Question

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

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

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

我也想保留行号。

非常感谢你的帮助！

Answer 1

更新：从 react-syntax-highlighter 开始14.0.0，您可以使用 propwrapLongLines将行换行到下一行。在此处查看详细信息。

对于 14 之前的版本：这对我有用——用wrapLinesprop包裹它自己的每一行，然后用lineProps. 对 Nitesh 先前回答的提示。请注意，showLineNumbers以这种方式进行文本换行将无法正常工作。

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

Answer 2

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

尝试这个：

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