起因

最近再重构博客文本的代码块，用上了AI帮忙生成了React的代码样式，照搬到了Vue发现样式有问题。

排查


      jsx
      复制代码
    
<pre className="m-0 p-0 bg-transparent font-mono text-sm leading-6 text-gray-300" style={{ tabSize: 2 }}>
  <code>
    {lines.map((line, i) => (
  <div key={i} className="whitespace-pre group/line">
    {/* Simple pseudo-syntax highlighting wrapper */}
    <LineContent line={line} />
  </div>
))}
  </code>
</pre>

上面的是react的代码，下面的是vue的代码


      vue
      复制代码
    
<pre class="m-0 p-0 bg-transparent font-mono text-sm leading-6 text-gray-300">
  <code>
    <div v-for="(line ,index) in lines" :key="index" v-html="highlightedCode(line, language)"/>
  </code>
</pre>

vue的效果就是和react差距在react的可以和行数对齐，vue的上下都会留白。我检查了react项目中的其余css样式，也都没有单独针对<pre>标签的，我发现在vue中将<pre>改为<div>就不会上下留白，我当时初步怀疑是样式问题，所以一直再找2者之间的区别，后面单独在react项目中的html文件里也写了同样的<pre>代码，发现也有留白，我就一直怀疑是不是react是不是有什么特殊处理。

在我遍寻AI和Google的时候都没法解决的时候，尝试问了一下热心的群友，他当即给我发了下面三张图片，以解我的疑惑。