没问题，要让Prism生成的代码框宽度刚好匹配内部文本的实际宽度（而不是默认占满容器），你只需要添加几行自定义CSS来覆盖Prism的默认样式即可，具体方法如下：

• 添加自定义CSS样式
  在你的页面中加入以下CSS代码（可以放在<style>标签里，或者外部样式文件中，注意要确保这段代码在Prism的prism.css之后加载，这样才能覆盖默认样式）：

  /* 调整Prism代码块宽度以贴合内容 */
  pre[class*="language-"] {
      display: inline-block; /* 让元素宽度由内容决定 */
      white-space: pre; /* 保留代码原有的换行格式 */
      margin: 1em 0; /* 保留上下间距，避免和其他内容拥挤 */
      min-width: unset; /* 取消Prism默认的最小宽度设置 */
  }
  

• 样式说明

  • display: inline-block：这是核心设置，它会让代码块不再强制占满父容器宽度，而是根据内部代码的最长行自动调整宽度。
  • white-space: pre：确保代码里的换行、空格都能正常显示，不会被浏览器合并或强制换行。
  • 如果你的代码有超长行需要自动换行，可以把white-space改成pre-wrap，同时添加word-break: break-all来处理长单词的换行逻辑。

这样修改后，你的代码块就会呈现出和你期望效果一致的宽度啦！

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