Laravel Blade中用<pre><code>展示代码首行缩进异常问题求助

问题出在<pre>标签的特性上——它会原封不动保留所有空白字符（包括空格、制表符、换行）。你在Blade模板里给<code>标签和{{ $content->data->code }}变量加的缩进，会被直接输出到HTML中，最终被<pre>渲染成代码首行的多余缩进。

1. 移除模板内的多余缩进（最优解） #

把<pre>、<code>和变量都顶格编写，消除模板里的缩进，这样输出的HTML就不会引入额外空白：

@if ($content->type == 'code')
<pre class="w-full m-0">
<code class="block text-left p-4 border border-solid border-gray-500 bg-gray-100 rounded-md">
{{ $content->data->code }}
</code>
</pre>
<br>
@endif

2. 用Blade空白控制保留模板格式 #

如果不想破坏模板的缩进结构，可使用Blade的-指令移除标签前后的空白：

@if ($content->type == 'code')
    <pre class="w-full m-0">-
        <code class="block text-left p-4 border border-solid border-gray-500 bg-gray-100 rounded-md">-
            {{ $content->data->code }}
        </code>-
    </pre>
    <br>
@endif

-会自动删除标签末尾的换行和空白，避免模板缩进被带入<pre>内部。

3. CSS应急修正（不推荐） #

若无法修改模板，可通过CSS忽略多余前置空白，但可能影响代码原有格式：

pre {
    white-space: pre-line;
}

或者用text-indent: -2em;这类属性抵消首行缩进，需根据实际缩进量调整数值。

内容的提问来源于stack exchange，提问作者Joyce Ratovoarisoa