Réponses:
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 . 1
XHTML qui est déclaré dans le navigateur comme XML (via HTTP en- Content-Type
tête - la mise simple! DOCTYPE
Est 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:
>
par >
<
et &
doit être remplacé, non échappé >
est valide dans HTML.
La méthode éprouvée pour HTML:
&
premier et <
ensuite.
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)
meilleurs liens pour vous:
https://github.com/balupton/jquery-syntaxhighlighter
http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/
http://alexgorbatchev.com/SyntaxHighlighter/
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>
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.
<textarea disabled="true" style="border: none;background-color:white; width:100%">
Je suppose:
<
ne devrait surtout pas avoir besoin de s'échapperToutes vos options sont dans cet arbre:
<p>
)
<
"
et &thing;
doivent s'échapper: "
et &thing;
respectivement<script>
et <style>
seulement</script
n'est autorisé nulle part dans<script>
<textarea>
et <title>
seulement<textarea>
est un bon candidat pour envelopper le code</html>
là - dedans</textarea
pour des raisons évidentes
</textarea
ou similaire&thing;
doit s'échapper: &thing;
Remarque: >
n'a jamais besoin de s'échapper. Pas même dans des éléments normaux.
<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.
<xmp>
n'est pas valide en HTML5, mais votre autre astuce semble correcte!
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)
<template>
ou quelque chose qui n'est pas normalement rendu.
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 htmlentities
convertit 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 $str
videz 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 LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
chaî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 iframe
qui 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 textarea
les 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("<").join("<").split(">").join(">").split("&").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>