How to Display Web Code in Blogger

So scratch that... found a better solution using syntax highlighter!


Login and on the left hand site select Template
Next, click Edit HTML.  It will give you a warning, just click Proceed.
Next do a Control+F or Apple+F to bring up the search box.
Search for "</head>" (minus the quotes)
Add this above it:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 

<script language='javascript'> 

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';

SyntaxHighlighter.all();

</script>

So the site I found was off slightly.  But here's how to do it.  Basically your just using CSS to display it slightly differently.


Login and on the left hand site select Template
Next, click Edit HTML.  It will give you a warning, just click Proceed.
Next do a Control+F or Apple+F to bring up the search box.
Search for "]]></b:skin>" (minus the quotes)
Add this above it:

pre { 
background:#efefef; 
border:1px solid #A6B0BF; 
font-size:12px; 
line-height:100%; 
overflow:auto; 
padding:2px; color:#000000 } 
pre:hover { border:1px solid #efefef; }

code { 
font-size:12px; 
text-align:left; 
margin:0;padding:0; color: #000000;} .
clear { clear:both; overflow:hidden; }

Click Preview to make sure it didn't screw up anything. If it's ok, select "Save Template"
Start a New Blog Post

When ever you want to add code, you have to switch it to HTML view and add the <pre class="brush: xxxx"></pre> tags around the code.  You can find a list of the different classes here.

You can then switch back to Compose view after pasting the code. The code requires you to put HTML code in a Quick Escape converter (ex: here).

Source:  Link Link