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

Question

我正在使用 React Syntax Highlighter当我将 Markdown 文件呈现为 HTML 时突出显示代码。
我看到我必须设置wrapLines 至 true所以有一个 span每行的父级。但是，我对应该传递给 lineProps 的内容感到困惑启用换行？
例如，您可以查看此屏幕截图。

我也想保留行号。
非常感谢你的帮助!

Answer 1

更新 :从 react-syntax-highlighter 14.0.0 开始，你可以使用 Prop wrapLongLines为了将行换行到下一行。 See details here .
对于 14 之前的版本:
这对我有用 - 用 wrapLines 包裹它自己的每一行prop 然后使用 lineProps 为每一行添加一个自定义样式.对 Nitesh 先前回答的提示。请注意 showLineNumbers以这种方式使用文本换行将无法正常工作。

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