Jekyll带行号围栏代码块配置及代码块CSS样式修改问题

一、行号与代码错位问题 #

不管用{% highlight python linenos %}还是kramdown的line_numbers: true，核心问题是行号和代码块的布局未对齐，直接添加以下CSS规则修复：

/* 行号容器样式 */
.highlight .linenos {
  float: left;
  width: 3em;
  padding: 0.5em 0.8em;
  border-right: 1px solid #ddd;
  text-align: right;
  color: #999;
  user-select: none; /* 禁止选中行号 */
}

/* 代码内容容器样式 */
.highlight .code {
  margin-left: 3.8em;
  padding: 0.5em;
}

如果用kramdown原生生成行号，HTML结构可能是.lineno标签，调整选择器为：

.highlight .lineno {
  display: inline-block;
  width: 2.5em;
  margin-right: 0.8em;
  border-right: 1px solid #ddd;
  text-align: right;
  color: #999;
  user-select: none;
}

二、Monokai样式部分生效、被覆盖问题 #

1. 调整样式加载顺序：确保你的monokai-sublime.scss在主题默认样式之后加载。比如在项目的主CSS文件（如assets/css/main.scss）末尾添加：

@import "monokai-sublime";

2. 提高选择器特异性：如果主题样式优先级更高，给Monokai的选择器加上父容器前缀，比如你的文章内容容器是.post-content，就把样式改成：

.post-content .highlight {
  /* 你的Monokai容器样式 */
}
.post-content .highlight .c { color: #999; } /* 注释样式 */
/* 其他语法高亮规则同理 */

三、找不到指定文件的问题 #

1. _includes/head.liquid：不同Jekyll主题的头部文件命名可能不同，直接去_includes目录下找类似的文件，比如head.html、_head.html，找到后把样式导入的代码添加到这个文件的<head>标签内即可。
2. assets/css/jekyll-pygments-themes-github.css：这个文件不是Jekyll默认自带的，大概率是教程里提到的第三方主题样式，你不需要纠结这个文件——直接用rougify生成的Monokai样式即可，把生成的scss文件放到assets/css目录，然后在主样式文件导入就行。

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