使用prism.js实现HTML代码片段时无法去除空白区域求助

以下是几种无需将代码改成单行加<br>的解决方案：

1. 调整HTML结构（最直接） #

问题根源是<pre>和<code>标签内的换行、缩进被<pre>保留成了空白行。只需把<code>标签和代码内容的前后多余缩进、换行去掉，保留代码本身的格式即可：

<div class="content" id="section1-sub1">
    <h2>Introduction</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    <h4>Exemple de Code</h4>
    <div class="code-wrapper">
        <div class="code-header">
            <span class="language">JavaScript</span>
            <img src="copy.png" alt="" onclick="copyCode()" class="copy-btn">
        </div>
        <hr class="separator">
        <pre class="code"><code class="language-javascript">async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
}</code></pre>
    </div>
</div>

这样既保留了代码本身的缩进格式，又不会出现多余的空白行。

2. 用CSS修正 #

如果不想改动HTML结构，可以通过CSS隐藏多余的空白：

/* 去掉pre容器默认内边距，避免空白被放大 */
pre.code {
    padding: 0;
    margin: 0;
}
/* 让code块独占一行，精准保留代码内空白，去掉前后冗余空白 */
code.language-javascript {
    display: block;
    white-space: pre;
    padding: 1em; /* 按需添加内边距，还原原有视觉效果 */
    margin: 0;
    text-align: left;
}

也可以使用CSS的white-space-collapse属性（注意现代浏览器兼容性）：

pre.code {
    white-space-collapse: preserve-breaks;
}

3. 借助Prism.js官方插件 #

Prism提供了Normalize Whitespace插件，专门处理代码中的多余空白。使用步骤：

1. 在Prism核心脚本之后引入该插件脚本
2. 配置参数清理代码前后的空白行：

Prism.plugins.NormalizeWhitespace.setDefaults({
    'remove-trailing': true,
    'remove-indent': true,
    'left-trim': true,
    'right-trim': true
});

插件会自动清理代码块前后的空白，同时完整保留代码内部的格式。

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