Syntax highlighter is a tool developed by Google Code that 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.
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.
<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.
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.
The Code Goes Here……
</pre>
Second is by Using Text area.
Use the Text Area as given in the following Example.
… 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.
Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.
Similar Posts
- Tweetmeme Comes with Follow button to help you increase your Twitter Followers(with Code)
- Show Twitter updates Widget for blogger
- Add retweetme buttons on each of your blogger posts
- Give style to your Blog Link Titles
- 3 Column Upgraded Rider Blogger Template
Article by Dinesh Dhakal
Dinesh has written 289 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.
{ 2 comments… read them below or add one }
pertamaaxxxxxx……
nice trick .
Thanks….
Success!
Ghee…
I thought this feature is only available in WordPress self hosted…
Thanks for the tips…