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和谷歌Chrome。

Output

我想删除块开头的额外行。显然，我理解换行符的来源，并且我可以使用<mystyle>int main() {代替。如果我使用<pre>代替<mystyle>，则没有额外的换行符，那么是否可以使用我的自定义样式执行此操作？

Answer 1

查看Bolt documentation：

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

可能需要现代浏览器。

Answer 2

将margin-top调整为您设置的任何行高。

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

这也适用于FF，其中：一线黑客无法解决。

Answer 3

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

如果它没有做你想做的事情，那么我对你的问题感到困惑，只是评论，我会删除答案。

Answer 4

当我们使用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>

Answer 5

这是为您想要仅从格式化输出的第一行中删除尾随空格的

而不是像这样编写代码

<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>

Answer 6

代码格式化至关重要，请确保每一行从该行的第一个字符开始：

<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;
}

在this article on whitespace上阅读how to 'fight it'和以下内容。虽然上一篇文章讨论了内联元素之间的空白，但格式化解决方案与您的问题有关。

Answer 7

怎么样

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

在......之前或之后没有空格

Answer 8

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

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

Answer 9

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

<script>
  document.querySelectorAll('pre').forEach((e) => {
    e.innerHTML = e.innerHTML.trim();
  })
</script>

从空格中删除前导空格：pre元素

9 个答案: