Html代码段的html代码块？

Question

这一定是最令人沮丧的事情了，哈哈。

我使用prettify.js来赋予代码语法颜色，但是当我使用prettify.js或prism.js编码html时，我必须像下面这样在.&lt之前加上一个句点，否则我的语法会被#标签搞乱。

<pre class="prettyprint">.&lt;div class=&quot;modal modal--medium modal--middle&quot;&gt;
    &lt;div class=&quot;center-module&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;email&quot;&gt;
        &lt;button class=&quot;button button--primary&quot;&gt;send&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

上面显示了一个句号

.<div class="modal modal--medium modal--middle">
    <div class="center-module">
        <input type="text" placeholder="email">
        <button class="button button--primary">send</button>
    </div>
</div>

在&lt之前不带句点

#<DIV class="modal modal--medium modal--middle"#>
    #<DIV class="center-module"#>
        #<INPUT type="text" placeholder="email"#>
        #<BUTTON class="button button--primary"#>send#</BUTTON>
    #</DIV#>
#</DIV#>

我的问题是，prettify.js是如何/为什么用.tag <span class="tag">&lt;div</span>包装<div的？为什么我需要在<div前添加一些字符才能使它工作？你知道它为什么要这么做吗？

仅供参考，<div之前的任何字符都可以很好地显示块，但是当&lr;div被<pre></pre>标签包装时，如果没有字符，它将显示一个带有#标签的块。

Answer 1

您可能想看一下HTML5 code tag

<code>
  <DIV class="modal modal--medium modal--middle">
    <DIV class="center-module">
      <INPUT type="text" placeholder="email">
      <BUTTON class="button button--primary">send</BUTTON>
    </DIV>
  </DIV>
</code>