Is there a HTML/CSS way to display HTML tags without parsing?
Solution 1
You can use a script
element with its type
set to denote plain text, and set its display
property to block
. This only affects the parsing behavior: no markup (tags or entity or character references) is recognized, except for the end tag of the element itself </script>
. (So it is not quite the same as xmp
, where the recognized tag is </xmp>
.) You can separately make white space handling similar to that of xmp
and pre
and/or set the font the monospace as in those elements by default.
Example:
<style>
script {
display: block;
}
</style>
Then within document body:
<script type="text/plain">
<i>é</i>
</script>
Tested on newest versions of IE, Chrome, Firefox, Opera. Didn’t work in IE 8 and IE 7 emulation on IE 9, but that’s probably a bug in the emulation.
However, I don’t see why you would use this instead of xmp
, which hasn’t stopped working. It’s not in the specs, but if you are worried about that, you should have always been worried. Mentioned in HTML 2.0 (the first HTML spec ever) as avoidable, it was deprecated in HTML 3.2 and completely removed in HTML 4.0 (long ago: in 1997).
The xmp
is making a comeback rather than dying. The W3C HTML5 (characterized as the current HTML specification by W3C staff) declares xmp
as obsolete and non-conforming, but it also imposes a requirement on browsers: “User agents must treat xmp
elements in a manner equivalent to pre
elements in terms of semantics and for purposes of rendering. (The parser has special behavior for this element though.)” The old parsing behavior is thus not explicitly required, but clearly implied.
Solution 2
I personally think using the <code> </code>
tags only works in Dream Weaver and the tag <xmp> </xmp>
never stopped working unless you put in </xmp>
it works fine. Using <textarea> </textarea>
makes it so that others can edit your code on the website or the page so I recommend that the tag <xmp> </xmp>
is still used and that that tag still lives on.
Solution 3
The modern way is to use textarea with (boolean) attribute readonly. You could use XMP, but that is deprecated, so it may eventually stop being supported.
example:
<textarea readonly='true'>
<p>This is some text</p>
</textarea>
Solution 4
And then... a few years go by, I have the same problem while converting my blog from wordpress to a vuejs spa backed by lambda and dynamodb.
And the answer is; at least in my situation. Escape the entity.
<
becomes &lt;
>
becomes &gt;
etc. etc.
Hope this helps.
Solution 5
There isn't.
In theory you could use a CDATA block, but no browser supports that in text/html mode.
Use character references.
Related videos on Youtube
Atadj
Updated on November 12, 2020Comments
-
Atadj over 3 years
Is there any way that I could display HTML tags without parsing? Tags like
XMP
worked before perfectly but now it's replaced withPRE
that isn't so cool. Take a look at this example://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 < and > as replacement for < and >. <PRE> <a href="http://example.com">Link</A> </PRE>
What I'm looking for is equivalent of old XMP tag. New PRE tag will parse code.
-
Moses almost 12 yearsWas there any specific use case you were looking for, or do you just want to avoid having to encode characters?
-
Atadj almost 12 years@Moses I just want to be able to freely use
<pre>
and/or<code>
tags on my website without necessity to convert anything (like<
to<
). I'd like them to display HTML/CSS code without parsing.
-
-
Quentin almost 12 yearsThat will show a serialisation of the DOM created from the HTML, not the original HTML. It will also show a flash of rendered content.
-
Erik Funkenbusch almost 12 years@Quentin - True, though in most cases those would be the same. And there are ways around the flashing.
-
Jukka K. Korpela almost 12 yearsThe use of
textarea
does not switch off all HTML parsing: character and entity references are still parsed. E.g.,<textarea>é</textarea>
displays é whereas<xmp>é</xmp>
displaysé
. -
Vignesh Subramanian almost 11 yearsBut i am not able to append like that in jquery!!
$("#htmltest").html("<script type='text/plain'>"+unescape(escape(testvar))+"</script>");
-
Michael Yaworski over 10 yearsPlease try to provide a specific example for his problem, or else this could easily be a comment on his post.
-
Heitor almost 7 yearsThis answer worked very fine for me, thanks!! I just recomment to set the textarea css
display: none
because there is absolutely no reason to display everything to users! -
Gaurav Paliwal over 6 yearsNo significant change @jukka-k-korpela
-
GTS Joe almost 5 yearsGreat (and unconventional) answer! In my particular case, it was just what I needed. Thank you.
-
the Hutt over 2 yearsyou can surround
<script>
tag with<pre>
to keep indent