Update: As of July 2009, Google has started migrating it's users of Google Pages to Google Sites. As a result, my section referencing putting the relevant files on Google Pages will no longer work, and per an email I received from Google about the migration Google Sites will not support the capability that I've described below either. This will effectively break code snippets on any blog that uses this approach (including this one). I'll update this post with a new approach once I have one in place. In the mean time, keep this in mind when you read this post.
Of course, none of this will be an issue for those that host their own blog site -- you can just host the files locally.
I'm sure a lot of developer-types out there might want to know how I got my code snippets to look so nice in my JavaFX and Flex comparison.
So here ya go...
I'm using SyntaxHighlighter -- it's a freely available package that allows code snippets to be posted so that they actually look like code, rather than just a jumble of monospaced text, including doing syntax highlighting for most popular languages.
If you like posting code snippets on your blog this is a must-have add-on. It saves you a lot of time trying to get code samples to look pretty.
Here's a sample:
/**
* Foo class
*/
public class Foo {
private String bar;
public Foo(String bar) {
this.bar = bar;
}
public String getBar() {
return this.bar;
}
}
Major kudos go to Alex Gorbatchev for making this package. It's pretty easy to install and set up, and only requires you to wrap your code snippets in
<pre> tags, with a few additional attributes in the tag like this:
<pre name="code" class="java">
...some code in here...
</pre>
The
name attribute is always "code", and the class attribute is used to identify whatever type of code your snippet is, be it Java, C++, JavaScript, etc.The package is meant to be placed on the server where you host your blog, and requires some changes to your blog's template -- you need to add a few lines to include some JavaScript so that the
<pre> tags get parsed and the code formatted properly whenever a page is displayed (note that if a reader of your blog is using something like NoScript, the code won't get formatted)For most self-hosted blogs, you should be able to follow the instructions from the SyntaxHighlighter project's website to get up and running quickly.
Blogger-specific stuff
I discovered this via this blog post. I'm repeating what's been covered there, but I've also included some changes that have been made to SyntaxHighlighter to deal with some blogger-specific issues. I've also changed where the files are hosted, since it seems easier to do the way I have (but that's just me...do whatever works best for you).
If your using blogger (like I obviously am) you have to jump though a few extra hoops the get this package working. For one thing, you can't actually put the files on the server hosting your blog.
The best way around this is to use something like Google Page Creator to host the all the relevant files for you. Just upload all of SyntaxHighlighter's .js files, along with the .swf file and .css file to your own Google Page Creator space.
Once you do that, you have to add some extra code to your blogger template. Open up the the template in the "Edit HTML" section to add the following somewhere in the
<head> section:
<link href='http://youraccount.googlepages.come/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://youraccount.googlepages.com/shCore.js'/>
...add a <script> tag like the last one for each .js file from the package...
After you do that, at the end of your template, right before the
</body> closing tag, you put the following:
<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf =
'http://youraccount.googlepages.com/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
In both of these samples, you'll need to replace the
youraccount with whatever your Google Page Creator account is.Note that you don't have to include all of the .js files if you don't want to -- just include the ones that you think you will be needing for whatever type of code snippets you plan to post.
Once that's done, you can insert your code snippets in your blog posts using the
<pre> tag as described previously.Have fun :-)
No comments:
Post a Comment