How To Add Syntax Highlighter In Your Blogger Blogspot

CONTROL YOUR CODES WITH SYNTAXHIGHLIGHTER
Do you have a trouble showing your codes in your blog or website,we can get rid of this trouble with syntax highlighter that created by alex Gorbatchev.
There are 3 steps for adding and using his syntax highlighter, javascript,CSS,textarea.

Get Started:
1) Login your blogger dasboard with your gmail account.Follow these steps Design >> Edit HTML >> Expand Widget Templates ,then search for the tag ]]></b:skin> using CTRL + F and paste following Javascript code just after/blow it.

Javacodes:
<!-- SyntaxHighlighter begin --><script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/> <!-- SyntaxHighlighter end -->

2) This time find the tag </head> with CTRL + F again, and paste the following CSS code just before/above it.

CSS codes:

<style type="text/css">/* syntax css begin */ .dp-highlighter {  font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;  font-size: 12px;  background-color: #E7E5DC;  width: 99%;         height: 50%;  overflow: hidden;  margin: 18px 0 18px 0 !important;  padding-top: 1px; /* adds a little border on top when controls are hidden */ } /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span  {  margin: 0;  padding: 0;  border: none } .dp-highlighter a, .dp-highlighter a:hover {  background: none;  border: none;  padding: 0;  margin: 0; }  .dp-highlighter .bar {  padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar {  padding-left: 0px; }  .dp-highlighter ol {  list-style: decimal; /* for ie */  background-color: #fff;  margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */  padding: 0px;  color: #5C5C5C; } .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li {  list-style: none !important;  margin-left: 0px !important; } .dp-highlighter ol li, .dp-highlighter .columns div {  list-style: decimal-leading-zero; /* better look for others, override cascade from OL */  list-style-position: outside !important;  border-left: 3px solid #6CE26C;  background-color: #F8F8F8;  color: #5C5C5C;  padding: 0 3px 0 10px !important;  margin: 0 !important;  line-height: 14px; }  .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div {  border: 0; } .dp-highlighter .columns {  background-color: #F8F8F8;  color: gray;  overflow: hidden;  width: 95%;         } .dp-highlighter .columns div {  padding-bottom: 5px; } .dp-highlighter ol li.alt {  background-color: #FFF;  color: inherit; } .dp-highlighter ol li span {  color: black;  background-color: inherit; } /* Adjust some properties when collapsed */  .dp-highlighter.collapsed ol {  margin: 0px; } .dp-highlighter.collapsed ol li {  display: none; } /* Additional modifications when in print-view */ .dp-highlighter.printing {  border: none; } .dp-highlighter.printing .tools {  display: none !important; } .dp-highlighter.printing li {  display: list-item !important; } /* Styles for the tools */ .dp-highlighter .tools {  padding: 3px 8px 3px 10px;  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;  color: silver;  background-color: #f8f8f8;  padding-bottom: 10px;  border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools {  border-left: 0; } .dp-highlighter.collapsed .tools {  border-bottom: 0; } .dp-highlighter .tools a {  font-size: 9px;  color: #a0a0a0;  background-color: inherit;  text-decoration: none;  margin-right: 10px; }  .dp-highlighter .tools a:hover {  color: red;  background-color: inherit;  text-decoration: underline; } /* About dialog styles */ .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; } /* syntax css end */</style>

3) Lastly find the tag </body> with CTRL + F, then paste below code just above/before it.

<!-- Add-in Script for syntax highlighting --><script language='javascript'>dp.SyntaxHighlighter.BloggerMode();dp.SyntaxHighlighter.HighlightAll('code');</script><!-- end syntax -->

4) Now save your template, You are done!

How to Use Syntax Highlighter

Put your HTML/Javascript code between <textarea>...</textarea> as shown blow

<textarea class="c#" cols="70" name="code" rows="10"> ...Put Some Code Here ...</textarea>

Done.