Hide/Remove first newline/blank-line of html code-section using tag

Question

I'm working on a website that has some code and I would like to write:

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

But that produces an empty line at the beginning like this as output

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

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

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

Please suggest me what can I do, with CSS if possible, to hide or remove the first newline/blank-line so that I can keep the newline in my code without blank-lines appearing at the beginning of all my code sections.

Answer 1

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

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

Output:

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

The pre tag does not show the first empty line.

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

Output:

    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>

Output:

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

Output:

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

Or

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

Output:

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

Answer 2

The only way I see it doable is:

Using just a bit of 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

Another, just really bad way is to use only CSS pre:first-line { font-size:0; } -- but that's really bad since it forces you to always leave the very-first line empty (otherwise such text will not appear on screen due to font-size: 0)

white-space fail

Any other way like playing with white-space combinations on the <pre> and <code> tags will not get anything as desired.