如何在 HTML 页面上打印带有颜色语法高亮显示的 HTML 代码？

Question

我正在尝试将我的代码片段转换为带有语法突出显示的漂亮打印的 HTML 格式。

            <xmp ng-non-bindable>
                <ul>
                    <li ng-repeat="list in lists" class="input">
                        {{list}}
                    </li>
                </ul>
            </xmp>

---

结果

---

我想打印出这样的东西

---

实现这样的目标的最佳日子是哪一天？

有人可以指导我走向正确的方向吗？

Answer 1

我建议使用highlightjs，因为它支持大量语言并带有许多颜色主题。 特别是对于 HTML 代码，您需要转义 HTML 标签。 有许多在线工具可以帮助您实现这一目标。

这是使用 highlighjs 的快速演示：

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/darkula.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <pre><code class="hljs html"> &lt;ul&gt; &lt;li ng-repeat=&quot;list in lists&quot; class=&quot;input&quot;&gt; {{list}} &lt;/li&gt; &lt;/ul&gt; </code></pre>

Answer 2

要打印您的 HTML 标签，您需要手动将 < 替换为< 和 > 与&lgt;

所以如果你的代码是这样，那么你可以打印标签。

  &lt;xmp ng-non-bindable&gt;<br />
                &lt;ul&gt;<br />
                    &lt;li ng-repeat=&quot;list in lists&quot; class=&quot;input&quot;&gt;<br />
                        {{list}}<br />
                    &lt;/li&gt;<br />
                &lt;/ul&gt;<br />
            &lt;/xmp&gt;

更好的方法是使用以下内容并尝试使用此语法荧光笔链接

Answer 3

您可以使用函数以编程方式转义 html 内容。

function escapeHTML(htmlStr) {
  return htmlStr.split("<").join("&lt;").split(">").join("&gt;");
}

您也可以将代码片段的内容存储在一个文件中，获取它并使用 JS 以编程方式注入它：

// fetch the file to get its content as string
fetch("full/path/to/file")
  .then(response => response.text()) // process response
  .then(text => {
    // escape HTML
    const escapedHTML = escapeHTML(text);
    
    // get target DOM element (code element)
    // and inject snippet content
    const snippetEl = document.querySelector("#mySnippet")
    snippetEl.innerHTML = escapedHTML;
    
    // reapply highlighting
    hljs.highlightBlock(snippetEl);
  })