html片段的html代码块？答案

【问题标题】：Html code block for html snippet?html片段的html代码块？
【发布时间】：2025-12-01 19:45:02
【问题描述】：

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

我使用 prettify.js 给代码语法颜色，但是当我编码 html 时使用 prettify.js 或 prism.js，我必须像下面这样在.&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#>

我的问题是 &lt;div 如何/为什么被 prettify.js 用 .tag <span class="tag">&lt;div</span> 包裹？为什么我需要在 &lt;div 之前添加一些字符才能使其工作？任何想法为什么这样做？

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

【问题讨论】：

问题到底是什么？ : ) 我认为它类似于 “当我对 html 进行编码时，我必须在 .&lt 之前使用句点来编写它，否则我的语法会被 # 标签弄乱。我如何在没有&lt 之前的句号，并保持它没有 # 标签？"
我假设问题是你为什么需要这个时期。这个fiddle 似乎表明你不需要它。您的代码还有更多可以提供给我们的吗？
是的，对不起，我应该这么说。好吧，我的错误，但这很烦人。让我试着解释一下我的环境，我有 prettify.js 脚本，我已经对 html 进行了编码并将其设置在 pre 标记中。就这么简单，但我得到了这些哈希值，所以是的，我的问题是为什么我必须在乞求编码的 html sn-p 之前有一个character？
@drs9222 我将 fiddle 直接复制到 sublime 中，没有任何空格，但仍然得到相同的结果，这是 <span class="tag">&lt;div</span> prettify.js 将 &lt;div 包装在 .tag 中。

标签： javascript html prettify google-code-prettify

【解决方案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>

【讨论】：