我正在尝试使用Highlight.js突出显示XML。
这里是示例codepen link
但是我面临两个问题:
我已经尝试实现将/>替换为/>的转义方法,但是它无法按预期方式工作。
示例:期望的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>
是否有纠正此行为的方法。
在这种情况下,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>