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.
<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.
0 التعليقات: