Display HTML snippets in HTML

Question

How can I show HTML snippets on a webpage without needing to replace each  lt  with  amp lt  and  gt  with  amp gt    In other words  is there a tag for don t render HTML until you hit the closing tag

User · Answer

best way    lt xmp gt     your codes     lt  xmp gt      old samples   sample 1    lt pre gt    This text has   been formatted using   the HTML pre tag  The brower should   display all white space   as it was entered   lt  pre gt    sample 2    lt pre gt     lt code gt      My pre-formatted code     here     lt  code gt   lt  pre gt    sample 3       If you are actually  quoting  a block of code  then the markup would be    lt blockquote gt     lt pre gt       lt code gt          My pre-formatted  quoted  code here       lt  code gt     lt  pre gt   lt  blockquote gt    nice CSS sample   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      Syntax highlighting code  For pro work    rainbows  very Perfect    prettify   syntaxhighlighter  highlight   JSHighlighter    best links for you   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   How to highlight source code in HTML

User · Answer

I assume     you want to write 100  valid HTML5 you want to place the code snippet  almost  literal in the HTML   especially  lt  should not need escaping    All your options are in this tree    with HTML syntax   there are five kinds of elements those called  normal elements   like  lt p gt     can t have a literal  lt  it would be considered the start of the next tag or comment  void elements   they have no content you could put your HTML in a data attribute  but this is true for all elements  that would need JavaScript to move the data elsewhere in double-quoted attributes    and  amp thing  need escaping   amp quot  and  amp amp thing  respectively  raw text elements    lt script gt  and  lt style gt  only they are never rendered visible but embedding your text in Javascript might be feasable Javascript allows for multi-line strings with backticks it could then be inserted dynamically a literal  lt  script is not allowed anywhere in  lt script gt   escapable raw text elements    lt textarea gt  and  lt title gt  only  lt textarea gt  is a good candidate to wrap code in it is totally legal to write  lt  html gt  in there not legal is the substring  lt  textarea for obvious reasons   escape this special case with  amp lt  textarea or similar   amp thing  needs escaping   amp amp thing   foreign elements   elements from MathML and SVG namespaces at least SVG allows embedding of HTML again    and CDATA is allowed there  so it seems to have potential   with XML syntax   covered by Konrad s answer     nbsp   Note   gt  never needs escaping  Not even in normal elements

User · Answer

A combination of a couple answers that work together here    x000D   x000D  function c s    x000D      return s split   amp lt    join   lt    split   amp gt    join   gt    split   amp amp    join   amp    x000D    x000D   x000D  displayMe innerHTML   ok innerHTML  x000D  console log  x000D    c ok innerHTML  x000D    x000D   lt textarea style  display none  id  ok  gt  x000D   lt script gt  x000D  console log  hello   5 amp 9   x000D   lt  script gt  x000D   lt  textarea gt  x000D   lt div id  displayMe  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There are a few ways to escape everything in HTML  none of them nice   Or you could put in an iframe that loads a plain old text file

User · Answer

In HTML  No   In XML XHTML  You could use a CDATA block

User · Answer

is there a tag for don t render HTML until you hit the closing tag   No  there is not  In HTML proper  there   s no way short of escaping some characters    amp  as  amp amp   lt  as  amp lt    Incidentally  there is no need to escape  gt  but people often do it for reasons of symmetry   And of course you should surround the resulting  escaped HTML code within  lt pre gt  lt code gt     lt  code gt  lt  pre gt  to  a  preserve whitespace and line breaks  and  b  mark it up as a code element  All other solutions  such as wrapping your code into a  lt textarea gt  or the  deprecated   lt xmp gt  element  will break 1 XHTML that is declared to the browser as XML  via the HTTP Content-Type header       merely setting a DOCTYPE is not enough  could alternatively use a CDATA section   lt   CDATA Your  lt code gt  here   gt   But this only works in XML  not in HTML  and even this isn   t a foolproof solution  since the code mustn   t contain the closing delimiter    gt   So even in XML the simplest  most robust solution is via escaping   1 Case in point   x000D   x000D  textarea  border  none  width  100    x000D   lt textarea readonly  readonly  gt     lt p gt Computer  lt textarea gt says lt  textarea gt   lt span gt no  lt  span gt   lt  textarea gt    lt xmp gt    Computer  lt xmp gt says lt  xmp gt   lt span gt no  lt  span gt   lt  xmp gt  x000D   x000D   x000D

User · Answer

Kind of a naive method to display code will be including it in a textarea and add disabled attribute so its not editable    lt textarea disabled gt  code  lt  textarea gt    Hope that help someone looking for an easy way to get stuff done

User · Answer

i used  lt xmp gt  just like this   http   jsfiddle net barnameha hF985 1

User · Answer

You could use a server side language like PHP to insert raw text    lt  php    str    lt  lt  lt EOD    lt html lang  en  gt     lt head gt       lt meta charset  utf-8  gt       lt meta name  description  content  Minimal HTML5  gt       lt meta name  keywords  content  HTML5 Minimal  gt       lt title gt This is the title lt  title gt       lt link rel  stylesheet css  href  style css  gt     lt  head gt     lt body gt     lt  body gt     lt  html gt    EOD    gt    then dump out the value of  str htmlencoded    lt div style  white-space  pre  gt     lt  php echo htmlentities  str     gt   lt  div gt

User · Answer

lt textarea  gt  lt  php echo htmlentities  page html     gt  lt  textarea gt    works fine for me     keeping in mind Alexander s suggestion  here is why I think this is a good approach   if we just try plain  lt textarea gt  it may not always work since there may be closing textarea tags which may wrongly close the parent tag and display rest of the HTML source on the parent document  which would look awkward   using htmlentities converts all applicable characters such as  lt   gt  to HTML entities which eliminates any possibility of leaks   There maybe benefits or shortcomings to this approach or a better way of achieving the same results  if so please comment as I would love to learn from them

User · Answer

It s vey simple      Use this xmp code       lt xmp id  container  gt    amp lt xmp  amp gt        lt p gt a paragraph lt  p gt        amp lt  xmp  amp gt    lt  xmp gt

User · Answer

It may not work in every situation  but placing code snippets inside of a textarea will display them as code   You can style the textarea with CSS if you don t want it to look like an actual textarea

User · Answer

If your goal is to show a chunk of code that you re executing elsewhere on the same page  you can use textContent  it s pure-js and well supported  http   caniuse com  feat textcontent    lt div id  myCode  gt       lt p gt          hello world      lt  p gt   lt  div gt    lt div id  loadHere  gt  lt  div gt    document getElementById  myCode   textContent   document getElementById  loadHere   innerHTML    To get multi-line formatting in the result  you need to set css style  white-space  pre   on the target div  and write the lines individually using   r n  at the end of each     Here s a demo  https   jsfiddle net wphps3od   This method has an advantage over using textarea  Code wont be reformatted as it would in a textarea    Things like  amp nbsp  are removed entirely in a textarea

User · Answer

This is by far the best method for most situations    lt pre gt  lt code gt      code here  escape it yourself   lt  code gt  lt  pre gt    I would have up voted the first person who suggested it but I don t have reputation  I felt compelled to say something though for the sake of people trying to find answers on the Internet

User · Answer

Deprecated  but works in FF3 and IE8    lt xmp gt      lt b gt bold lt  b gt  lt ul gt  lt li gt list item lt  li gt  lt  ul gt   lt  xmp gt    Recommended    lt pre gt  lt code gt      code here  escape it yourself   lt  code gt  lt  pre gt

User · Answer

Actually there is a way to do this  It has limitation  one   but is 100  standard  not deprecated  like xmp   and works   And it s trivial  Here it is    lt div id  mydoc-src  style  display  none   gt  LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo  lt  -- YOUR CODE HERE       lt script src  WidgetsLib all js  gt  lt  script gt         This is a text  no side effects trying to load it  -- gt  LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo  lt  div gt    Please let me explain  First of all  ordinary HTML comment does the job  to prevent whole block be interpreted  You can easily add in it any tags  all of them will be ignored  Ignored from interpretation  but still available via innerHTML  So what is left  is to get the contents  and filter the preceding and trailing comment tokens   Except  remember - the limitation  you can t put there HTML comments inside  since  at least in my Chrome  nesting of them is not supported  and very first  --   will end the show   Well  it is a nasty little limitation  but in certain cases it s not a problem at all  if your text is free of HTML comments  And  it s easier to escape one construct  then a whole bunch of them   Now  what is that weird LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo string  It s a random string  like a hash  unlikely to be used in the block  and used for  Here s the context  why I have used it  In my case  I took the contents of one DIV  then processed it with Showdown markdown  and then the output assigned into another div  The idea was  to write markdown inline in the HTML file  and just open in a browser and it would transform on the load on-the-fly  So  in my case   lt  -- became transformed to  lt p gt  lt  -- lt  p gt   the comment properly escaped  It worked  but polluted the screen  So  to easily remove it with regex  the random string was used  Here s the 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   lt p gt   0 10 LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo  0 10  lt   p gt  g           src innerHTML         And it works   If somebody is interested  this article is written using this technique  Feel free to download  and look inside the HTML file   It depends what you are using it for  Is it user input  Then use  lt textarea gt   and escape everything  In my case  and probably it s your case too  I simply used comments  and it does the job   If you don t use markdown  and just want to get it as is from a tag  then it s even simpler    lt div id  mydoc-src  style  display  none   gt   lt  -- YOUR CODE HERE       lt script src  WidgetsLib all js  gt  lt  script gt         This is a text  no side effects trying to load it  -- gt   lt  div gt    and JavaScript code to get it       var src   document getElementById  mydoc-src        var YOUR CODE   src innerHTML replace    lt  -- -- gt   g

User · Answer

You could try    x000D   x000D  Hello  Here is some code  x000D   x000D   lt xmp gt  x000D   lt div id  hello  gt  x000D   x000D   lt  div gt  x000D   lt  xmp gt  x000D   x000D   x000D

User · Answer

This is how I did it    str   file get contents  my-code-file php    echo   lt textarea disabled  true  style  border  none background-color white   gt    echo  str  echo   lt  textarea gt

User · Answer

function escapeHTML string                 var pre   document createElement  pre            var text   document createTextNode string           pre appendChild text           return pre innerHTML     end escapeHTML   it will return the escaped Html

User · Answer

This is a simple trick and I have tried it in Safari and Firefox   lt code gt       lt span gt  lt  lt  span gt meta property  og title  content  A very fine cuisine    gt  lt br gt       lt span gt  lt  lt  span gt meta property  og image  content  http   www example com image png    gt   lt  code gt    It will show like this     You can see it live Here

User · Answer

Ultimately the best  though annoying  answer is  escape the text    There are however a lot of text editors -- or even stand-alone mini utilities -- that can do this automatically   So you never should have to escape it manually if you don t want to  Unless it s a mix of escaped and un-escaped code      Quick Google search shows me this one  for example  http   malektips com zzee-text-utility-html-escape-regular-expression html

User · Answer

The deprecated  lt xmp gt  tag essentially does that but is no longer part of the XHTML spec   It should still work though in all current browsers   Here s another idea  a hack parlor trick  you could put the code in a textarea like so    lt textarea disabled  true  style  border  none background-color white   gt       lt p gt test lt  p gt   lt  textarea gt    Putting angle brackets and code like this inside a text area is invalid HTML and will cause undefined behavior in different browsers   In Internet Explorer the HTML is interpreted  whereas Mozilla  Chrome and Safari leave it uninterpreted   If you want it to be non-editable and look different then you could easily style it using CSS   The only issue would be that browsers will add that little drag handle in the bottom-right corner to resize the box   Or alternatively  try using an input tag instead   The right way to inject code into your textarea is to use server side language like this PHP for example    lt textarea disabled  true  style  border  none background-color white   gt       lt  php echo   lt p gt test lt  p gt      gt   lt  textarea gt    Then it bypasses the html interpreter and puts uninterpreted text into the textarea consistently across all browsers   Other than that  the only way is really to escape the code yourself if static HTML or using server-side methods such as  NET s HtmlEncode   if using such technology

User · Answer

The tried and true method for HTML    Replace the  amp  character with  amp amp  Replace the  lt  character with  amp lt  Replace the  gt  character with  amp gt  Optionally surround your HTML sample with  lt pre gt  and or  lt code gt  tags

User · Answer

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     lt div  gt    text value  html       html   htmlEncode html

User · Answer

This is a bit of a hack  but we can use something like    x000D   x000D  body script   x000D      display  block  x000D      font-family  monospace  x000D      white-space  pre  x000D    x000D   lt script type  text html  gt  x000D   lt h1 gt Hello World lt  h1 gt  x000D   x000D   lt ul gt  x000D       lt li gt Enjoy this dodgy hack  x000D       lt li gt or don t  x000D   lt  ul gt  x000D   lt  script gt  x000D   x000D   x000D    With that CSS  the browser will display scripts inside the body  It won   t attempt to execute this script  as it has an unknown type text html  It   s not necessary to escape special characters inside a  lt script gt   unless you want to include a closing  lt  script gt  tag   I   m using something like this to display executable JavaScript in the body of the page  for a sort of  literate progamming    There   s some more info in this question When should  tags be visible and why can they

[html] Display HTML snippets in HTML

Examples related to html

Examples related to tags