syntaxhighlighter如何更改注释的颜色

Question

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

我正在使用＆lt; pre class =“brush：c”＆gt;编码风格。

Answer 1

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

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

将您的主题文件复制到shThemeCustom.css或任何您想要的内容。在您的网页上包含此文件而不是原始主题。从这里，你可以改变你想要的任何东西。只需根据自定义主题引用刷子文件中的CSS规则，即可知道需要更改的内容。

Answer 2

如果你没有完全控制.css或.js文件，就像我的情况一样（因为我跟着these instructions here并且正在使用Alex Gorbatchev's hosted files instead），仍然有{{3 }}

您可以自定义此处显示的任何设置（a way to override the !important parameter），例如，如下所示：

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

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

http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css

请注意，我设置的font-weight参数只是您可以应用的CSS样式。存在许多其他选择。见这里：。

~Gabriel Staples
http://www.w3schools.com/cssref/pr_font_weight.asp