Friday, July 15, 2011

How to get Code Snippets to look good on your blogger

Was struggling quite a bit to get the snippets to look readable.  Came across these then - http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html and http://formatmysourcecode.blogspot.com/

Quite helpful.

If any one has better ideas, do post them in the comments.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>  
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>  
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>  
<script language='javascript'>  SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>

1. Paste it into your Blogger Template just above the </head> tag
2. Save the template
3. Then you can start creating code blocks in your existing or new Blog entries.

There are 2 ways to add a code block using syntaxhighlighter

Method 1: Using the script Tag
<script type=&quot;syntaxhighlighter&quot; class=&quot;brush: csharp&quot;>
<![CDATA[ // Comment
public class Testing {
public Testing() {} 
public void Method() 
{/* Another Commenton multiple lines */int x = 9;}
}]]></script>

becomes
// Comment
public class Testing {    
public Testing() {    
}     

public void Method() {        
/* Another Comment           
on multiple lines */        
int x = 9;    
}
}

Method 2: Using the pre Tag
<pre class="brush: csharp">// Comment
public class Testing {
public Testing() {
} 

public void Method() {
/* Another Comment
on multiple lines */
int x = 9;
}
}
</pre>

becomes
// Comment 
public class Testing {     
public Testing() {     
}       

public void Method() {         
/* Another Comment            
on multiple lines */        
int x = 9;     
} 
}

No comments:

Post a Comment