Code formatting indents in HTML are appearing in the document - html

Question

Here is the HTML code that I copy and pasted from Anki (Flashcard creation program). The code works fine. (Background: the flashcard is a programming question)
<meta content="width=window-width, initial-scale=1.0" name="viewport">
What does this code do?<div><div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"=""><pre style="line-height: 25px;"><table class="highlighttable" style="font-family: Arial;"><tbody><tr><td><div 10px"="" class="linenodiv" padding-right:=""><pre style="line-height: 125%">1</pre></div></td><td class="code"><div class="highlight"><pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #7D9029">http-equiv</span><span style="color: #666666">=</span><span style="color: #BA2121">"X-UA-Compatible"</span> <span style="color: #7D9029">content</span><span style="color: #666666">=</span><span style="color: #BA2121">"IE=edge"</span>></pre></div></td></tr></tbody></table></pre></div><div><center><br></center></div></div>
The code rendered on the browser:
Obviously, this code is not readable in its current format. To fix this, I added the appropriate indentations.
<meta content="width=window-width, initial-scale=1.0" name="viewport">
What does this code do?
<div>
<div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"="">
<pre style="line-height: 25px;">
<table class="highlighttable" style="font-family: Arial;">
<tbody>
<tr>
<td>
<div 10px"="" class="linenodiv" padding-right:="">
<pre style="line-height: 125%">1</pre>
</div>
</td>
<td class="code">
<div class="highlight">
<pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span> <
span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>>
</pre>
</div>
</td>
</tr>
</tbody>
</table>
</pre>
</div>
<div>
<center>
<br>
</center>
</div>
</div>
The strange part: the indents above are now appearing in the HTML document.
This shouldn't be happening, correct? I thought newlines in the HTML are not visible to users?

Answer 1

That's because the whitespace is pre (preserved by the browser). This is intended so that you can indent code. Usually, when you want to render code in HTML you take off the indentation:
<td class="code">
<div class="highlight">
<pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span>
<span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>>
</pre>
</div>
</td>
Notice that you don't need to do it on the <pre> line itself (and that is why the meta part shows with your desired indentation).
If you are going to be using code snippets frequently, a library such as Prismjs will make your life much easier and be worth the overhead (it's a very lightweight library in fact):
<pre><code class="language-html">(... html code ...)</code></pre>