突出显示组件中的代码片段显示在一行长行中

Question

突出显示组件中的代码片段显示在一行长行中。

如何在高亮组件中添加多个行代码？

Answer 1

假设你正在使用反应高亮，最简单的方法可能是使用<br>的。似乎使用innerHTML道具也应该是一种选择，但从我(有限的(测试来看，该功能似乎有问题。

import React, {Component} from 'react';
import Highlight from 'react-highlight';
class App extends Component {
render() {
return (
<div>
<Highlight language='javascript'>
const varOnLine1 = "abc";<br/>
const varOnLine2 = "def";<br/>
const varOnLine3 = "ghi";
</Highlight>
</div>
);
}
}
export default App;