如何在 Jekyll 博客中更改代码片段背景答案

【问题标题】：How to change code snippet background in Jekyll blog如何在 Jekyll 博客中更改代码片段背景
【发布时间】：2018-08-08 15:29:46
【问题描述】：

我想将我的代码 sn-ps 的背景从黑色更改为更亮的颜色（如浅灰色）。我已经尝试了来自 previous SO question 的建议，该建议建议更改 _sass 文件夹中的 _base.scss。从我的_base.scss 中可以看到，代码sn-p 背景已经指定为#eef，颜色较浅。但是，我的博客不服从这种颜色。

/**
 * Code formatting
 */
pre,
code {
    font-size: 15px;
    border: 1px solid $grey-color-light;
    border-radius: 3px;
    background-color: #eef;
}

然后我查看了位于同一个 _sass 文件中的另一个名为 _variables.scss 的文件。该文件中包含的代码是这样的：

// Inline code block font color
$codeblock-font-color: #8cc4d8;

// Inline code block background color
$codeblock-background-color: #333333;

看起来这是将我的代码 sn-p 背景从黑暗 (#333333) 更改为其他更轻的东西的地方，例如 #F5F5F5 (HTML White Smoke) 但是，当我再次尝试时，博客没有服从。

在 Markdown 文件中编写代码时，我使用了三个反引号。任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： html jekyll

【解决方案1】：

答案：我在我的 css/main.css 语法中覆盖了多个 CSS - 我删除了多余的

div.content .highlight {
    background: #333333;

位于我的 css/main.css 中，现在可以在背景之后更改字段中的背景颜色：

div.content pre {
  background: #F5F5F5;
  padding: 10px;
  color: #FFF;
  overflow-x: auto;
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 12px;
  border: none;
}

【讨论】：