如何调整Quarto RevealJS幻灯片中引用标记的字号与位置

要调整正文中脚注引用标记（如[^1]）的字号与位置，直接针对渲染后的HTML元素编写CSS即可，具体方法如下：

1. 定位目标元素 #

Quarto会把正文里的脚注引用标记渲染为带footnote-ref类的<sup>标签，结构大致如下：

<sup class="footnote-ref">
  <a href="#fn1" id="fnref1">[1]</a>
</sup>

2. 编写自定义CSS #

在你的Quarto文档中添加以下样式（可放在文档开头的style块，或外部CSS文件中）：

/* 调整脚注引用标记的字号、垂直对齐和间距 */
.footnote-ref {
  font-size: 0.7em; /* 自定义字号，比如设为正文的70% */
  vertical-align: super; /* 保持上标对齐，可改为top/middle等调整位置 */
  margin-left: 0.1em; /* 增加与前面文本的间距 */
  margin-right: 0.1em; /* 增加与后面文本的间距 */
}

/* 可选：调整引用标记里的链接样式 */
.footnote-ref a {
  text-decoration: none; /* 去掉下划线 */
  color: #2c3e50; /* 自定义颜色 */
}

3. 在Quarto文档中引入CSS #

方式一：内部样式块 #

直接在文档开头添加：

---
title: "你的幻灯片标题"
format: revealjs
---

<style>
.footnote-ref {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 0.1em;
  margin-right: 0.1em;
}

.footnote-ref a {
  text-decoration: none;
}
</style>

## 幻灯片内容
这里是正文内容[^1]

[^1]: 这是脚注内容

方式二：外部CSS文件 #

在YAML头中指定CSS文件路径：

---
title: "你的幻灯片标题"
format: 
  revealjs:
    css: custom.css
---

然后把上述CSS代码写入custom.css文件即可。

这样就能精准控制正文里脚注引用标记的字号、垂直位置和间距，与你已设置的右下角脚注样式匹配。

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