如何调整blogdown Hugo默认主题中仅代码块的字号？

当然可以实现！要只调整blogdown里Hugo默认主题的代码块字体大小，核心思路是通过自定义CSS精准定位代码块元素，覆盖主题的默认样式。下面给你两种实用的方法，推荐第二种（不会因为主题更新丢失修改）：

方法一：直接修改主题的CSS文件（不推荐，主题更新会覆盖） #

如果你不担心后续主题更新会重置你的修改，可以直接找到主题的样式文件修改：

1. 打开你的blogdown项目，进入themes/[你的默认主题名]/static/css/目录（比如默认主题可能是hugo-theme-default，对应路径就是themes/hugo-theme-default/static/css/）
2. 找到主题的核心样式文件（通常是main.css或者style.css）
3. 在文件中搜索代码块对应的选择器，常见的有pre code、.highlight code或者.code-block code。你可以用浏览器的开发者工具（按F12）打开博客页面，选中代码块查看它的HTML结构，确认准确的选择器
4. 给这个选择器添加字体大小属性，比如：

pre code {
  font-size: 0.8em; /* 这里可以改成你想要的大小，比如12px或者0.75em */
}

方法二：用自定义CSS覆盖（推荐，安全不丢失） #

这种方法不会修改主题本身的文件，能避免主题更新导致修改丢失，步骤如下：

1. 在你的blogdown项目根目录下，创建static/css文件夹（如果已经存在就跳过）
2. 在static/css里新建一个custom.css文件，写入针对代码块的样式：

/* 精准定位代码块，覆盖默认字体大小 */
pre code {
  font-size: 0.8em !important; /* !important 确保优先级高于主题默认样式 */
}

/* 如果你不想修改行内代码（就是用`包裹的小段代码），就不要加下面这段 */
/* 要是连行内代码也想改，就取消注释 */
/* code {
  font-size: 0.8em;
} */

3. 让Hugo加载这个自定义CSS：
   • 很多Hugo主题支持在配置文件里指定自定义CSS，打开config.toml，添加：

     [params]
       customCSS = ["css/custom.css"]
     

   • 如果你的主题不支持这个参数，就手动修改主题的头部模板：进入layouts/partials/head.html，在<head>标签里添加一行：

     <link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">
     

小技巧：确认准确的选择器 #

如果不确定代码块的选择器，打开你的博客页面，找到代码块后右键选择「检查」，在开发者工具的Elements面板里看代码块的HTML结构。比如常见的结构是：

<div class="highlight">
  <pre>
    <code>你的代码内容</code>
  </pre>
</div>

那你就可以用.highlight pre code作为选择器，这样样式会更精准，不会影响其他元素。

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