使用Highlight.js时长代码行溢出页面的问题求助

方案1：添加CSS样式实现横向滚动（推荐） #

给Highlight.js生成的代码容器添加横向滚动能力，既保留代码原始格式，又不会溢出页面：

/* 针对Highlight.js的pre标签 */
pre.hljs {
  overflow-x: auto;
  white-space: pre; /* 维持代码的原始换行逻辑，不自动拆分代码行 */
  max-width: 100%; /* 限制代码块最大宽度为父容器宽度 */
  box-sizing: border-box;
}

如果代码块外层还有自定义容器，也可以给外层容器加宽度限制：

.code-block-wrapper {
  width: 100%;
  padding: 0 1rem; /* 可选，避免代码块贴紧页面边缘 */
}

方案2：让长代码自动换行（适合非格式化要求高的场景） #

如果不需要严格保留代码行完整性，可让长代码自动换行：

pre.hljs {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
}

注意：这种方式会拆分长代码行，可能影响URL、长变量名等内容的可读性。

额外检查项 #

• 确保代码块的父容器没有设置overflow: hidden或固定窄宽度，否则会导致滚动条无法正常显示
• 若使用自定义代码块容器类，将上述CSS中的pre.hljs替换为你的容器类名即可

内容的提问来源于stack exchange，提问作者رضا کشوری