Display HTML snippets in HTML

Question

How can I show HTML snippets on a webpage without needing to replace each < with < and > with >?

In other words, is there a tag for don't render HTML until you hit the closing tag?

Answer 1

The tried and true method for HTML:

1. Replace the & character with &
2. Replace the < character with <
3. Replace the > character with >
4. Optionally surround your HTML sample with <pre> and/or <code> tags.

Answer 2

best way:

<xmp> // your codes .. </xmp> 

---

old samples:

sample 1:

<pre>   This text has   been formatted using   the HTML pre tag. The brower should   display all white space   as it was entered. </pre> 

sample 2:

<pre>   <code>     My pre-formatted code     here.   </code> </pre> 

sample 3: (If you are actually "quoting" a block of code, then the markup would be)

<blockquote>   <pre>     <code>         My pre-formatted "quoted" code here.     </code>   </pre> </blockquote> 

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?