angular8 使用pre标签显示源代码

使用<pre> 标签的一个常见应用就是用来表示计算机的源代码。

通常和<code>标签结合使用，获得更加精准的语义；

但是这里有一个坑：

一般 在编辑器中，我们写的html希望美观简洁，大多数会显示成下图

 

 

 

 

但是问题就出现在这里，由于<pre>标签会将其包括的内容都显示出来，包括空格和换行缩进等，所以这种情况会导致显示出<code>里的代码的时候会出现前面很多空格，如下图：

 

 

 

这里处理的办法是，将<pre>和<code>和要渲染的变量源代码放在同一行；这里就不会显示其中的过多空格；