如何为PrismJS代码框设置固定宽高并添加滚动条？

直接通过CSS控制代码块的尺寸和滚动行为即可，针对你的HTML结构，给.post-content下的<pre>标签添加以下样式：

.post-content pre {
  /* 自定义最大高度，按需调整数值 */
  max-height: 400px;
  /* 水平/垂直方向内容超出时自动显示滚动条 */
  overflow-x: auto;
  overflow-y: auto;
  /* 可选：优化视觉样式，不影响布局 */
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

关键属性说明 #

• max-height: 限制代码块的最大高度，内容超过这个高度时，垂直方向自动出现滚动条
• overflow-x: auto: 当代码行过长超出容器宽度时，水平方向显示滚动条，避免撑破布局
• width: 100%: 让代码块自适应父容器.post-content的宽度，不会超出容器范围

如果PrismJS自带的样式优先级更高，可改用更精准的选择器：

.post-content pre[class*="language-"] {
  max-height: 400px;
  overflow-x: auto;
  overflow-y: auto;
}

内容的提问来源于stack exchange，提问作者Gamer-XyZ