web-dev-qa-db-fra.com

Afficher le code HTML en HTML

Est-il possible d'afficher des extraits de code HTML sur une page Web sans avoir à remplacer chaque < par &lt; et > par &gt;?

En d'autres termes, existe-t-il une balise pour ne rend pas le code HTML tant que vous n'avez pas appuyé sur la balise de fermeture ?

htmltags
164
Steven

Non, il n'y en a pas. En HTML proprement dit, il n’ya aucun moyen d’échapper à certains caractères:

  • & comme &amp;
  • < comme &lt;

(Incidemment, il n'est pas nécessaire d'échapper à > mais les gens le font souvent pour des raisons de symétrie.)

Et bien sûr, vous devriez entourer le code HTML échappé résultant dans <pre><code>…</code></pre> pour (a) préserver les espaces et les sauts de ligne, et (b) le marquer comme un élément de code.

Toutes les autres solutions, telles que l'intégration de votre code dans un <textarea> ou l'élément (obsolète) <xmp>, rompront.1

XHTML déclaré au navigateur en tant que XML (via l'en-tête HTTP Content-Type! - le simple fait de définir une variable DOCTYPE est pas assez] peut également utiliser une section CDATA:

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

Mais cela ne fonctionne qu’en XML, pas en HTML, et même cette solution n’est pas infaillible, car le code ne doit pas contenir le délimiteur de fermeture ]]>. Ainsi, même en XML, la solution la plus simple et la plus robuste consiste à s’échapper.

1 Exemple:

textarea {border: none; width: 100%;}
<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

66
Konrad Rudolph

La méthode éprouvée pour HTML:

  1. Remplacez le caractère & par &amp;
  2. Remplacez le caractère < par &lt;
  3. Remplacez le caractère > par &gt;
  4. Entourez éventuellement votre exemple HTML avec <pre> et/ou <code> tags.
141
Dolph

meilleur moyen:

<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, le balisage serait alors)

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

Code de mise en évidence de la syntaxe (pour les professionnels):

rainbows(très parfait) 

prettify

syntaxhighlighter

surligner

JSHighlighter

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?

133
Erfan Safarpoor

Une méthode naïve d’affichage du code consiste à l’inclure dans une zone de texte et à ajouter un attribut désactivé afin qu’elle ne soit pas modifiable.

<textarea disabled> code </textarea>

J'espère que cela aidera quelqu'un à la recherche d'un moyen simple d'obtenir des résultats.

40
Krunal

Déconseillé , mais fonctionne en FF3 et IE8.

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

Conseillé:

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

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

14
barnameha

En HTML? Non.

En XML/XHTML? Vous pouvez utiliser un bloc CDATA.

6
cletus

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>
5
Kamlesh

Je suppose: 

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

Toutes vos options sont dans cet arbre:

  • avec la syntaxe HTML
    • il y a cinq types d'é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 balise ou du commentaire suivant
    • éléments vides
      • ils n'ont pas de contenu
      • vous pouvez mettre votre code HTML dans un attribut de données (mais ceci est vrai pour tous les éléments)
      • cela aurait besoin de JavaScript pour déplacer les données ailleurs
      • dans les attributs entre guillemets, " et &thing; doivent être échappés: &quot; et &amp;thing; respectivement
    • éléments de texte brut
      • <script> et <style> seulement
      • ils ne sont jamais rendus visibles
      • mais incorporer votre texte en Javascript pourrait être faisable
      • Javascript permet les chaînes multi-lignes avec des backticks
      • il pourrait alors être inséré dynamiquement
      • un </script littéral n'est autorisé dans aucun endroit dans <script>
    • éléments de texte brut échappables
      • <textarea> et <title> seulement
      • <textarea> est un bon candidat pour insérer du code dans
      • il est totalement légal d'écrire </html> dedans
      • non légal est la sous-chaîne </textarea pour des raisons évidentes
        • échapper à ce cas spécial avec &lt;/textarea ou similaire
      • &thing; doit être échappé: &amp;thing;
    • éléments étrangers
      • éléments des espaces de noms MathML et SVG
      • au moins, SVG autorise à nouveau l'intégration de HTML ...
      • et CDATA y est autorisé, il semble donc avoir un potentiel
  • avec syntaxe XML

Remarque: > n'a jamais besoin d'être échappé. Pas même dans les éléments normaux.

5
Robert Siemer

La balise obsolète <xmp> le fait essentiellement, mais ne fait plus partie de la spécification XHTML. Cela devrait quand même fonctionner dans tous les navigateurs actuels.

Voici une autre idée, une astuce de hack/parlor, vous pouvez mettre le code dans une zone de texte comme ceci:

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

Mettre des crochets et un code comme celui-ci dans une zone de texte est un code HTML invalide et entraînera un comportement indéfini dans différents navigateurs. Dans Internet Explorer, le code HTML est interprété, alors que Mozilla, Chrome et Safari le laissent non interprété.

Si vous voulez qu'il soit non éditable et différent, vous pouvez facilement le styler à l'aide de CSS. Le seul problème serait que les navigateurs ajouteront cette petite poignée de glisser dans le coin inférieur droit pour redimensionner la boîte. Ou bien, essayez plutôt d'utiliser une balise input.

La bonne façon d’injecter du code dans votre zone de texte consiste à utiliser un langage côté serveur tel que PHP par exemple:

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

Ensuite, il contourne l’interpréteur html et place le texte non interprété dans la zone de texte de manière cohérente, quel que soit le navigateur.

En dehors de cela, le seul moyen consiste à échapper vous-même au code si vous utilisez du code HTML statique ou utilisez des méthodes côté serveur telles que HtmlEncode () de .NET si vous utilisez une telle technologie.

5
GShenanigan

En fin de compte, la meilleure réponse (bien que gênante) est "échapper au texte".

Cependant, de nombreux éditeurs de texte, voire des mini-utilitaires autonomes, peuvent le faire automatiquement. Donc vous ne devriez jamais avoir à y échapper manuellement si vous ne voulez pas (sauf si c'est un mélange de code échappé et non échappé ...)

Une recherche rapide sur Google me montre celle-ci, par exemple: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

3
Stephen R

Ceci est une astuce simple et je l'ai essayé dans Safari et Firefox

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

Il va montrer comme ça:

 enter image description here

Vous pouvez le voir en direct Ici

3
Ramtin
<textarea ><?php echo htmlentities($page_html); ?></textarea>

fonctionne bien pour moi ..

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

si nous essayons simplement de plier <textarea>, cela risque de ne pas toujours fonctionner car il peut y avoir des balises textarea fermantes qui risquent de fermer à tort la balise parent et d'afficher le reste de la source HTML sur le document parent, ce qui pourrait paraître gênant.

l'utilisation de htmlentities convertit tous les caractères applicables, tels que < >, en entités HTML, ce qui élimine toute possibilité de fuite.

Il peut y avoir des avantages ou des inconvénients à cette approche ou une meilleure façon d’obtenir les mêmes résultats. Si tel est le cas, veuillez commenter car j’aimerais apprendre d’eux :)

2
Anupam

Si votre objectif 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 une mise en forme multiligne dans le résultat, vous devez définir le style css "white-space: pre;" sur le div cible et écrivez les lignes individuellement en utilisant "\ r\n" à la fin de chacune. 

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

Cette méthode présente un avantage sur l'utilisation de textarea: le code ne sera pas reformaté comme dans une textarea. (Des choses comme &nbsp; sont entièrement supprimées dans une zone de texte)

2
Timothy Kanski

Vous pouvez utiliser un langage côté serveur tel que 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 extrayez la valeur de $str htmlencoded:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>
2
kta

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

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

J'aurais 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 dans l'intérêt des gens qui essayaient de trouver des réponses sur Internet.

1
xdaxdb
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
Govind Singh

Il existe quelques moyens pour échapper à tout en HTML, aucun d’entre eux n’est agréable.

Ou vous pouvez mettre une variable iframe qui charge un ancien fichier texte brut.

1
BCS

Voici comment 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
techiegirl
<textarea readonly> code </textarea>

OR

<textarea disabled> code </textarea>

Utilisez le premier attribut 'readonly' si vous souhaitez sélectionner et copier la chaîne dans la zone de texte.

Utilisez le second si vous n'êtes pas intéressé par la sélection ou la copie des données. c'est-à-dire si vous vous souciez seulement d'afficher des informations.

0
Micklo_Nerd

Tu pourrais essayer:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

0
Brendan

Cela peut ne pas fonctionner dans toutes les situations, mais le fait de placer des extraits de code dans une textarea les affichera sous forme de code.

Vous pouvez styler la zone de texte avec CSS si vous ne voulez pas qu'elle ressemble à une zone de texte réelle.

0
Drew Thomas