wordpress代码高亮框太长缩短

代码框过长通常有两种情况：一是代码行数太多，撑高了整个框；二是单行代码过长，把页面宽度撑破了。

下面针对这两种情况，可以将这些代码添加到 外观 → 自定义 → 额外CSS 中。

📏 方案一：限制代码框高度，超出部分出现滚动条（推荐）

如果是因为代码行数太多（比如几百行），直接全部显示会占用大量页面空间。可以给它设置一个最大高度，超出高度后出现纵向滚动条。

pre[class*="language-"] {
max-height: 400px; /* 最大高度400像素，你可以改成300px、500px等 */
overflow-y: auto; /* 超出后显示垂直滚动条 */
}

📐 方案二：让长代码行自动换行

如果是因为单行代码特别长（比如一长串参数、长URL），可以强制代码换行，避免撑破整个页面布局。

pre[class*="language-"] code {
white-space: pre-wrap !important; /* 允许换行 */
word-break: break-all !important; /* 强制在任意字符处断行 */
overflow-wrap: break-word !important; /* 长单词/URL也允许断行 */
}

如果想保持代码不换行，而是出现横向滚动条，可以用这组：

pre[class*="language-"] {
overflow-x: auto; /* 水平方向溢出显示滚动条 */
}
pre[class*="language-"] code {
white-space: pre !important; /* 保持不换行 */
}

🔄 方案三：同时限制高度和宽度（万能方案）

把上面两个合并，既限制高度又处理长行：

pre[class*="language-"] {
max-height: 400px; /* 高度限制 */
overflow: auto; /* 双向自动滚动条 */
overflow-x: auto; /* 水平滚动 */
overflow-y: auto; /* 垂直滚动 */
}

pre[class*="language-"] code {
white-space: pre !important; /* 不换行，用滚动条查看 */
}

🧪 方案四：使用折叠/展开功能（适合极长代码）

如果你的代码块特别长，但又希望读者可以选择查看完整内容，可以在文章中使用 <details> 标签（需要切换到“自定义HTML”区块或经典编辑器文本模式）：

<details>
<summary>点击展开代码</summary>
<pre><code class="language-lua">
-- 这里放你的长代码
print("hello world")
</code></pre>

</details>

这样代码默认折叠，点击后才展开，非常节省空间。