Jekyll Cayman主题标题内代码块字体过小 如何适配各级标题字号

解决方法 #

你定位的问题根源是对的：font-size: 0.9rem 里的rem是根相对单位，不管code标签放在什么容器里，字号都固定相对于根HTML节点的字号计算，所以在字号更大的H1~H6标题里就会明显比同级普通文本小。

你可以通过自定义CSS覆盖原有规则实现需求，针对Jekyll Cayman主题的修改步骤如下：

1. 在你的站点根目录下创建assets/css/style.scss文件（如果已有该文件直接编辑即可），文件开头必须保留两行三横线的前置声明，再导入主题原有样式：

---
---

@import "jekyll-theme-cayman";

2. 在上述代码下方添加自定义样式规则，核心是用相对父元素字号的em单位替换固定的rem单位，同时保留正文行内代码的原有显示效果：

/* 覆盖全局code标签的固定字号设置 */
code {
  font-size: 1em;
}

/* 保留正文、列表、表格内的行内代码原有字号，符合常规阅读习惯 */
p code, li code, table code {
  font-size: 0.9rem;
}

/* 适配各级标题内的行内代码字号 */
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  /* 0.9em表示比同级标题普通文本小10%，需要完全同号就改成1em */
  font-size: 0.9em;
  /* 可选：适配大字号标题的内边距，避免圆角框显示不协调 */
  padding: 0.1em 0.3em;
}

修改后重新构建部署站点即可生效，标题内的行内代码会自动跟随对应级别的标题字号缩放，正文里的行内代码也会保持原来的显示效果。

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