使用JSX将代码呈现到页面，同时保留换行符

2024-05-14 • 问答

我正在尝试使用一个包含大量代码的字段，这些代码包含换行符和制表符。我希望它呈现并保留制表符和换行符。

基本上，我希望它看起来像代码在输出时在堆栈溢出中格式化。当我使用字符串文字时，它不会保留制表符和换行符。

下面是我的代码

import React,{ useContext } from 'react'
import FunctionalContext from '../../context/functional/functionalContext';


const FunctionalComponent = () => {
  const functionalContext = useContext(FunctionalContext);

  return (
    <div>
      <h1>Classes</h1>
      <h2>Classes</h2>
      <code>{`
          import React from 'react'
        constructor() {
          super()
      `}
      </code>



    </div>
  )
}

export default FunctionalComponent

code元素默认情况下未预先格式化。您可以对其应用white-space样式之一，也可以将其放在pre元素中。

不过，我认为您会以一种有用的方式来呈现选项卡。您可能需要将它们扩展到作者正在使用的任何制表位，然后再输出。

使用<pre><code>...</code></pre>的示例：

const Example = () => {
  const code =
`
import React from 'react';

class Foo extends React.Component {
    constructor() {
        super();
    }
}`;

  return (
    <div>
      <h1>Classes</h1>
      <h2>Classes</h2>
      <pre><code>{code}</code></pre>
    </div>
  );
}

ReactDOM.render(<Example/>,document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

使用white-space样式的示例：

const Example = () => {
  const code =
`
import React from 'react';

class Foo extends React.Component {
    constructor() {
        super();
    }
}`;

  return (
    <div>
      <h1>Classes</h1>
      <h2>Classes</h2>
      <code className="block">{code}</code>
    </div>
  );
}

ReactDOM.render(<Example/>,document.getElementById("root"));

.block {
    display: block;
    white-space: pre;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

我还加入了display: block，因为默认情况下code是内联的。

使用JSX将代码呈现到页面，同时保留换行符

chengnuo2020 回答：使用JSX将代码呈现到页面，同时保留换行符

大家都在问