更改 SyntaxHighlighter 的背景颜色

Question

我在我的网站（使用 Google Blogger）上使用SyntaxHighlighter和默认主题，这个 HTML 代码......

<pre class="brush:cpp" >
int myFunc()
{
  //do something
  return 1;
}
</pre>

...产生此输出（请参阅此处临时创建的网页示例）：

但是，我想让背景颜色（如上面的屏幕截图所示）为灰色而不是白色。

现在，我对自定义网页设计和自定义 SyntaxHighlighter 实现只知道一点，但在我看来，在这里查看此链接（ https://github.com/syntaxhighlighter/theme-base/blob/master/theme- base.scss ）我应该能够以某种方式将“背景”变量从默认设置的“白色”更改为灰色（例如：#e5e5e5），使用如下代码：

<style type='text/css'>
  .SOMETHING_HERE {
    background: #e5e5e5 !important;}
</style>

或者可能是这样的（虽然也不起作用）：

<style type='text/css'>
  .syntaxhighlighter {
    max-height: 550px;
    background-color: #e5e5e5 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    table {
      td.code {
        .container {
          textarea {
            background: #e5e5e5 !important;
          }
        }
      }
    }}
</style>

我在正确的轨道上吗？ 这可能吗？ 我该怎么做？

Answer 1

如果您不能完全控制 .css 或 .js 文件，就像我的情况一样（因为我在这里遵循了这些说明并使用了Alex Gorbatchev 的托管文件），仍然有一种方法可以覆盖!important参数并自定义您的颜色和设置。

您可以自定义此处显示的任何设置 ( http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css )，例如，如下所示。

注意：我也在我的网站上写过如何做到这一点，在这里： http : //www.electricrcaircraftguy.com/2016/10/syntaxhighlighter.html 。

使用默认主题，这个 HTML...

<pre class="brush:cpp" title="test code">
int myFunc()
{
  //do something
  return 1;
}
</pre>

...产生这个结果：

看这里（ http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css ），我可以看到我当前使用的参数。 例如，它包含：

.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
...
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #008200 !important;
}

按照从上到下的顺序，如上图所示，我的标题背景颜色为白色，交替的第 1 行和第 2 行代码均为白色。 评论是绿色的 ( #008200 )。 让我们改变这一切。 将以下代码添加到您的博客模板，在标题的最后，就在</head>上方：

<style type='text/css'>
  .syntaxhighlighter {
    max-height: 550px;
    background-color: #ff0000 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }
  .syntaxhighlighter .line.alt1 {
    background-color: #99ff99 !important;
  }
  .syntaxhighlighter .line.alt2 {
    background-color: #99ff99 !important;
  }
  .syntaxhighlighter .comments, .syntaxhighlighter .comments a {
    color: #000082 !important;
    font-weight: bold !important;
  }
</style>

现在，我将max-height设置为 550 像素（制作一个非常长的代码块，您现在会看到它被限制在这个高度，使用垂直滑块可以看到所有内容），我的标题背景颜色是红色（ #ff0000 )，我的代码背景颜色（两条交替线）是浅绿色（ #99ff99 ），我的评论是蓝色（ #000082 ）和粗体。 按照这种格式自定义您在 .css 主题文件中看到的任何内容——例如，对我来说，这里是： http : //agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css 。

这是我的最终结果——与上面的默认外观非常不同：

请注意，我设置的font-weight参数只是您可以应用的 CSS 样式。 存在许多其他选择。 请参阅此处： http : //www.w3schools.com/cssref/pr_font_weight.asp 。

也贴在这里：

1. 【我的回答】 syntaxhighlighter 如何改变注释的颜色
2. 就像我说的，也在我的网站上： http : //www.electricrcaircraftguy.com/2016/10/syntaxhighlighter.html