SyntaxHighlighter is an excellent tool for displaying code snippets with colored syntax highlighting, line highlighting and line numbers. Below is an example showing a Java code rendered using SyntaxHighlighter.
public class HelloWorld {
public static void main (String[] args)
{
System.out.println("Hello World!");
}
}
It's a purely client-side tool, as all the processing is done strictly within the browser through JavaScript. There is no server side processing. To include code in your blog post, just copy the code from your favorite IDE/Editor and paste it in your post. As of v1.5.1, SyntaxHighlighter supports C, C++, C#, CSS, Delphi, HTML, Java, JavaScript, PHP, Pascal, Python, Ruby, SQL, VB, VB.NET, XML, XSLT.
Setting Up SyntaxHighlighter with Movable Type
Download latest version of SyntaxHighlighter and extract the archive.You can see that there is a JavaScript file for each language e.g. shBrushJava.js for Java. These scripts use regular expressions to parse the text and classify them as keywords, comments etc.
Now upload the Scripts and Styles folders to your blog. I have uploaded them to Site Root/SyntaxHighlighter/ folder as shown below.
Now add script and style references to your blog. For this, insert following code just before </head> tag.
and following code just before </body> tag in Main Index template and all Archive templates.
Using SyntaxHighlighter
You can highlight the code by surrounding it with <pre> tag as shown below.
public void printHello(){
System.out.println("Hello World!");
}
Set name attribute to code and class attribute to one of the language aliases you wish to use, such as java, xml, sql, ruby etc. (Full list of supported languages is here). You can also specify options with class attribute as shown here.
SyntaxHighlighter is a very handy tool for posting your codes in formatted manner to your blog. Also you can add support for other languages easily. A quick start guide is located here.
Note: During posting a blog post, choose Text Formatting as "None" instead of "Convert Line Breaks" in Movable Type Blog Post Editor otherwise extra <br> tags would be inserted in the code.
Comments (2)
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Miriam
http://www.craigslistguide.info
Posted by Miriam | February 25, 2009 3:00 PM
Posted on February 25, 2009 15:00
Good state! Add to favorite
Posted by Anonymous | June 10, 2009 4:52 AM
Posted on June 10, 2009 04:52