How to display XML code in a div in HTML

Question

I'm a total newcomer, and I've just started learning HTML, CSS and XML (Dublin Core) at university.

I've created two windows with tabs on top. What I need is that, when a tab is clicked, the window shows the content of .xml file. I've already tried with <pre> and <textarea> without success. You can see the XML content in the middle.

<div class="row">
  <div class="column">

    <!-- Tab links -->
    <div class="tab">
      <button class="tablinks" onclick="openDoc(event, 'Text')" id="defaultOpen">Testo</button>
      <button class="tablinks" onclick="openDoc(event, 'XML')">XML-DC</button>
      <button class="tablinks" onclick="openDoc(event, 'Download')">Download</button>
    </div>

    <!-- Tab content -->
    <div id="Text" class="tabcontent">
      <h3>Giorno d'autunno</h3>
      <p>Signore: è tempo. Grande era l’arsura.<br> Deponi l’ombra sulle meridiane,<br> libera il vento sopra la pianura.<br></p>

      <p>Fa’ che sia colmo ancora il frutto estremo;<br> concedi ancora un giorno di tepore,<br> che il frutto giunga a maturare, e spremi<br> nel grave vino l’ultimo sapore.<br></p>

      <p>Chi non ha casa adesso, non l’avrà.<br> Chi è solo a lungo solo dovrà stare,<br> leggere nelle veglie, e lunghi fogli<br> scrivere, e incerto sulle vie tornare<br> dove nell’aria fluttuano le foglie.<br></p>
    </div>

    <div id="XML" class="tabcontent">
      <textarea style="border: none;" rows="30" cols="120">
      	<?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>
    
      </textarea>
    </div>

    <div id="Download" class="tabcontent">
      <h3>Download</h3>
      <p>blablabla.</p>
    </div>

  </div>
  <div class="column">

    <!-- Tab links -->
    <div class="tab">
      <button class="collegamentitab" onclick="openProva(event, 'Lettura')" id="apriDefault">Commento</button>
      <button class="collegamentitab" onclick="openProva(event, 'Analisi')">Analisi</button>

    </div>
    <!-- Tab content -->
    <div id="Lettura" class="contenutotab">
      <h3>Commento</h3>
      <p>blablabla.</p>
    </div>
    <div id="Analisi" class="contenutotab">
      <h3>Analisi</h3>
      <p>blablabla.</p>
    </div>
  </div>
</div>

I need something like this:

Tab that show .xml content

As you can see it's just the XML with line numbers.

I'm sorry if I've been inaccurate with terms, but the whole thing is really new for me and I'm just starting to understand basic things.

Sorry, you're right! I've forgotten to end the title. My bad! — friendlynihilist
– friendlynihilist, Commented Jul 15, 2018 at 14:11
Your question title pasted into Google verbatim led to that duplicate in no time btw. — C3roe
– C3roe, Commented Jul 15, 2018 at 15:09

link · Accepted Answer · 2018-07-15 14:56:25Z

1

If I understand correctly you just want to show the content, not the tags themselves, which mean you should be able to do something like this:

<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>

to show with tags you can do the following:

<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>

If you want to display with line numbers and code highlighting you could use https://github.com/google/code-prettify

edited Jul 15, 2018 at 14:56

link

2,4173 gold badges24 silver badges36 bronze badges

answered Jul 15, 2018 at 14:12

Dee

873 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

friendlynihilist Over a year ago

No, I think it's the opposite: I need to show the tags. This is why I didn't use '<pre>'. I have to do it in the way that is in the link I've sent in the original post.

friendlynihilist Over a year ago

Is it possible to set width and height with <xmp>? because it stretches out the window where it has to be displayed. Thank you.

friendlynihilist Over a year ago

And how colours and lines can be shown, like the example in link in op?

mzjn Over a year ago

This answer was accepted, but I don't see how it provides anything that is remotely similar to, say, eighteenthcenturypoetry.org/works/o3499-w0010.shtml#xml (see image in question).

kjhughes Over a year ago

HTML5 standard lists xmp as a non-conforming feature. It is generally considered to be obsolete and should be avoided.

|

kjhughes · Accepted Answer · 2018-07-15 14:56:55Z

0

Ace is an open source (BSD license) embeddable code editor written in JavaScript. It has syntax highlighting for over 100 languages, including XML. It can display line numbers per your requirements as well. It supports read-only mode that you can use to display your XML without allowing it to be edited.

edited Jul 15, 2018 at 14:56

answered Jul 15, 2018 at 14:12

kjhughes

113k31 gold badges198 silver badges276 bronze badges

2 Comments

friendlynihilist Over a year ago

That's nice. I'll try to use it. Any other methods that you know?

kjhughes Over a year ago

As long as it's not too heavy of a solution for your requirements, it's the best looking, most robust, and most powerful method I've found. It's also rather easy to implement.

Collectives™ on Stack Overflow

How to display XML code in a div in HTML

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related