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 <
et >
par >
?
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 ?
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 <
et &
, respectivement) manuellement.
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)
les 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 /
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..
j'ai utilisé <xmp>
comme ceci :
http://jsfiddle.net/barnameha/hF985/1 /
en HTML? Aucun.
in XML / XHTML? Vous pourriez utiliser un bloc CDATA
.
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.
c'est très simple .... Utilisez ce code xmp
<xmp id="container">
<xmp >
<p>a paragraph</p>
</xmp >
</xmp>
le lien suivant sera utile.
http://www.freebits.co.uk/convert-html-code-to-text.html
il est très facile et simple.
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
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
- surtout
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
- ne peut pas avoir un littéral
- é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:"
et&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
</textarea
ou similaire
- échapper à ce cas particulier avec
-
&thing;
needs escapade:&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
- recouvert " par Konrad réponse
Note: >
n'a jamais besoin d'échapper. Même pas dans normal éléments.
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>
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.
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.
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>";
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é
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
sont supprimés entièrement dans une textarea)
<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:)
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.
Vous pouvez essayer:
Hello! Here is some code:
<xmp>
<div id="hello">
</div>
</xmp>
//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)
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;
}