Quarto HTML输出全局代码换行配置及截断宽度设置方法

一、全局设置代码块自动换行 #

要为所有代码块统一开启code-overflow: wrap，无需逐个配置，有两种实现方式：

1. 项目级全局生效（所有文档适用） #

在项目根目录的_quarto.yml文件中添加如下配置：

format:
  html:
    code-blocks:
      overflow: wrap

保存后，整个项目下的所有Quarto文档生成HTML时，代码块都会自动换行。

2. 单文档全局生效（仅当前文档适用） #

在单个Quarto文档开头的YAML元数据块中加入对应配置：

---
title: "示例文档"
format:
  html:
    code-blocks:
      overflow: wrap
---

二、自定义代码换行的截断宽度 #

Quarto原生的code-overflow配置没有直接提供截断宽度参数，但可以通过自定义CSS实现指定宽度换行：

方法1：嵌入自定义CSS到文档 #

在文档的YAML元数据中添加include-in-header，直接嵌入CSS规则：

---
title: "示例文档"
format:
  html:
    code-blocks:
      overflow: wrap
    include-in-header:
      text: |
        <style>
        /* 指定代码块最大宽度为80字符，超出则换行 */
        .sourceCode {
          max-width: 80ch;
          overflow-wrap: break-word;
        }
        </style>
---

其中80ch表示80个字符宽度，可根据需求调整数值。

方法2：使用外部CSS文件 #

1. 在项目中创建custom.css文件，写入以下内容：

.sourceCode {
  max-width: 80ch;
  overflow-wrap: break-word;
}

2. 在_quarto.yml（项目级）或文档YAML（单文档）中引用该CSS：

format:
  html:
    code-blocks:
      overflow: wrap
    css: custom.css

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