如何配置GitHub Pages语法高亮使其与GitHub平台保持一致

要实现和GitHub平台完全一致的语法高亮效果，核心是对齐GitHub Pages的渲染引擎和样式规则，具体步骤如下：

1. 确认Jekyll使用Rouge高亮器 #

GitHub Pages默认用Jekyll构建，而GitHub平台的语法高亮基于Rouge实现。确保你的站点根目录下的_config.yml配置了正确的高亮器：

highlighter: rouge
markdown: kramdown
kramdown:
  syntax_highlighter: rouge

如果你的站点是默认创建的，这部分配置大概率已经存在，只需确认即可。

2. 生成并引入GitHub风格的高亮样式 #

Rouge可以直接生成和GitHub一致的语法高亮CSS：

• 本地安装Ruby和Rouge（未安装的话执行gem install rouge）
• 在站点根目录运行命令：rougify style github > assets/css/syntax.css
• 在页面模板（比如_layouts/default.html）的<head>区域添加样式引入：

<link rel="stylesheet" href="{{ '/assets/css/syntax.css' | relative_url }}">

这个CSS文件会完全匹配GitHub的高亮配色、代码块背景、关键字颜色、注释样式等规则。

3. 规范Markdown代码块格式 #

写Markdown内容时，给代码块指定明确的语言标识，比如：

def calculate_sum(a, b):
    return a + b

准确的语言标识能让Rouge正确识别语法，生成和GitHub平台一致的高亮效果。避免使用无标识的代码块，否则可能无法触发精准高亮。

4. 本地预览验证 #

用bundle exec jekyll serve启动本地服务，对比GitHub仓库中代码的高亮效果。如果存在差异，检查：

• CSS文件是否正确引入
• 代码块的语言标识是否准确
• _config.yml的高亮配置是否生效

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