Jekyll Cayman主题下Rouge Monokai语法高亮Python代码异常如何解决

解决方案 #

1. 调整样式加载顺序与优先级 #

Cayman主题自带的默认高亮样式会覆盖你后续添加的Monokai样式，需按如下结构编写站点的assets/css/style.scss文件：

---
---
// 优先导入Cayman主题基础样式
@import "{{ site.theme }}";

// 重置基础高亮容器样式，匹配Monokai主题基础属性
.highlight {
  background: #272822 !important;
  color: #f8f8f2 !important;
  border-radius: 3px;
  padding: 16px;
  overflow-x: auto;
}

// 在此处粘贴Monokai语法高亮的SCSS全量内容，删除重复的.highlight容器基础属性避免冲突

// 兜底修复无语言标记代码块文字偏淡问题
.highlight pre code:not([class*="language-"]) {
  color: #f8f8f2 !important;
  opacity: 1 !important;
}

2. 修正_config.yml配置 #

补充全局高亮器声明，对齐Rouge渲染规则，配置修改为：

theme: jekyll-theme-cayman
title: pippim - Open-source
description: Free open-source software for the World. Free of Ads too!

# 明确指定markdown渲染器
markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    block:
      line_numbers: false # 按需调整是否显示行号
# 全局声明高亮器为Rouge
highlighter: rouge

3. 规范代码块标记 #

所有代码块需明确指定对应语言标识（Python代码块使用```python开头），未指定语言的代码块不会触发细分规则高亮，仅会应用上文中的兜底样式。

修改完成后重新构建站点即可生效，本地调试可执行bundle exec jekyll serve预览效果。

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