Hide/Remove html 代码段的第一个 newline/blank-line 使用 <pre><code> 标签

Question

我在一个有一些代码的网站上工作，我想写：

<pre><code>
line 1
line 2
</code></pre>

但这会在开头产生一个空行作为输出

[A Blank line in here that I don't want]    
line 1
line 2

我知道这样写就没有空行了，但是我喜欢这样写

<pre><code>line 1
line 2
</code></pre>

请告诉我我该怎么做，如果可能的话，使用 CSS 来隐藏或删除第一个 newline/blank-line，这样我就可以在我的代码中保留换行符而不会出现空行我所有代码部分的开头。

Answer 1

This is how the code related tags behave. The code tag is inline.

<code>
    var Name = "My Name";
    alert(Name);
</code>

输出：

var Name = "My Name"; alert(Name);

The pre tag does not show the first empty line.

<pre>
    var Name = "My Name";
    alert(Name);
</pre>

输出：

    var Name = "My Name";
    alert(Name);

The pre tag along with code tag always shows the first line

<pre><code>
    var Name = "My Name";
    alert(Name);
</code></pre>

输出：

[A blank line appears here]    
    var Name = "My Name";
    alert(Name);

Smart way of getting the blank line out of your way is to fill the first line with a default or useful comment. then you start writing your code from the next line. :

<pre><code>// Javascript Code
    var Name = "My Name";
    alert(Name);
</code></pre>

输出：

// Javascript Code
    var Name = "My Name";
    alert(Name);

Or

<pre><code>// Javascript to display your name
    var Name = "My Name";
    alert(Name);
</code></pre>

输出：

// Javascript to display your name
    var Name = "My Name";
    alert(Name);

Answer 2

我认为可行的唯一方法是：

只使用一点 JavaScript:

const code = document.querySelectorAll("pre code");
[...code].forEach(el => el.textContent = el.textContent.replace(/^\n/,''));

pre {border: 1px solid #ddd;}

<pre><code>
1 line
2 line

4 line
</code></pre>

<pre><code>1 line
2 line

4 line
</code></pre>

<pre><code>

2 line. (Keep intentional newline above)

4 line
</code></pre>

CSS

另一种非常不好的方法是只使用CSSpre:first-line { font-size:0; }——但这真的很糟糕，因为它迫使你总是离开最-第一行为空（否则由于font-size: 0，这样的文本不会出现在屏幕上）

white-space失败

任何其他方式，比如在 <pre> 和 <code> 标签上使用 white-space 组合，都不会得到任何想要的东西。