Hide / delete first line of new line / empty line of html code with <pre class = "prettyprint-override"> <code> tag

Question

I am working on a site that has code, and I would like to write:

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

But this creates an empty line at the beginning just like the output

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

I know that if I write like this, there will be no empty lines, but I like to write as shown above.

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

Please suggest me what to do, if possible, with CSS, to hide or delete the first line of a new line / empty line so that I can save a new line in my code without empty lines appearing at the beginning of all my sections of code.

Answer 1

The only way I can see this is:

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

, CSS pre:first-line { font-size:0; } - , ( - font-size: 0)

white-space fail

, white-space <pre> <code>, .

Answer 2

, . code .

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

:

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

pre .

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

:

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

pre, code

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

:

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

- . .

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

:

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

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