如何使用 w3codecolor 进行 html 语法高亮？答案

【问题标题】：How to use w3codecolor for html syntax highlighting?如何使用 w3codecolor 进行 html 语法高亮？
【发布时间】：2021-09-08 09:33:20
【问题描述】：

基于示例here 我正在尝试使用 w3codecolor 进行 html 语法突出显示。我添加了对https://www.w3schools.com/w3css/4/w3.css 和https://www.w3schools.com/lib/w3codecolor.js 的引用，然后调用w3CodeColor(); 函数

然而，它实际上不是显示 html，而是呈现 html 输出

请注意，我的 html 有我想按原样呈现的自定义元素。

DEMO

HTML

<div class="w3-panel w3-card w3-light-grey">
<h4>Example</h4>
<div class="w3-code htmlHigh notranslate">
    <file label="Please select a file." name="myimage" storage="{{bucket}}" validation="filetypes:.pdf|.txt|.xlsx maxfilesize:12345"></file>
    
    <dropdown label="Can you select a single state?" name="state">
        <option label="" value=""></option>
        <option label="Oklahoma" value="OK"></option>
        <option label="Texas" value="TX"></option>
        <option label="New York" value="NY"></option>
    </dropdown>
    
    <input id="firstname" name="firstname" />
</div>

更新 1
根据建议，我已经使用 jQuery 转义了 html，它似乎正在工作。但是它不保留制表符缩进。关于如何保持制表符缩进的任何建议？

//转义

 $(".w3-code").each(function (i, v) {       
        var $code = $(v);
        $code.text($code.html());
        w3CodeColor();
 });

DEMO

【问题讨论】：

标签： css syntax-highlighting w3.css

【解决方案1】：

添加pre 标签有帮助

DEMO

 <div class="w3-panel w3-card w3-light-grey">
    <h4>Example</h4>
    <pre>
      <div class="w3-code htmlHigh notranslate">
          <file label="Please select a file." name="myimage" storage="{{bucket}}" validation="filetypes:.pdf|.txt|.xlsx maxfilesize:12345"></file>
          <dropdown label="Can you select a single state?" name="state">
              <option label="" value=""></option>
              <option label="Oklahoma" value="OK"></option>
              <option label="Texas" value="TX"></option>
              <option label="New York" value="NY"></option>
          </dropdown>

          <input id="firstname" name="firstname" />
      </div>
    </pre>
</div>

 $(".w3-code").each(function (i, v) {       
        var $code = $(v);
        $code.text($code.html());
        w3CodeColor();
    });

【讨论】：

【解决方案2】：

您可以在 w3 的 online demo 中 see（找到 here）：

<div class="w3-panel w3-card w3-light-grey"> 
  <h4>HTML Example</h4>
  <div class="w3-code htmlHigh notranslate">
    &lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>
    &lt;title&gt;HTML Tutorial&lt;/title&gt;<br>
    &lt;body&gt;<br><br>
    &lt;h1&gt;This is a heading&lt;/h1&gt;<br>
    &lt;p&gt;This is a paragraph.&lt;/p&gt;<br><br>
    &lt;/body&gt;<br>
    &lt;/html&gt;
  </div>
</div>

您需要像 @Quentin 很好地解释的那样转义这些特殊字符。

【讨论】：

【解决方案3】：

这是一个语法高亮。

它只是一个语法高亮。

它不会挖掘您的 HTML 源代码并将您嵌入的 XML 转换为您的 XML 的 HTML 表示形式。

如果你想显示一个&amp; 字符，那么你需要转义它（&amp;）。 HTML 中的其他特殊字符也是如此。

一旦你编写了 HTML 来显示你想要的文本，那么语法高亮器就可以对其进行操作。

【讨论】：