syntaxhighlighter - syntaxhighlighter 如何改变评论的颜色

Question

我是使用语法荧光笔的新手。我在那里使用最新版本 3.0.83。有人可以帮助如何自定义评论、标题等的颜色吗？

我正在使用 <pre class="brush: c"> 作为编码风格。

Answer 1

最简单的解决方案是覆盖评论的 CSS 规则，但它们被标记为，!important因此您必须做一些额外的工作。

打开你的shBrushCpp.js文件。向下有一组与css属性配对的正则表达式规则。这些值对应于shThemeDefault.css（或您正在使用的任何主题）中的类名。

将您的主题文件复制到类似shThemeCustom.css或任何您想要的东西。在您的页面上包含此文件而不是原始主题。从这里，你可以改变任何你想要的。只需根据您的自定义主题参考画笔文件中的 CSS 规则即可了解需要更改的内容。

Answer 2

如果您无法完全控制 .css 或 .js 文件，就像我的情况一样（因为我在此处遵循这些说明并使用Alex Gorbatchev 的托管文件），仍然有一种方法可以覆盖!important参数。

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

使用默认主题，此 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>

现在，我已将 my 设置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 。