Nuxt.js+MDX自定义CodeBlock组件首行缩进异常问题求助

问题原因 #

你的组件模板中，<pre>与<code>标签之间存在缩进空白字符，而<pre>标签会严格保留所有空白（包括换行、空格、制表符），这就导致渲染后的第一行代码被这些额外空白强制偏移。

修复方案 #

修改模板里的<pre>和<code>部分，将两个标签放在同一行，彻底清除它们之间的空白：

<template>
  <!-- 其余代码保持不变 -->
  <div class="bg-background border border-border rounded-md mt-0 rounded-t-none w-full p-4 codeblock">
    <pre class="code-content"><code v-html="highlightedCode" :class="['language-' + props.lang]"></code></pre>
  </div>
</template>

额外说明 #

你在逻辑层已经用newCode.trim()处理了代码内容的空白，所以内容本身不存在问题，故障完全来自模板排版时的标签间空白。保留<code>的white-space: pre样式是正确的，它能确保代码原有格式被正常渲染。

内容的提问来源于stack exchange，提问作者Ketsebaot Gizachew