SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.

Here's how to use SyntaxHighlighter in your web page or blog

1. Login to BLOGGER, go to: "Settings > Template > Edit HTML and then Paste the setup code ahead of the </HEAD> tag in your HTML or page template; for contexts other than blogger, remove the line "SyntaxHighlighter.config.bloggerMode = true;"

<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js' type='text/javascript'></script>
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
   SyntaxHighlighter.all();
</script> 



2. Use the <PRE> tag to display your code using whatever syntax or "brush" you want (see the the docs for a description of the brushes and instructions about customizing the setup):

<pre>
your code here
Orginal pre tags still work.
</pre>

<pre class="brush: sql">
your code here
</pre>

<pre class="brush: text">
your code here
</pre>

Enhancements? Here's a couple of low priority nice-to-haves, just quibbles in my opinion:

1. Optional vertical scrolling with a setting for how many lines to display. If that was provided, then horizontal-scrolling-as-an-option might also be of interest.
2. Better logic for the "sql" brush. Personally I don't care about color highlighting at all, but some people do, and the SQL highlighting is rather, um, less than perfect.

The funny thing is, the docs say this about the plain text brush: "Maybe somebody will need it :)" In actual fact, it's the only brush I need, and it's by far the fastest for rendering: no waiting at all to see all 4491 lines of reload.sql when I use <pre class="brush: text">.

Please leave comments if you have any questions.

Source : Click Here

Thanks for visiting my Blog: Please Share and leave a comment if you like: Thank you!!! xoxo

Drop your comment or suggestion here!