Developer's blog

I needed to insert some code snippets into blogs. Searching in internet I found such interesting resources and posts:

1. http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html
   



2. Another blog record
   



3. Most correct blog record
   



4. http://code.google.com/p/syntaxhighlighter/
   

In the 3rd link author forgot to add

dp.SyntaxHighlighter.BloggerMode();

So, what we really need to do is to add two records into Blogger's Layout -> Change HTML:

1. Before </head>
   

   
   <link href="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" /> 
   <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shCore.js"></script>
   <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script> 
   <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushXml.js"></script>  
   <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCss.js"></script> 
   <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushJScript.js"></script>  
   <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushJava.js"></script>
   <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushSql.js"></script>
   

   
   



2. Before </body>
   

   
   <script language="javascript">
        dp.SyntaxHighlighter.ClipboardSwf = 'http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/clipboard.swf';   
        dp.SyntaxHighlighter.BloggerMode();
        dp.SyntaxHighlighter.HighlightAll('code');
   </script>
   

   
   

I don't know why but in my Firefox 3.0.4 it does realy matter to use <script> </script> instead of <script/>.

Now we can bravely insert our code into <pre> tags. Like

<pre name="code" class="Java">
 Java code
</pre>

or

<pre name="code" class="Xml">
 Xml code
</pre>

Just don't forget to replace all < in your code by &lt;

Ярлыки: blog code snippets coloring syntax highlighting