Github Pages（JekyllNow分支）语法高亮对比度不足求助

你遇到的问题根源在于：Github预览使用自身的代码高亮样式，而Jekyll Now默认的highlight类对应的CSS与Github风格不匹配，导致配色对比度下降。可以通过以下两种方式解决：

方法一：配置Rouge使用Github主题 #

编辑站点根目录的_config.yml，在kramdown的syntax_highlighter_opts中添加主题指定配置：

# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
  # Use GitHub flavored markdown, including triple backtick fenced code blocks
  input: GFM
  # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    # Use existing pygments syntax highlighting css
    css_class: 'highlight'
    # 指定使用GitHub风格的高亮主题
    theme: github

修改后提交代码，Github Pages部署完成后，Rouge会生成与预览一致的高对比度配色。

方法二：替换代码高亮CSS样式 #

如果方法一未生效，直接修改站点的CSS文件（通常是css/main.css），替换.highlight相关样式为Github风格：

.highlight {
  background-color: #f6f8fa;
  border-radius: 3px;
  padding: 16px;
  overflow-x: auto;
}
.highlight code {
  background: transparent;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
}
/* 关键字样式 */
.highlight .k { color: #d73a49; }
/* 字符串样式 */
.highlight .s { color: #032f62; }
/* 内置函数样式 */
.highlight .nb { color: #005cc5; }
/* 变量/属性样式 */
.highlight .na { color: #6f42c1; }
/* 注释样式 */
.highlight .c1 { color: #6a737d; font-style: italic; }

保存后提交代码，部署完成即可看到与预览一致的高亮效果。

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