Showing posts with label XML. Show all posts
Showing posts with label XML. Show all posts

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;     
} 
}