Afficher des extraits HTML en HTML


208

Comment puis-je afficher des extraits HTML sur une page Web sans avoir à les remplacer <par &lt;et >avec &gt;?

En d'autres termes, existe-t-il une balise pour ne pas restituer le HTML jusqu'à ce que vous appuyiez sur la balise de fermeture ?

Réponses:


95

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

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

(Soit dit en passant, il n'est pas nécessaire de s'échapper, >mais les gens le font souvent pour des raisons de symétrie.)

Et bien sûr, vous devez entourer le code HTML échappé résultant <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'encapsulation de votre code dans un <textarea>ou l' <xmp>élément (obsolète) , seront rompues . 1

XHTML qui est déclaré dans le navigateur comme XML (via HTTP en- Content-Typetête - la mise simple! DOCTYPEEst pas assez ) pourrait également utiliser une section CDATA:

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

Mais cela ne fonctionne qu'en XML, pas en HTML, et même ce n'est pas une solution à toute épreuve, 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 concret:


Agréable. Cela fait donc partie de la norme HTML? Ou est-ce plus profond, comme une partie du standard xml?
aioobe

7
En HTML, cela rendra `ici]]>`
Dolph

3
Oui, c'est une bonne réponse, mais n'oubliez pas de remplacer >par &gt;
Alan

2
@Alan Je le ferais aussi, mais ce n'est pas vraiment nécessaire : seulement <et &doit être remplacé, non échappé >est valide dans HTML.
Konrad Rudolph

1
@SamWatkins Mais votre solution n'est pas plus simple que la mienne . Vous venez de changer ce qui doit être échappé, et votre solution est hacky, comme vous l'admettez. Il n'y a littéralement aucun avantage à le faire correctement. Il s'agit d'un problème résolu avec une solution correcte. Pas besoin de hacks, sauf si toute votre configuration est hacky.
Konrad Rudolph

161

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 des <code>balises.

17
Astuce: Pour accélérer le remplacement du code HTML, vous pouvez utiliser Notepad ++ avec l'extension 'TextFX'. Marquez le texte, allez dans le menu> TextFX> TextFX Convert> Encode HTML (& <> ") → Terminé.
Kai Noack

2
Y a-t-il une bibliothèque JavaScript existante qui peut le faire, par hasard?
Anderson Green

9
Cela ne répond pas à la question qui disait "sans avoir besoin de remplacer ...". De plus, remplacer ">" n'est pas nécessaire.
Jukka K. Korpela

2
Et l'ordre est également important. Assurez-vous de gérer le &premier et <ensuite.
Tolga Evcimen

151

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>

exemple 3 : (Si vous "citez" réellement un bloc de code, le balisage serait)

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

bel é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 coloration syntaxique (pour le travail professionnel):

arcs-en-ciel (très parfait)

enjoliver

syntaxe surligneur

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?


4
Les éléments utilisés dans la réponse ne répondent pas du tout à la question: ils n'affectent pas l'interprétation de «<» commençant une balise.
Jukka K. Korpela

7
developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp dit: " N'utilisez pas cet élément . Il est obsolète depuis HTML3.2 et n'a pas été implémenté de manière cohérente. Il a été complètement supprimé de la langue en HTML5. "
Nick Rice

50

Une sorte de méthode naïve pour afficher le code sera de l'inclure dans une zone de texte et d'ajouter un attribut désactivé afin qu'il ne soit pas modifiable.

<textarea disabled> code </textarea>

J'espère que cela aidera quelqu'un à la recherche d'un moyen facile de faire les choses ..


7
La lecture seule peut être un meilleur attribut que désactivé afin que vous puissiez mettre en évidence le texte qu'il contient. Il est également possible d'ajouter un style qui le supprime de toutes les fonctionnalités qui le font ressembler à un élément d'entrée, bien que ce soit secondaire.
Tarquin

2
Super solution. Merci
Apit John Ismail

1
Les esperluettes seront toujours interprétées. par exemple & nbsp; sera rendu comme un espace insécable réel. Mais bonne réponse néanmoins c'est l'idéal pour quelque chose que je veux faire.
Nick Rice

1
J'ai essayé de nombreuses façons, et c'est la seule façon qui fonctionne pour moi. Merci beaucoup.
William Hou

25

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

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

Conseillé:

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


12

La <xmp>balise obsolète fait essentiellement cela, 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 hack / parlour, 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 du code comme celui-ci dans une zone de texte n'est pas du code HTML valide et entraînera un comportement indéfini dans différents navigateurs. Dans Internet Explorer, le code HTML est interprété, tandis que Mozilla, Chrome et Safari le laissent sans interprétation.

Si vous souhaitez qu'il ne soit pas modifiable et qu'il soit différent, vous pouvez facilement le styliser en utilisant CSS. Le seul problème serait que les navigateurs ajouteront cette petite poignée de glissement dans le coin inférieur droit pour redimensionner la zone. Ou bien, essayez d'utiliser une balise d'entrée à la place.

La bonne façon d'injecter du code dans votre zone de texte est d'utiliser un langage côté serveur comme ce 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 sur tous les navigateurs.

En dehors de cela, la seule façon est vraiment d'échapper le code vous-même si vous utilisez du HTML statique ou en utilisant des méthodes côté serveur telles que HtmlEncode (.NET) si vous utilisez une telle technologie.


1
c'est une horrible idée. Et si c'était du HTML dynamique affiché, et quelqu'un a fait ce qui suit. <? php echo '</textarea> <script> alert (\' hello world \ '); </script> <textarea>'; />. Par conséquent, votre code est vulnérable à xss.
Gary Drocella

PHP est côté serveur, donc il ne change pas le résultat vu par le navigateur. Il ne contourne surtout pas l'interpréteur HTML.
Robert Siemer

J'aime la mise en forme de la zone de texte pour qu'elle ne ressemble pas à une zone de saisie. J'ajoute également une largeur de 100% pour réduire l'enveloppement:<textarea disabled="true" style="border: none;background-color:white; width:100%">
Dan King

@GaryDrocella si vous insérez des balises <script> dans la tétarée, elles sont converties en & lt; et & gt; automatiquement, donc aucun script n'est jamais exécuté
bluejayke

6

En HTML? Non.

En XML / XHTML? Vous pouvez utiliser un CDATAbloc.


6

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

6

Je suppose:

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

Toutes vos options sont dans cet arbre:

  • avec la syntaxe HTML
    • il existe 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 cela est vrai pour tous les éléments)
      • qui aurait besoin de JavaScript pour déplacer les données ailleurs
      • dans les attributs entre guillemets doubles, "et &thing;doivent s'échapper: &quot;et &amp;thing;respectivement
    • éléments de texte brut
      • <script> et <style>seulement
      • ils ne sont jamais rendus visibles
      • mais l'intégration de votre texte dans Javascript pourrait être possible
      • Javascript permet des chaînes multi-lignes avec des backticks
      • il pourrait ensuite être inséré dynamiquement
      • un littéral </scriptn'est autorisé nulle part dans<script>
    • éléments de texte brut pouvant être échappés
      • <textarea>et <title>seulement
      • <textarea> est un bon candidat pour envelopper le code
      • il est tout à fait légal d'écrire </html> là - dedans
      • non légal est la sous-chaîne </textarea pour des raisons évidentes
        • échapper à ce cas spécial avec &lt;/textareaou similaire
      • &thing; doit s'échapper: &amp;thing;
    • éléments étrangers
      • éléments des espaces de noms MathML et SVG
      • au moins SVG permet à nouveau d'incorporer du HTML ...
      • et CDATA est autorisé là-bas, il semble donc avoir un potentiel
  • avec la syntaxe XML

 

Remarque: >n'a jamais besoin de s'échapper. Pas même dans des éléments normaux.


1
J'aime l'approche globale de votre réponse. Quelques corrections: <script>et <style>peuvent être rendues visibles, placez-les simplement dans le <body>avec style="display: block; white-space: pre;"et type="text/html"ou quelque chose si vous ne voulez pas qu'il soit exécuté en JavaScript. C'est un truc assez sympa je pense, bon pour la programmation et l'enseignement. Il <xmp>est également toujours implémenté dans les principaux navigateurs, bien qu'il soit obsolète.
Sam Watkins

Intéressant. @SamWatkins <xmp>n'est pas valide en HTML5, mais votre autre astuce semble correcte!
Robert Siemer

5

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 pris en charge: 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 un formatage sur plusieurs lignes dans le résultat, vous devez définir le style CSS "white-space: pre;" sur la 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 la zone de texte: le code ne sera pas reformaté comme il le ferait dans une zone de texte. (Des choses comme &nbsp;sont entièrement supprimées dans une zone de texte)


C'est une approche assez sympa, d'utiliser JavaScript et l'API DOM pour faire l'échappement pour nous. Nous pourrions l'utiliser avec un <template>ou quelque chose qui n'est pas normalement rendu.
Sam Watkins

3

En fin de compte, la meilleure réponse (quoique ennuyeuse) est "échapper au texte".

Il existe cependant de nombreux éditeurs de texte - ou même des mini-utilitaires autonomes - qui peuvent le faire automatiquement. Donc, vous ne devriez jamais avoir à l'échapper manuellement si vous ne le souhaitez pas (à moins que ce soit un mélange de code échappé et non échappé ...)

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


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

fonctionne bien pour moi ..

"garder en tête Alexander's suggestion, voici pourquoi je pense que c'est une bonne approche"

si nous essayons simplement, <textarea>cela ne fonctionnera pas toujours car il peut y avoirtextarea balises de qui peuvent fermer à tort la balise parent et afficher le reste de la source HTML sur le document parent, ce qui semblerait gênant.

en utilisant htmlentitiesconvertit tous les caractères applicables tels que< > les 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 c'est le cas, veuillez commenter car j'aimerais apprendre d'eux :)


2
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la manière et la raison pour laquelle il résout le problème améliorerait la valeur à long terme de la réponse.
Alexander

1
Si vous utilisez htmlentities () comme ça, <textarea> devient redondant. Mettez-le simplement dans un div ou quelque chose. L'OP n'a cependant pas suggéré qu'ils utilisaient PHP du tout.
Nick Rice

@Nick ouais bien, à mon avis, textarea sert de conteneur naturel car il ajoutera automatiquement des barres de défilement et des trucs qui autrement auraient besoin d'être stylés si nous les mettons en div de quelque chose ..
Anupam

2

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 $strvidez la valeur de htmlencoded:

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

2

C'est un truc 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>

Cela montrera comme ceci:

entrez la description de l'image ici

Vous pouvez le voir en direct ici


2

En fait, il existe un moyen de le faire. Il a une limitation (un), mais est 100% standard, non obsolète (comme xmp) et fonctionne.

Et c'est trivial. C'est ici:

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

Laissez-moi vous expliquer. Tout d'abord, le commentaire HTML ordinaire fait le travail, pour empêcher que le bloc entier soit interprété. Vous pouvez facilement y ajouter des balises, toutes seront ignorées. Ignoré de l'interprétation, mais toujours disponible viainnerHTML ! Il reste donc à obtenir le contenu et à filtrer les jetons de commentaire précédent et suivant.

Sauf (rappelez-vous - la limitation), vous ne pouvez pas y mettre de commentaires HTML, car (au moins dans mon Chrome) leur imbrication n'est pas prise en charge, et le tout premier '->' mettra fin à l'émission.

Eh bien, c'est une petite limitation désagréable, mais dans certains cas, ce n'est pas un problème du tout, si votre texte est exempt de commentaires HTML. Et, il est plus facile d'échapper à une construction, puis à un tas d'entre eux.

Maintenant, quelle est cette LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJochaîne étrange ? C'est une chaîne aléatoire, comme un hachage, peu susceptible d'être utilisée dans le bloc et utilisée pour? Voici le contexte, pourquoi je l'ai utilisé. Dans mon cas, j'ai pris le contenu d'un DIV, puis l'ai traité avec Markdown Showdown, puis la sortie affectée à un autre div. L'idée était d'écrire le démarque en ligne dans le fichier HTML et de l'ouvrir simplement dans un navigateur et il se transformerait à la volée. Donc, dans mon cas, <!--s'est transformé en <p><!--</p>, le commentaire s'est correctement échappé. Cela a fonctionné, mais a pollué l'écran. Donc, pour le supprimer facilement avec regex, la chaîne aléatoire a été utilisée. Voici le code:

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

Et il fonctionne.

Si quelqu'un est intéressé, cet article est écrit en utilisant cette technique. N'hésitez pas à télécharger et regardez à l'intérieur du fichier HTML.

Cela dépend de l'usage auquel vous l'utilisez. S'agit-il d'une entrée utilisateur? Ensuite, utilisez <textarea>et échappez à tout.Dans mon cas, et c'est probablement votre cas aussi, j'ai simplement utilisé des commentaires, et ça fait l'affaire.

Si vous n'utilisez pas de démarque et que vous souhaitez simplement l'obtenir tel quel à partir d'une balise, c'est encore plus simple:

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

et du code JavaScript pour l'obtenir:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

1

Il y a plusieurs façons d' échapper à tout en HTML, aucune n'est sympa.

Ou vous pouvez mettre un iframequi charge un ancien fichier texte brut.


1

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. Mais je me sentais obligé de dire quelque chose pour le bien des gens qui essayaient de trouver des réponses sur Internet.


1

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

ce code est vulnérable à xss. n'importe qui peut définir $ str = "</textarea> <textarea>"
Gary Drocella

Hiya, cela pourrait bien résoudre le problème ... mais ce serait bien si vous pouviez fournir une petite explication sur comment et pourquoi cela fonctionne :) N'oubliez pas - il y a des tas de débutants sur Stack overflow, et ils pourraient apprendre une ou deux choses de votre expertise - ce qui est évident pour vous ne le sera peut-être pas.
Taryn East

1
function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

il renverra le Html échappé



0

Cela peut ne pas fonctionner dans toutes les situations, mais le fait de placer des extraits de code à l'intérieur d'un textareales affichera sous forme de code.

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


0

C'est un peu un hack, mais nous pouvons utiliser quelque chose comme:

body script {
    display: block;
    font-family: monospace;
    white-space: pre;
}
<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

Avec ce CSS, le navigateur affichera des scripts à l'intérieur du corps. Il n'essaiera pas d'exécuter ce script, car il a un type inconnu text/html. Il n'est pas nécessaire d'échapper les caractères spéciaux à l'intérieur d'un <script>, sauf si vous souhaitez inclure une </script>balise de fermeture .

J'utilise quelque chose comme ça pour afficher le JavaScript exécutable dans le corps de la page, pour une sorte de "programmation alphabétisée".

Il y a plus d'informations dans cette question Quand les balises devraient-elles être visibles et pourquoi le peuvent-elles? .


-1
 //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)

-2

Une combinaison de quelques réponses qui fonctionnent ensemble ici:

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")
}

displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)
<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.