24

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

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>，没有额外的换行符，那么我的自定义样式也可以这样做吗？

4

10 回答 10

24

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

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

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

于 2015-08-08T19:39:59.057 回答
17

将 margin-top 调整为您设置的任何 line-height。

.text {
    margin-top: -1em;
    white-space: pre-line;
}

这也适用于 FF， :first-line hack 无法修复。

于 2016-06-16T02:30:31.093 回答
14

当我们使用white-space: pre-wrap时，当页面呈现时，它也会从您的 html 文件中占用空间。所以假设我们有： -

<div style="white-space:pre-wrap"> <!-- New Line -->
   <!-- 2 space --> This is my text
</div>

文本将以这种方式呈现：-

<leading line>     
<2 spaces >This is my text

因此，我们应该像这样的 HTML：-

<div style="white-space:pre-wrap">This is my text</div>
于 2018-01-10T09:07:21.180 回答
8

使用类将样式添加到<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;
}

如果它不符合您的要求，那么我对您的问题感到困惑，只需发表评论，我将删除答案。

于 2013-06-28T13:42:10.913 回答
4

这适用于只想从格式化输出的第一行中删除尾随空格的人

而不是像这样写代码

<pre> 
    This is my code  </pre>

像这样写

<pre>This is my code</pre>

或者如果您使用<div>如下所示的标签

<div style="white-space:pre-wrap"> 
    This is my code 
</div>

像这样写

<div style="white-space:pre-wrap">This is my code</div>
于 2020-05-24T15:06:26.953 回答
2

怎么样

<mystyle>into main() {
    // ...
}</mystyle>

前后没有空格...

于 2013-06-28T13:46:42.173 回答
2

代码格式是这里的核心，确保每一行都从该行的第一个字符开始：

<pre class="code">
int main() {
    cout << "Hello World" << endl;
}
</pre>

下面的 CSS 就足够了：

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

阅读这篇关于空白的文章，以及下面关于如何“对抗它”的文章。尽管上一篇文章讨论了内联元素之间的空格，但格式化解决方案与您的问题有关。

于 2013-06-28T13:43:10.783 回答
1

修好你的模板，伙计。这是最简单的方法：

<mystyle>int main() {
  cout << "Hello World" << endl;
}</mystyle>
于 2017-02-22T13:21:30.853 回答
0

这个解决方案在处理white-space: pre-line.

添加span内部空白元素。

<p class="whitespace-pre-line">
   <span>Your text goes here</span>
</p>
于 2022-01-11T05:09:29.950 回答
0

不是纯 CSS 解决方案，但对我有用：

<script>
  document.querySelectorAll('pre').forEach((e) => {
    e.innerHTML = e.innerHTML.trim();
  })
</script>
于 2021-02-17T15:37:46.700 回答