Wednesday, 5 August 2015

Adding google syntax highlighter to blogger

1. Log in to your blogger and go Template section.



2. Edit html, make a backup.
3. Copy the css from http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
and paste it between head tags (make sure you put the code inside CDATA )
<![CDATA[
-- css goes here
]]>
4. Add js references 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. Paste the js code before </body> tag

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

6. Save the template.
7. Compose code and put it between


<pre name="code" class="csharp">
public void ExampleCSharpMethod()
{
this.foo1 = 5;
}
</pre>

<pre name="code" class="js">
var Jquery-JavaScriptExample= $("#item1");
</pre>

<pre name="code" class="php">
echo "php says hi";
</pre>

Will give you this results

public void ExampleCSharpMethod()
{
   this.foo1 = 5;
}

var Jquery-JavaScriptExample= $("#item1");

echo "Php example code";
echo "php says hi";

8. All available languages : https://code.google.com/p/syntaxhighlighter/wiki/Languages
9. Escape characters : http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php