Blogger - SyntaxHighlighter

Sunday, October 17, 2010 in ,

How to enable SyntaxHighlighter from Google to your Blogger blog. 

Click Design tab and then Edit HTML.

Go to SyntaxHighlighter (http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css) and copy all classes from the stylesheet.

In your blogger HTML template paste the css classes in the css information section, between <b:skin><![CDATA[ and ]]></b:skin>, just before the end.

Between the header tags, paste the javascripts, between <head> and </head>, just before the end.
I've disabled some of the languages I wont use, save some loading time. 

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.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/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/shBrushSql.js' type='text/javascript'/>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.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/shBrushDelphi.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/shBrushVb.js' type='text/javascript'/> -->

Between the body tags paste the following script. 

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

In your blog post where you want some source code, click Edit HTML and enter your code between pre tags.

<pre class="c-sharp" name="code">
 
</pre>

The complete list of languages can be found at SyntaxHighlighter (http://code.google.com/p/syntaxhighlighter/wiki/Languages).



Categories

Followers