如何调整Quarto HTML/RevealJS文档的代码注释尺寸？

问题场景 #

用Quarto做RevealJS/HTML文档时，用了code annotation功能，但生成的带编号圆圈和注释文本尺寸太大。试过修改SCSS只缩小了注释文本，编号圆圈还是偏大：

.code-annotation-container-grid dd {
    font-size: 20px;
}

解决方法 #

简便配置方式 #

不用写大量自定义SCSS，直接在文档YAML头部加全局配置即可同时控制文本和圆圈尺寸：

format:
  revealjs:
    code-annotations:
      font-size: 0.8em
      marker-size: 0.7em

marker-size控制编号圆圈的大小，font-size控制注释文本大小，用em这类相对单位比固定像素更适配不同显示场景。

自定义SCSS精细调整 #

如果需要更细致的样式控制，要同时修改编号圆圈和注释文本的对应样式：

1. 调整编号圆圈的尺寸、字体和边框：

.code-annotation-marker {
    width: 1.2em;
    height: 1.2em;
    font-size: 0.8em;
    border-width: 2px;
}

2. 调整注释文本大小及与圆圈的间距：

.code-annotation-container-grid dd {
    font-size: 0.8em;
    margin-left: 1.5em; // 可选：微调文本和圆圈的距离
}

3. 可选：调整注释容器的整体间隙，避免布局拥挤：

.code-annotation-container-grid {
    gap: 0.5em;
}

把上述SCSS代码保存到项目的自定义样式文件（比如styles.scss），再在YAML中引用：

format:
  revealjs:
    css: styles.scss

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