无法使用 highlight.js 以正确的顺序呈现 XML

Question

我正在尝试使用 highlight.js 突出显示 XML。

但我面临两个问题：

自闭元素呈现为非自闭标签，即上例中的 author 元素。
XML 编码属性也未呈现。

我已经尝试实现用 /> 替换“/>”的转义方法，但它没有以预期的方式工作。

示例：预期 XML

<?xml version="1.0"?>
<catalog>
  <book id="bk112">
     <author id="1"/>
     <title>Visual Studio 7: A Comprehensive Guide</title>         
  </book>
</catalog>

实际XML

  <catalog>
   <book id="bk112">
     <author id="1">
     <title>Visual Studio 7: A Comprehensive Guide</title>       
    </author>
   </book>
  </catalog>

有没有办法纠正这种行为。

Answer 1

在这种情况下，code 标记被解析为 HTML。为了避免你可以使用 textarea

(function() {
  var el = document.querySelector(".xml"),
    pre = document.querySelector("pre");

  pre.innerText = el.value;
  hljs.highlightBlock(pre);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/vs.min.css" rel="stylesheet"/>

<div hidden>
  <textarea class="xml">
    <?xml version="1.0"?>
    <catalog>
      <book id="bk112">
         <author id="1"/>
         <title>Visual Studio 7: A Comprehensive Guide</title>

      </book>
    </catalog>
  </textarea>
</div>

<pre></pre>

无法使用 highlight.js 以正确的顺序呈现 XML

Unable to render XML in correct order using highlight.js

javascript

html

underscore.js

highlightjs