Web Tech Guide

www.blogsmonetize.com feed

How to use Syntax Highlighter 3.0.83 in Blogger

 
For those who like to post source code in your blogs. Syntax Highlighter 3.083 is a very useful tool. If you are using blogspot, you often see a mess with your code. Syntax Highlighter is a solution for you. To implement this syntax highlighter function, please follow the following steps:

1. Go to Dashboard > Design > Edit HTML
2. Backup your template. In case, there is something wrong, you can backup your template.
3. Put the following code before the </head> tag.

<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  src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'  type='text/javascript'/>
  <script  src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'  type='text/javascript'/>
  <script  language='javascript' type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode  = true;
  SyntaxHighlighter.all();
 </script>


4. Save change.

In the above code, I use shBrushXml.js and shBrushCss.js.  For the full list of supported language, follow here. The letter follow Brush is the language. So if you want to have C#, then shBrushCSharp.js is for you.You just have to replace the one that you use with the one in the bolded code above.
In order to use it, first you have to convert all "<" and ">" to  &lt; and  &gt; respectively.
Then put your source code into this code
<pre class="brush: html"; [optional_params]">  your code here </pre>

I use xml file. Thus, I put html above. If you use c++, you should put cpp instead of html.
That is all the basic that you need to make it work. For more advance setting, you can check it here

© 10/21/2010 11:23:00 PM www.blogsmonetize.com
Loading related posts...

0 comments:

Post a Comment