Afficher des extraits HTML en HTML

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

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 ?

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

• & comme &
• < comme <

(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 . ¹

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.

¹ Exemple concret:

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>

La méthode éprouvée pour HTML:

1. Remplacez le &caractère par&
2. Remplacez le <caractère par<
3. Remplacez le >caractère par>
4. Entourez éventuellement votre exemple HTML avec <pre>et / ou des <code>balises.

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?

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 ..

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>

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

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.

En HTML? Non.

En XML / XHTML? Vous pouvez utiliser un CDATAbloc.

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

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: "et &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 </textareaou similaire
    • &thing; doit s'échapper: &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
  • couvert par la réponse de Konrad

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

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  sont entièrement supprimées dans une zone de texte)

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

<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 :)

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>

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:

Vous pouvez le voir en direct ici

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

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.

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.

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

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é

Tu pourrais essayer:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

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.

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? .

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

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>