Display HTML snippets in HTML

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?

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.

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?