使用<pre> 标签的一个常见应用就是用来表示计算机的源代码。
通常和<code>标签结合使用，获得更加精准的语义；
但是这里有一个坑：
一般 在编辑器中，我们写的html希望美观简洁，大多数会显示成下图
但是问题就出现在这里，由于<pre>标签会将其包括的内容都显示出来，包括空格和换行缩进等，所以这种情况会导致显示出<code>里的代码的时候会出现前面很多空格，如下图：
这里处理的办法是，将<pre>和<code>和要渲染的变量源代码放在同一行；这里就不会显示其中的过多空格；
原文：https://www.cnblogs.com/gushiyoyo/p/12875156.html