javascript - 更改 SyntaxHighlighter 的背景颜色

Question

我正在使用 SyntaxHighlighter在 my website (使用 Google Blogger)与 default theme ，以及这段 HTML 代码...

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

...产生此输出(参见 temporarily-created webpage sample here ):

但是，我想将背景色(如上面的屏幕截图所示)设为灰色而不是白色。

现在，我对自定义网页设计和像这样自定义 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 文件，就像我的情况一样(因为我遵循了 these instructions here 并且正在使用 Alex Gorbatchev's hosted files instead )，仍然有 a way to override the !important parameters并自定义您的颜色和设置。

您可以自定义此处显示的任何设置 ( 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 像素(做一个很长的代码块，你会看到它现在被限制在这个高度，用一个垂直 slider 来看到它)，我的标题背景颜色是红色(#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 how to change the color of comment
2. 就像我说的，也在我的网站上:http://www.electricrcaircraftguy.com/2016/10/syntaxhighlighter.html