This blog is merely my PreCode setup test. It took me a long time to setup the PreCode because I did realized the preview function on Blogger, and the Live Writer Preview does not execute JavaScript. I kept wondering why the code setup doesn’t work until I actually try to publish a post.
Here are two examples on how the Syntax Highighter works:
JavaScript Example:
function doNothing()
{
var a = 1;
var b = 2;
var nothing = a*b;
// alert(nothing);
}
C# Example:
public static string GetHelloMessage()
{
var a = "Hello";
var b = "World";
var someArray = (from p in SomeArray
where p is Dat
select p).ToArray();
return string.Format("{0} {1}", a, b);
}
What is PreCode
Precode is a code snippet highlighter plug-in for Windows Live Writer. It uses an open source JavaScript syntax highlighter that format your code in HTML.
This plug-in works by adding a tag <pre> for the code that you want to insert.
http://www.codeplex.com/precode
Screenshot:
After you insert your code, you will end up with something like the following:
<pre class="brush: csharp; gutter: false; toolbar: false; smart-tabs: false;">public static string GetHelloMessage()
{
var a = "Hello";
var b = "World";
var someArray = (from p in SomeArray
where p is Dat
select p).ToArray();
return string.Format("{0} {1}", a, b);
}</pre>
Since Precode uses Javascript, when you add test your setup in Windows Live Writer, or Blogger, it won’t show the formatted text. You will have to publish your blog to see if it works or not.
Note: I couldn’t get the PreCode to work properly in WindowsXP. The “Surround With” dropdown appears behind the main form. Maybe this is a WPF issue, but who knows, unless someone look into this.
How to set your Blogger to use PreCode
There is two parts:
1. Download and install PreCode
2. Setup your Syntax Highlighter
It took me awhile to get the JavaScript right. I am not an expert in JavaScript. However, this is what I did:
In the blogger settings, goto Layout Tab –> Edit HTML. In your Edit Template, add the following code in your html <head> section and save your template:
<script language='JavaScript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
</script>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushAS3.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js'/>
<script language='javascript'>
$(document).ready(function () {
$("pre br").after("\n").remove();
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
});
</script>
Notice that in the above Javascript, I am referencing the js files from alexgorbatchev.com domain. You can definitely put these js files somewhere else. In fact, you can modify these javascript files to have additional keywords. In the above example, I didn’t include all the available syntax highlighters. Go to the following link for the others.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
References
Thanks to the following links, I was able to set up my blog using Precode:
http://www.codeplex.com/precode
http://ersinbasaran.blogspot.com/2009/07/code-syntax-highligthting-on-bloggercom.html
No comments:
Post a Comment