<code>嵌套<pre>时出现多余空行问题求助（PrismJS环境）

方法1：用HTML注释消除标签间空白 #

在<pre>和<code>之间插入空注释，吃掉两者之间的换行和空白，既保持<code>在<pre>下一行且缩进的格式要求，又不会产生首行空行：

<pre>
<!-- --><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
&lt;/html&gt;
</code>
</pre>

注释会被浏览器忽略，但能消除<pre>闭合后的换行和<code>开头前的空白，让代码内容的首行直接顶格显示。

方法2：调整代码内容的书写格式 #

把代码首行紧跟在<code>标签后面，同时手动去除代码内容的首行缩进，既满足<code>在<pre>下一行的要求，又不会让DOCTYPE缩进：

<pre>
    <code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
&lt;/html&gt;
</code>
</pre>

这里<code>保持缩进（满足Prism的格式要求），代码首行直接跟在<code>标签后，后续代码缩进正常保留，最终渲染时DOCTYPE不会缩进，也没有首行空行。

方法3：自定义Prism渲染逻辑（进阶） #

如果上面的方法都不合适，可以通过Prism的钩子函数在渲染时自动移除代码块的首行空白，添加这段初始化代码即可：

Prism.hooks.add('before-sanity-check', function(env) {
    // 移除代码内容开头的空白
    env.code = env.code.replace(/^\s+/, '');
});

这样不管<pre><code>之间的空白如何，都会自动去掉代码内容开头的空白，保证首行正常显示。

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