web-dev-qa-db-fra.com

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

J'utilise la balise <code> à l'intérieur d'une balise <pre> pour afficher le code sur mon blog de blogueur. Malheureusement, cela ne fonctionne pas avec les balises HTML. Est-il possible d'afficher "<div>" à l'intérieur d'une balise <pre> ou <code> sans l'interpréter au format HTML? C'est ce que je fais en ce moment:

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

Ce qui fonctionne bien pour tout sauf le HTML. Une idée comment y parvenir? Merci.

htmlblogger
58
Loolooii

Malheureusement, cela ne fonctionne pas avec les balises HTML.

<code> signifie "Ceci est un code", <pre> signifie "un espace dans ce marquage est significatif". Ni l'un ni l'autre ne signifie "Le contenu de cet élément ne doit pas être traité comme du HTML", donc les deux fonctionnent parfaitement, même s'ils ne veulent pas dire ce que vous voulez qu'ils veulent dire.

Est-il possible d'afficher "<div>" à l'intérieur d'une balise <pre> ou <code> sans l'interpréter au format HTML? 

Si vous voulez rendre un caractère <, utilisez &lt;, avec &gt; pour > et &amp; pour &.

Vous ne pouvez pas (en HTML moderne) écrire un balisage et le faire interpréter comme du texte.

71
Quentin

Il semble qu'un textarea en lecture seule fasse à peu près ce que vous voulez.

<textarea readonly> <!-- html code --> </textarea>
39
Jason Wilkins

Vous pouvez utiliser l'élément "xmp". Le <xmp></xmp> est en HTML depuis le début et est supporté par tous les navigateurs. Même si cela ne devrait pas être utilisé, il est largement soutenu.

Tout ce qui est à l'intérieur de <xmp></xmp> est pris tel quel (aucune balise de balisage, ni référence de caractère n'y est reconnue) à l'exception, pour une raison apparente, de la balise de fin de l'élément lui-même.

Sinon, "xmp" est rendu comme "pre".

19
Roland

Essayer:

<xmp></xmp>

par exemple:

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

au revoir

10
Alberto Cerqueira

Juste échapper les balises HTML. Par exemple - 

Remplacez < par &lt;

Remplacez > par &gt;

Recherche complète ici

3
Vivek Kalyanarangan

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

C'est une bibliothèque légère qui code le code en HTML. Voici une capture d'écran de ce que je veux dire:

enter image description here

A bien fonctionné pour nous!

0
Collarbone

Utilisez ceci:

<pre>
   <?= htmlentities($script) ?>
</pre>
0
Lucien Albert