如何在 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);
  })