Comment afficher la balise <div> littéralement dans la balise <code>/<pre> ?

Question

J'utilise <code> à l'intérieur d'une balise <pre> pour afficher le code sur mon blog blogger. Malheureusement, cela ne fonctionne pas avec les balises HTML. Existe-t-il un moyen d'afficher " <div> "à l'intérieur de <pre> o <code> sans l'interpréter comme du HTML ? C'est ce que je fais actuellement :

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

Ce qui fonctionne bien pour tout sauf pour HTML. Une idée sur la manière d'y parvenir ? Je vous remercie.

Answer 1

Cela peut être facilement réalisé avec un peu de javascript.

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

Exécutez l'extrait ci-dessous pour le voir à l'œuvre :

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

pre {
  padding: 1rem;
  background-color: #eee;
  border-radius: 0.25rem;
}

<pre>
  <code>
   .class {        
     color:red;
   }

   // I would like HTML code inside this
   <h1>Hello this is a heading</h1>
  </code>
</pre>

Answer 2

Essayez CodeMirror ( https://codemirror.net/ )

Il s'agit d'une bibliothèque légère qui permet de styliser le code en HTML. Voici une capture d'écran de ce à quoi je fais référence :

Cela a bien fonctionné pour nous !

Answer 3

Ce n'est pas la meilleure réponse, mais vous pouvez essayer de mettre un commentaire à l'intérieur de la balise comme ceci :

<pre>
    <code<!-->>
        ...
    <<!-->/<!-->code>
</pre>

Answer 4

<pre>
  <code><textarea>
    <div>Now you can write Tags inside pre tag!</div>
  </textarea><code>
 <pre>

Answer 5

Oui, avec une fonction xml d'échappement. Vous devrez cependant activer jQuery pour que cela fonctionne.

<pre>
  ${fn:escapeXml('
    <!-- all your code -->
  ')};
</pre>