从 whitespace: pre 元素中删除前导空格

Question

我想在我的博客中为代码片段使用自定义样式。我定义了以下样式：

 mystyle {
  background: #C3FFA5;
  border: solid 1px #19A347;
  color: #191919;
  display: block;
  font-family: monospace;
  font-size: 12px;
  margin: 8px;
  padding: 4px;
  white-space: pre;
}

我按如下方式使用它：

 <mystyle>
int main() {
    cout << "Hello World" << endl;
}
</mystyle>

这给出了以下输出。我已经在 Firefox 和 Google Chrome 上试过了。

我想删除块开头的额外行。显然，我知道换行符的来源，我可以使用 <mystyle>int main() { 代替。如果我使用 <pre> 而不是 <mystyle> ，没有额外的换行符，那么我的自定义样式也可以这样做吗？

原文由 Masked Man 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用类将样式添加到 <pre> 标记。例如（这里尽量保持简单）。

 <pre class="console">
    // Some code here to be styled.
</pre>

<pre class="some-other-style">
    // Some code here to be styled.
</pre>

然后你的 CSS 看起来像这样：

 pre.console {
    color: #fff;
    background-color: #000;
}
pre.some-other-style {
    color: #f00;
    background-color: #fff;
}

如果它不能满足您的要求，那么我会对您的问题感到困惑，请发表评论，我会删除答案。

原文由 naththedeveloper 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

查看 这个非常相似的问题的答案：

 .mystyle:first-line {
    line-height: 0px;
}

不过，可能需要现代浏览器。

原文由 jwd 发布，翻译遵循 CC BY-SA 3.0 许可协议