关于 HTML 标签 
 遇到的问题
在编写 Angular 插件过程中，遇到了一个问题。将转换后的 HTML 标签填充到 <pre> 标签内进行标识代码片段时，在首行地方出现了预料之外的缩进，代码块大致和【代码块一】相似，页面如【图一】所示。


[代码块一]：示例代码
1
2
3
4
<pre>
  <code><span>import a from 'b';</span><span>
</span><span>import a from 'b';</span></code>
</pre>


图一


为了简化问题，编写了【代码块二】所示代码块，但是如【图二】所示，却并没有出现缩进问题。


[代码块二]：直接使用 pre 标签
1
2
3
4
<pre>
  <code>import {{ '{' }} HttpClientInMemoryWebApiModule {{ '}' }} from 'angular-in-memory-web-api';</code>
  <code>import {{ '{' }} HttpClientInMemoryWebApiModule {{ '}' }} from 'angular-in-memory-web-api';</code>
</pre>


图二


那么问题的原因是在哪里呢？参考 MDN 上关于<pre> 标签的描述[01]，<pre> 标签会将文本中的空白符（比如空格和换行符）显示出来(紧跟在 <pre> 开始标签后的换行符会被省略)。按照这个规则， <pre> 标签中的会保留除了紧接着 <pre> 标签的换行符外的所有空白符，那么重新审视【代码块一】，其实是由于 <code> 标签前存在两个空格，而 <code> 标签内的代码是由脚本生成的，连续的代码串，所以就会出现了缩进。


参考引用