我想展示JSX代码示例。我使用以下代码：
在HTML中，我使用div>pre>code>span标记来格式化每个元素，以显示语法。

<div class="highlight">
        <pre>
          <code class="code">
            <span>const </span>
            root
            <span>=</span>
            ReactDOM
            <span>.</span>
            <span>createRoot</span>
            <span>(</span>
            document
            <span>.</span>
            <span>getElementById</span>
            <span>(</span>
            <span>'root'</span>
            <span>)</span>
            <span>)</span>
            <span>;</span>
            root
            <span>.</span>
            <span>render</span>
            <span>(</span>
            <span>
              <span>
                <span><</span>
                h1
              </span>
              <span>></span>
            </span>
            <span>Hello, World!</span>
            <span>
              <span>
                <span></</span>
                h1
              </span>
                <span>></span>
            </span>
            <span>)</span>
            <span>;</span>
          </code>
        </pre>
      </div>

在CSS中，我用途：空白和断字属性。

.highlight {
  background: #eeffcc;
  border: 1px solid #e1e4e5;
  margin: 0;
  padding: 0;
  overflow: auto;
  tab-size: 1.5em;
}

pre {
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  margin: 0;
  padding: 12px;
  display: block;
  overflow: auto;
  word-break: break-all;
}

一开始我只有一个大的空格在code元素中的code之前。在我尝试了不同的CSS代码后，你可以在下面的截图上我最好。我试着申请：white-space：pre添加到span元素。但我不想这样。