如何使用Jekyll为Markdown中的代码片段指定行添加高亮效果

Jekyll 默认使用的 Rouge 代码高亮器原生支持指定行高亮能力，仅需两步即可实现你要的黄色高亮效果：

• 第一步：调整 highlight 标签配置
  在原有代码块的 highlight 标签后追加 mark_lines 参数，参数值填入需要高亮的行号即可：

  • 单一行高亮：填写对应行号，比如你要高亮第3行，写法为 mark_lines="3"
  • 连续多行高亮：用短横线连接首尾行号，比如高亮2到4行写为 mark_lines="2-4"
  • 不连续多行高亮：用英文逗号分隔不同行号/区间，比如高亮第1行和3到5行写为 mark_lines="1,3-5"

  你的示例代码修改后如下：

  {% highlight c# mark_lines="3" %}
  int x = 5;
  int y = 6;
  int sum = x + y;
  Console.WriteLine(sum);
  {% endhighlight %}
  

• 第二步：添加高亮行样式
  在你站点的全局CSS文件中添加对应样式，即可实现黄色高亮效果，示例样式如下：

  .highlight .marked {
    background-color: #fff9c1;
    /* 可选：添加左侧提示条增强辨识度 */
    border-left: 3px solid #ffd700;
  }
  

  如果样式不生效，你可以在本地构建站点后，检查代码块高亮行的实际类名，替换CSS选择器即可匹配主题样式。

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