Is is simple to install syntax highlighter for your blog.First Download Syntax Highlighter into Your Computer.After that Extract the Files and Upload it to Your Google Pages Account.
Now in second step Login Into Blogger -> Goto Edit Html Page and Paste the following code between <head> and </head> Tags in your Template.
<link href='http://GOOGLEPAGES USERNAME.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushPython.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushVb.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushRuby.js' type='text/javascript'/>
In the above Code Replace GOOGLEPAGES USERNAME with your Googlepages username where you have Uploaded the Files.
In the Third step Paste the following Code just before </body> Tag in your Template.
<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>
After you Complete the above steps Save your Template.Now you have to ways to implement Highlighter style in your Blog post Codes.
By Using <pre> and </pre> Tags.
While Creating or Editing your Blog Posts write the codes between <pre> and </pre> with name Code and Style c-sharp as in the following Example.
<pre name="code" class="c-sharp">
The Code Goes Here......
</pre>
Second is by Using Text area.
Use the Text Area as given in the following Example.
<textarea name="code" class="c#" cols="60" rows="10">
... The code Goes here ...
</textarea>
Thats all about this Blogger hack.If you want more blogger hacks then Visit Blogger hack directory Page or If you want free Blogger templates then visit Blogger Templates directory Page.
comments
2 Responses to "Install Syntax Highlighter for better code Viewing in Blogger"September 22, 2008 at 1:20 PM
pertamaaxxxxxx......
nice trick .
Thanks....
Success!
September 22, 2008 at 8:55 PM
Ghee...
I thought this feature is only available in WordPress self hosted...
Thanks for the tips...
Speak Your Mind
Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!