高亮组件内的代码片段以单行显示

Question

Highlight组件内的代码段以单行显示。

如何在Highlight组件内添加多个行代码？

Answer 1

假设您正在使用react-highlight，最简单的方法可能是使用<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;