So lets see how to add a syntax highlighter to your blog.
1. First you have to take a backup of your blog template ( to use if something goes wrong).
2. Then click on 'Template' in the right side of the page and click on "Edit HTML"(shown in the picture below).
3. After opening the blogger template copy the all CSS given in this link before </b:skin> tag.
4. Then you have to paste the following code before </head> tag.
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
5. Then paste the following code before </body> tag.
<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>
6. Finally save the blogger template.
7. Now the syntax highlighter is ready for your page and your codes that syntax highlighting is needed should goes with in <pre></pre> tags as shown below.(code should be entered in HTML mode)
<pre name="code">
...Your html-escaped code goes here...
</pre>
<pre name="code" class="php">
echo "I like PHP";
</pre>
This code will look like this,
...Your html-escaped code goes here...
echo "I like PHP";
8. Here is list of supported language for
<class>
attribute.9.If you want you can escape your code here
now you can have a nice syntax highlighter for your blog
No comments:
Post a Comment