如何在HTML的div中显示XML代码

Question

我是一个新手，我刚开始在大学学习HTML，CSS和XML（都柏林核心）。

我创建了两个窗口，这些窗口的顶部都有标签。我需要的是，单击选项卡时，窗口将显示var mousePos = [0,0]; $( document ).mousemove(function( event ) { mousePos[0] = event.pageX mousePos[1] = event.pageY }); $("#target").click(function(){ // Compare mouse coordinates and your items ones using offset, height and width if(mousePos[0] > $('#target2').offset.left){ // Do whatever you are willing to do } }); 文件的内容。我已经尝试过.xml和<pre>，但没有成功。您可以在中间看到XML内容。

<textarea>

我需要这样的东西：

您会看到，它只是带有行号的XML。

很抱歉，我对术语不准确，但是整个事情对我来说真的很新，我才刚刚开始理解基本知识。

Answer 1

如果我理解正确，那么您只想显示内容，而不是标签本身，这意味着您应该可以执行以下操作：

<pre lang="xml">
     <?xml version="1.0" encoding="UTF-8"?>
        <poem xmlns:dc="http://purl.org/dc/elements/1.1/">
            <dc:title>Giorno d'autunno</dc:title>
            <dc:creator>Rilke, Rainer Maria</dc:creator>
            <dc:date>1983</dc:date>
            <dc:subject>Rilke</dc:subject>
            <dc:subject>poesia tedesca</dc:subject>
            <dc:subject>simbolismo</dc:subject>
            <dc:subject>Dingeddicht</dc:subject>
            <dc:subject>soggettivismo</dc:subject>
            <dc:description>Poesia tratta dall'antologia "Poesie", Einaudi, 1983 Torino. Comprende le raccolte Libro delle immagini, Sonetti a Orfeo e Ultime poesie con due prose dai quaderni di Malte Laurids Brigge e versioni da H. Hesse e G. Trakl. Traduzione di Giaime Pintor.</dc:description>
            <dc:publisher>Giulio Einaudi Editore, 1983 Torino</dc:publisher>
            <dc:contributor n="1">Giaime Pintor</dc:contributor>
            <dc:contributor n="2">Carlo Teo Pedretti</dc:contributor>
            <dc:type>poem</dc:type>
            <dc:format>text/html</dc:format>
            <dc:identifier>SBN:CFI0656773 / ISBN:880617438X</dc:identifier>
            <dc:source>Poesie / Rainer Maria Rilke ; tradotte da Giaime Pintor con due prose dai quaderni di Malte Laurids Brigge e versioni di H. Hesse e G.Trakl. - 8. ed. - Torino : Einaudi, 1983. - 133 p. ; 19 cm. - (Collezione di poesia ; 32).</dc:source>
            <dc:language>it</dc:language>
            <dc:rights>Creative Commons "Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Internazionale"</dc:rights>
    	</poem>
    </pre>

要显示带有标签的标签，您可以执行以下操作：

<xmp>
  <?xml version="1.0" encoding="UTF-8"?>
  <poem xmlns:dc="http://purl.org/dc/elements/1.1/">
    <dc:title>Giorno d'autunno</dc:title>
    <dc:creator>Rilke, Rainer Maria</dc:creator>
    <dc:date>1983</dc:date>
    <dc:subject>Rilke</dc:subject>
    <dc:subject>poesia tedesca</dc:subject>
    <dc:subject>simbolismo</dc:subject>
    <dc:subject>Dingeddicht</dc:subject>
    <dc:subject>soggettivismo</dc:subject>
    <dc:description>Poesia tratta dall'antologia "Poesie", Einaudi, 1983 Torino. Comprende le raccolte Libro delle immagini, Sonetti a Orfeo e Ultime poesie con due prose dai quaderni di Malte Laurids Brigge e versioni da H. Hesse e G. Trakl. Traduzione di Giaime Pintor.</dc:description>
    <dc:publisher>Giulio Einaudi Editore, 1983 Torino</dc:publisher>
    <dc:contributor n="1">Giaime Pintor</dc:contributor>
    <dc:contributor n="2">Carlo Teo Pedretti</dc:contributor>
    <dc:type>poem</dc:type>
    <dc:format>text/html</dc:format>
    <dc:identifier>SBN:CFI0656773 / ISBN:880617438X</dc:identifier>
    <dc:source>Poesie / Rainer Maria Rilke ; tradotte da Giaime Pintor con due prose dai quaderni di Malte Laurids Brigge e versioni di H. Hesse e G.Trakl. - 8. ed. - Torino : Einaudi, 1983. - 133 p. ; 19 cm. - (Collezione di poesia ; 32).</dc:source>
    <dc:language>it</dc:language>
    <dc:rights>Creative Commons "Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Internazionale"</dc:rights>
  </poem>
</xmp>

如果要显示行号和代码突出显示，可以使用https://github.com/google/code-prettify

Answer 2

Ace是用JavaScript编写的开源（BSD许可证）可嵌入代码编辑器。它具有超过100种语言（包括XML）的语法突出显示。它也可以根据您的要求显示行号。它支持read-only mode，可用于显示XML而不允许对其进行编辑。