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

Question

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

我发现我必须将

wrapLines

设置为

true

，以便每行都有一个

span

父级。但是，我很困惑应该传递给

lineProps

来启用换行？

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

我也想保留行号。

非常感谢您的帮助！

Answer 1

更新：从react-syntax-highlighter

14.0.0

开始，您可以使用道具

wrapLongLines

将行换行到下一行。查看详情。

对于 14 之前的版本：这对我有用 - 用

wrapLines

属性包裹它自己的每一行，然后使用

lineProps

向每行添加自定义样式。向 Nitesh 之前的回答致敬。请注意，通过这种方式进行文本换行，

showLineNumbers

将无法正常工作。

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

Answer 2

这也让我很困惑。

wrapLines

不是关于以预定义长度或容器宽度换行代码行。

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

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

Answer 3

lineProps

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

试试这个：

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

Answer 4

我正在使用 v15，这些属性对我有用。

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