Jekyll Minima主题：区分单/三反引号代码样式的实现方法

当然有可行的办法！Minima默认用Rouge做代码高亮，咱们可以通过自定义CSS精准区分块级代码和行内代码，只给前者加上深色背景，完全不干扰后者的样式。下面是具体操作步骤：

1. 创建自定义样式文件（避免修改主题原文件） #

Minima推荐通过扩展样式来定制，不要直接改主题目录里的文件，这样后续主题更新不会丢失自定义内容：

• 在你的Jekyll站点根目录下，新建assets/css/style.scss（如果已经存在这个文件，直接用就行）
• 往文件里写入基础结构：

---
---

@import "minima";

/* 这里添加你的自定义样式 */

注意：开头的---是YAML前置声明，必须加上，不然Jekyll不会处理这个SCSS文件。@import "minima"会导入主题的默认样式，咱们的自定义代码会自动覆盖冲突的规则。

2. 编写CSS规则区分块级与行内代码 #

Minima中，三反引号的块级代码会被Rouge包裹在.highlight类的容器里，而行内代码（单反引号）就是单独的<code>标签，没有.highlight父元素。利用这个差异，我们可以精准设置样式：

在刚才的style.scss里添加以下代码：

/* 给块级代码添加深色背景及配套样式 */
.highlight pre {
  background-color: #2d2d2d; /* 深灰色，你可以换成#1e1e1e这类更暗的颜色 */
  color: #cccccc; /* 浅灰色文字，和深色背景适配 */
  padding: 1.2em; /* 增加内边距，让代码块更舒展 */
  border-radius: 6px; /* 圆角可选，提升美观度 */
  overflow-x: auto; /* 代码过长时显示横向滚动条 */
}

/* 确保行内代码保持默认样式（可选，防止被意外覆盖） */
code {
  background-color: inherit; /* 继承正文背景，保留Minima默认的浅灰行内代码样式 */
  color: #d63384; /* 这里可以保留或修改行内代码的文字颜色，和块级区分开 */
}

3. 确认Rouge配置（确保选择器生效） #

打开站点根目录的_config.yml，检查以下配置（如果没有就添加），确保Rouge生成的块级代码使用.highlight类：

markdown: kramdown
kramdown:
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    css_class: 'highlight'
    span:
      line_numbers: false

4. 测试效果 #

运行bundle exec jekyll serve启动本地服务，刷新页面后：

• 三反引号包裹的块级代码应该显示深色背景
• 单反引号的行内代码还是原来的样式（比如浅灰背景+彩色文字）

如果发现样式没生效，可以用浏览器的开发者工具（F12）查看块级代码的HTML结构，确认选择器是否匹配（比如有些Minima版本里块级代码是<pre class="highlight">，那把.highlight pre改成.highlight就行）。

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