web-dev-qa-db-fra.com

Existe-t-il un moyen HTML/CSS pour afficher les balises HTML sans analyse?

Est-il possible d'afficher des balises HTML sans analyse? Des balises comme XMP fonctionnaient parfaitement, mais elles sont maintenant remplacées par PRE, ce qui n’est pas si cool. Jetez un oeil à cet exemple:

//This used to NOT PARSE HTML even if you used standard < and >.
<XMP>
<a hred="http://example.com">Link</a>
</XMP>

//New PRE tag requires &lt; and &gt; as replacement for < and >.
<PRE>
&#60;a href="http://example.com"&#62;Link&#60;/A&#62;
</PRE>

Ce que je recherche, c'est l'équivalent d'un ancien tag XMP. La nouvelle balise PRE analysera le code.

htmlcsscharacter-encodingspecial-characters
21
Atadj

Vous pouvez utiliser un élément script avec son ensemble type pour désigner du texte brut et définir sa propriété display sur block. Cela affecte uniquement le comportement de l'analyse: aucune balise (balises ou références d'entité ou de caractère) n'est reconnue, à l'exception de la balise de fin de l'élément lui-même </script>. (Donc, ce n'est pas tout à fait identique à xmp, où la balise reconnue est </xmp>.) Vous pouvez faire séparément la gestion des espaces blancs similaire à celle de xmp et pre et/ou définir la police du monospace comme dans ces éléments par défaut.

Exemple:

<style>
    script {
        display: block;
    }
</style>

Puis dans le corps du document:

<script type="text/plain">
    <i>&eacute;</i>
</script>

Testé sur les dernières versions d'IE, Chrome, Firefox, Opera. Cela n’a pas fonctionné dans les émulations IE 8 et IE 7 sur IE 9, mais il s’agit probablement d’un bogue de l’émulation.

Cependant, je ne vois pas pourquoi vous utiliseriez ceci au lieu de xmp, qui n’a pas cessé de fonctionner. Ce n’est pas dans les spécifications, mais si cela vous inquiète, vous auriez toujours dû vous inquiéter. Mentionné comme évitable dans HTML 2.0 (la toute première spécification HTML), il était déconseillé dans HTML 3.2 et complètement supprimé dans HTML 4.0 (il y a longtemps: en 1997).

La xmp fait un retour plutôt que de mourir. Le W3C HTML5 (caractérisé comme la spécification HTML actuelle par le personnel du W3C) déclare xmp comme obsolète et non conforme, mais impose également un { exigence } sur les navigateurs: «Les agents utilisateurs doivent traiter les éléments xmp de manière équivalente à pre éléments en termes de sémantique et de rendu. (L'analyseur a toutefois un comportement spécial pour cet élément.) ”L'ancien comportement d'analyse n'est donc pas explicitement requis, mais clairement impliqué.

23
Jukka K. Korpela

Personnellement, je pense que l’utilisation des balises <code> </code> ne fonctionne que dans Dream Weaver et La balise <xmp> </xmp> n’a jamais cessé de fonctionner à moins que vous ne mettiez dans </xmp> cela fonctionnait bien. Utiliser <textarea> </textarea> permet aux autres utilisateurs de modifier votre code sur le site Web ou sur la page. Il est donc recommandé que la balise <xmp> </xmp> soit toujours utilisée et que cette balise reste active.

4
Sean Cassiere

Si vous souhaitez être plus complexe, vous pouvez également créer une balise personnalisée à l'aide de jQuery. Pour cet exemple, j'ai utilisé <noparse>.

$('noparse').each(function(){
    if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
        $(this).text($(this).html()).attr('tagchecked', 'true'); //makes the html into plaintext
    }
});

JSFiddle ici

1
tjhorner

La méthode moderne consiste à utiliser textarea avec l'attribut (boolean) en lecture seule. Vous pouvez utiliser XMP, mais cette méthode est obsolète et risque donc de ne plus être prise en charge. 
Exemple:

<textarea readonly='true'>
    <p>This is some text</p>
</textarea>
1
user3133463

Il n'y a pas.

En théorie, vous pouvez utiliser un bloc CDATA, mais aucun navigateur ne le prend en charge en mode texte/html.

Utilisez des références de caractères.

1
Quentin

Je suggère d'utiliser la balise html iframe et de mettre le texte que vous souhaitez afficher dans l'attribut src. vous devez seulement le coder en url ou en base64.

example (urlencoded):
<iframe src="data:text/plain,%22%3Chello%3E%22"></iframe>

example (base64):
<iframe src="data:text/plain;base64,IjxoZWxsbz4i"></iframe>

Result displayed as:
"<hello>"
0
Peter Korinek TellusTalk

Et puis ... quelques années s’écoulent, j’ai le même problème lors de la conversion de mon blog de wordpress à un spa vuejs soutenu par lambda et dynamodb.

Et la réponse est: au moins dans ma situation. Échapper à l'entité.

&lt; devient &amp;lt;

&gt; devient &amp;gt;

etc.

J'espère que cela t'aides. 

0
morissette