如何解决 Highlight.js 中长代码行溢出页面的问题

highlight.js 默认不处理超长代码行的换行，导致内容溢出容器破坏页面布局；通过为 `

` 元素添加兼容性良好的 css 换行规则（如 `white-space: pre-wrap` 和 `word-wrap: break-word`），可强制长行自动折行，保持排版整洁。
在使用 Highlight.js 渲染代码块时，其默认将代码包裹在 
...
 结构中。由于 
元素天然保留空白符且默认禁止自动换行（white-space: pre），当遇到无空格的超长字符串（如 Base64 数据、长 URL、连续字母变量名或未格式化的 json）时，浏览器无法断行，导致代码横向溢出容器，破坏整体响应式布局——这正是你在 FarsLearn 示例页面 中观察到的问题。
✅ 正确解决方案是覆盖 
 的默认换行行为，启用智能折行。推荐使用以下具有广泛浏览器兼容性的 CSS 规则：
pre {   white-space: pre-wrap;       /* CSS 2.1 标准：保留空格与换行，允许折行 */   white-space: -moz-pre-wrap;  /* Firefox 早期版本 */   white-space: -webkit-pre-wrap; /* safari < 13（可选补充） */   white-space: -o-pre-wrap;      /* Opera 7–12 */   word-wrap: break-word;         /* IE 5.5+ / edge Legacy：强制打断过长单词 */   word-break: break-word;        /* 现代标准补充（Chrome/Firefox/Safari/Edge） */ }

⚠️ 注意事项：

white-space: pre-line 虽简洁，但会合并多余空白符，可能破坏代码缩进和格式，不推荐用于代码高亮场景；
 overflow-x: auto（添加滚动条）是备选方案，但牺牲可读性与移动端体验，应优先采用折行；
若项目已使用 CSS 预处理器（如 sass），建议将该样式封装为 @mixin code-wrap 复用；
对于  内联代码，无需额外设置（因其默认为 white-space: normal），本规则仅需作用于
容器。
 

添加上述 CSS 后，所有 Highlight.js 渲染的代码块将自动在容器边界处合理折行，既保持语法高亮完整性，又确保响应式友好——正如你在 Free Download Package 页面 中看到的正常效果。