Afficher le code HTML en HTML

Existe-t-il un moyen d'Afficher des extraits de code HTML sur une page Web sans avoir à remplacer chaque < par &lt; et > par &gt; ?

en d'autres termes, y a-t-il une balise pour qui ne rend pas HTML tant que vous n'avez pas cliqué sur la balise de fermeture ?

149
demandé sur Steven 2010-05-12 19:48:19

23 réponses

en HTML propre, il n'y a aucun moyen de fuir les caractères. Cependant, dans correctement déclaré XHTML (qui est XML, et doit être déclaré au navigateur comme tel; en particulier, il n'est pas suffisant de simplement mettre dans un DOCTYPE ), vous pouvez utiliser une section CDATA:

<![CDATA[Your <code> here]]>

mais cela ne fonctionne qu'en XML, pas en HTML.

EN HTML, la seule solution garantie pour travailler partout est d'échapper au code ( < et & comme &lt; et &amp; , respectivement) manuellement.

58
répondu Konrad Rudolph 2015-11-11 09:21:59

La méthode éprouvée pour HTML:

  1. remplacer le caractère & par &amp;
  2. remplacer < par &lt;
  3. remplacer > par &gt;
  4. entourez optionnellement votre échantillon HTML des étiquettes <pre> et/ou <code> .
134
répondu Dolph 2010-05-12 15:58:55

meilleure façon:

<xmp>
// your codes ..
</xmp>

anciens échantillons:

échantillon 1 :

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

échantillon 2 :

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

échantillon 3 : (Si vous "citez" un bloc de code, alors le markup serait)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

nice échantillon CSS:

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

la coloration syntaxique de code (Pour les pro):

arcs-en-ciel (très parfait)

embellir

syntaxhighlighter

highlight

JSHighlighter


les meilleurs liens pour vous:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project /

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css /

http://alexgorbatchev.com/SyntaxHighlighter /

https://code.google.com/p/jquery-chili-js /

comment mettre en évidence le code source en HTML?

117
répondu Erfan Safarpoor 2017-05-23 12:18:23

sorte d'une méthode naïve pour afficher le code sera l'inclure dans un attribut textarea et ajouter désactivé de sorte que son pas modifiable.

<textarea disabled> code </textarea>

espère que quelqu'un qui cherche un moyen facile pour obtenir des choses faites..

33
répondu Krunal 2017-06-16 20:12:41

déprécié , mais fonctionne en FF3 et IE8.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

recommandé:

<pre><code>
    code here, escape it yourself.
</code></pre>
24
répondu s_hewitt 2014-03-04 12:47:23

j'ai utilisé <xmp> comme ceci : http://jsfiddle.net/barnameha/hF985/1 /

14
répondu barnameha 2013-11-11 10:57:02

en HTML? Aucun.

in XML / XHTML? Vous pourriez utiliser un bloc CDATA .

7
répondu cletus 2010-05-12 15:50:27

la balise <xmp> dépréciée fait essentiellement cela mais ne fait plus partie de la spécification XHTML. Il devrait toujours fonctionner bien que dans tous les navigateurs actuels.

Voici une autre idée, un truc de hack / salon, vous pourriez mettre le code dans un textarea comme ça:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

placer des crochets d'angle et du code comme celui-ci à l'intérieur d'une zone de texte est HTML invalide et causera un comportement non défini dans différents navigateurs. Dans Internet Explorer le HTML est interprété, tandis que Mozilla, Chrome et Safari le laissent indifférent.

si vous voulez qu'il ne soit pas modifiable et qu'il ait l'air différent, alors vous pouvez facilement le styliser en utilisant CSS. Le seul problème serait que les navigateurs ajouteront cette petite poignée de traînée dans le coin inférieur droit pour redimensionner la boîte. Ou alternativement, essayez d'utiliser une étiquette d'entrée à la place.

la bonne façon d'injecter du code dans votre textarea est d'utiliser le langage côté serveur comme ce PHP par exemple:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

puis il contourne l'interpréteur html et met le texte non interprété dans le textarea uniformément dans tous les navigateurs.

en dehors de cela, le seul moyen est vraiment d'échapper au code vous-même si vous utilisez du HTML statique ou des méthodes côté serveur comme HtmlEncode() de .NET si vous utilisez une telle technologie.

5
répondu GShenanigan 2014-04-11 01:30:55

c'est très simple .... Utilisez ce code xmp

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>
4
répondu Kamlesh 2014-08-23 11:12:18

le lien suivant sera utile.

http://www.freebits.co.uk/convert-html-code-to-text.html

il est très facile et simple.

4
répondu Praful Rajput 2016-07-19 13:23:31

en fin de compte, la meilleure réponse (quoique ennuyeuse) est "escape the text".

il y a cependant beaucoup d'éditeurs de texte-ou même de mini utilitaires autonomes-qui peuvent le faire automatiquement. Donc vous ne devriez jamais avoir à l'échapper manuellement si vous ne voulez pas (à moins que ce soit un mélange de code échappé et non-échappé...)

Quick Google search me montre celui-ci, par exemple: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

3
répondu Stephen R 2010-05-12 16:19:28

je suppose:

  • vous voulez écrire à 100% HTML5 valide
  • vous voulez placer l'extrait de code (presque) littéral dans le HTML
    • surtout < ne devrait pas avoir besoin d'échapper

toutes vos options sont dans cet arbre:

  • avec la syntaxe HTML
    • il y a cinq sortes de les éléments
    • ceux appelés " éléments normaux "(comme <p> )
      • ne peut pas avoir un littéral <
      • il serait considéré comme le début de la prochaine balise ou un commentaire
    • éléments de vide
      • ils n'ont pas de contenu
      • vous pouvez mettre votre HTML dans un attribut de données (mais c'est vrai pour tous les éléments)
      • qui aurait besoin de JavaScript pour déplacer les données ailleurs
      • en double attribut, " et &thing; doivent s'échapper: &quot; et &amp;thing; respectivement
    • éléments de texte bruts
      • <script> et <style> seulement
      • ils ne sont jamais rendus visibles
      • mais l'intégration de votre texte dans Javascript pourrait être faisable
      • Javascript permet de multi-ligne de chaînes de caractères avec des backticks
      • il pourrait alors être inséré dynamiquement
      • littérale </script n'est pas autorisé partout en <script>
    • éléments de texte bruts escapables
      • <textarea> et <title> seulement
      • <textarea> est un bon candidat pour l'envelopper de code dans la section
      • il est tout à fait légal d'y écrire </html> 1519240920"
      • n'est pas légale est la sous-chaîne </textarea pour des raisons évidentes
        • échapper à ce cas particulier avec &lt;/textarea ou similaire
      • &thing; needs escapade: &amp;thing;
    • éléments étrangers
      • éléments de MathML et SVG espaces de noms
      • au moins SVG permet l'intégration de HTML à nouveau...
      • et CDATA est autorisé là, il semble donc avoir un potentiel
  • avec la syntaxe XML

Note: > n'a jamais besoin d'échapper. Même pas dans normal éléments.

3
répondu Robert Siemer 2017-05-23 12:10:43

vous pouvez utiliser un langage côté serveur comme PHP pour insérer du texte brut:

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

puis supprimer la valeur de $str htmlencoded:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>
2
répondu kta 2014-04-11 01:37:55

Il y a un peu de moyens pour échapper à tout en HTML, aucun d'entre eux nice.

ou vous pouvez mettre un iframe qui charge un vieux fichier texte.

1
répondu BCS 2017-05-23 12:10:43

C'est de loin la meilleure méthode pour la plupart des situations:

<pre><code>
    code here, escape it yourself.
</code></pre>

j'aurais jusqu'voté la première personne qui l'a suggéré, mais je n'ai pas de réputation. Je me suis senti obligé de dire quelque chose pour le bien des gens qui essayaient de trouver des réponses sur Internet.

1
répondu xdaxdb 2013-10-24 05:11:08

C'est comme ça que je l'ai fait:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
1
répondu techiegirl 2014-03-15 14:47:28
function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

il retournera le Html échappé

1
répondu Govind Singh 2014-07-08 11:51:15

si votre but est de montrer un morceau de code que vous exécutez ailleurs sur la même page, vous pouvez utiliser textContent (c'est pur-js et bien supporté: http://caniuse.com/#feat=textcontent )

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

pour obtenir le formatage multi-lignes dans le résultat, vous devez définir le style css" white-space: pre; "sur la div cible, et écrire les lignes individuellement en utilisant" \r\n " à la fin de chacun.

Voici une démo: https://jsfiddle.net/wphps3od /

cette méthode présente un avantage par rapport à l'utilisation de textarea: le Code ne sera pas reformaté comme dans une textarea. (Les choses comme &nbsp; sont supprimés entièrement dans une textarea)

1
répondu Timothy Kanski 2017-01-12 16:19:03
<textarea ><?php echo htmlentities($page_html); ?></textarea>

me va très bien..

"en gardant à l'esprit Alexander's suggestion, ici, c'est pourquoi je pense que c'est une bonne approche"

si nous essayons simplement <textarea> cela ne fonctionne pas toujours car il peut y avoir fermeture textarea tags qui peuvent fermer à tort la balise parent et afficher le reste de la source HTML sur le document parent, ce qui aurait l'air maladroit.

utilisant htmlentities convertit toutes les valeurs applicables des caractères tels que < > aux entités HTML ce qui élimine toute possibilité de fuites.

il y a peut-être des avantages ou des lacunes à cette approche ou une meilleure façon d'obtenir les mêmes résultats, si c'est le cas, veuillez commenter car j'aimerais apprendre d'eux:)

1
répondu Anupam 2018-01-11 01:11:40

il se peut que cela ne fonctionne pas dans toutes les situations, mais placer des extraits de code à l'intérieur d'un textarea les affichera sous forme de code.

vous pouvez style la textarea avec CSS si vous ne voulez pas qu'il ressemble à une textarea réelle.

0
répondu Drew Thomas 2014-10-23 20:00:41

Vous pouvez essayer:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>
0
répondu Brendan 2018-06-16 16:11:03
 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)
-1
répondu Preetika 2015-01-06 09:56:27

en enveloppant votre code dans un contenteditable div et le réglage de l'indentation white-space: pre-wrap; est préservé, le code enveloppe en conséquence à la largeur et la hauteur est fixée automatiquement:

<div class="code" contenteditable>
  // code
</div>


.code {
  white-space: pre-wrap;
}
-2
répondu inBlackAndWhite 2018-02-06 16:22:46