1

Tengo lo siguiente dentro de html.

<code>
<catalog>
    <cd>
        <title>Empire Burlesque</title>
        <artist>Bob Dylan</artist>
        <country>USA</country>
        <country>Columbia</country>
        <price>10.90</price>
        <year>1985</year>
    </cd>
</catalog>

El problema es que cuando se visualiza en el navegador se muestra de la siguiente forma:

Empire 
Burlesque 
Bob Dylan 
USA 
Columbia 
10.90 
1985
2
  • con < pre > no te sirve?
    – Alex
    el 2 jun. 2017 a las 12:00
  • Probé eso, pero no funcionaba, lo puse antes de <code>
    – FrEqDe
    el 3 jun. 2017 a las 17:25

1 respuesta 1

3

Puedes hacer uso de la etiqueta xmp (elemento de ejemplo) la cual hace que el código dentro de ellas no sea intepretado por el navegador, y lo muestra con un tipo de fuente monoespaciada

<xmp>
  <catalog>
      <cd>
          <title>Empire Burlesque</title>
          <artist>Bob Dylan</artist>
          <country>USA</country>
          <country>Columbia</country>
          <price>10.90</price>
          <year>1985</year>
      </cd>
  </catalog>
</xmp>

Como dijo Mariano, la etiqueta xmp está obsoleta, por lo cual hice este simple script que quizá te pueda ayudar, (claramente se puede mejorar)

$(document).ready(function(){

  $('#parseHTML').click(function(){
  
    const pre = '&lt;';
    const post = '&gt;';
    
    var preHTML = $('#htmlArea').val();
    var postHTML = preHTML.replace(/</g, pre).replace(/>/g, post);
    
    $('#result').html(postHTML);
  
  });

})
textarea {
  width: 100%;
  height: 120px;
}

button{
  width: 100%;
}

div{
  width: 100%;
  height: 120px;
  border: 1px solid black;
  margin-top: 5px;
  font-family: monospace;
  padding: 5px 0px 0px 5px;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="htmlArea" placeholder="Ingrese su código HTML"></textarea>
<button id="parseHTML">Mostrar código HTML</button>
<div id="result">RESULTADO</div>

1
  • El mismo enlace que estás incluyendo de MDN dice que está obsoleto.
    – Mariano
    el 2 jun. 2017 a las 3:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.