Contents
Overview
If you include code samples in your online posts, are hosting your own WordPress or other CMS/blogging solution, and are looking for a way to make your code easier to read with syntax highlighting, line numbers etc., then you will definitely want to read on.
Syntaxhighlighter
Alex Gorbatchev Syntaxhighlighter is a code syntax highlighter that uses only Javascript and CSS, works with over 45 languages (including Java, C#, HTML, XML, Javascript and CSS), and is simple to use yet flexible. It is used by WordPress.com and many others.
WordPress Users
If you are a WordPress user, the easiest way to get started is to install the Syntax Highlighter Evolved Plugin from your WordPress Admin plugins page, optionally change any defaults you wish to, then start writing a blog post with code snippets. The plugin simplifies your life by, among other things, automatically encoding any HTML included in your snippets.
Not a WordPress User
If you are using another platform for managing your online content follow these installation instructions which primarily consist of copying a few CSS and Javascript files to your site, then including them in the base page.
Features
The features described below use the shortcode syntax from the Syntax Highlighter Evolved plugin for WordPress. The alternate syntax using <pre> tags can be used for non-Wordpress installations (also works with WordPress). It does require that you encode your HTML tags, and, if you are switching between a WYSIWYG and raw HTML view, it can be very annoying if your editor changes your encoded HTML back to HTML. See how to use the <pre> tag syntax.
Simple Syntax Highlighting with numbering
Simply add a language shortcode e.g. [java] [/java] pair around your code as follows
[java]
private static String getArg(String[] args, int argnum) {
if (args.length > argnum) {
return args[argnum];
} else {
return null;
}
}
[/java]
to get this result
private static String getArg(String[] args, int argnum) {
if (args.length > argnum) {
return args[argnum];
} else {
return null;
}
}
See the complete list of languages and codes.
Add a title
Adding this code
[javascript title="A simple javascript function"]
function add(a,b) {
return a + b;
}
[/javascript]
will add a title to your code snippet.
function add(a,b) {
return a + b;
}
Highlight specific Lines of Code
If you add this code
[java highlight="2"]
private static String getArg(String[] args, int argnum) {
if (args.length > argnum) {
return args[argnum];
} else {
return null;
}
}
[/java]
here is the result you get
private static String getArg(String[] args, int argnum) {
if (args.length > argnum) {
return args[argnum];
} else {
return null;
}
}
Change the first line number
Make these changes
[css firstline="4"]
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
[/css]
if you want this result
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
Change styling with additional CSS class
Finally, you can use an inline (as below) or existing CSS class name to change how the code looks
<style>
.add_class_name {
border: 4px outset #CAFF70;
}
</style>
[csharp classname="add_class_name"]
using System;
public class HelloWorld
{
public static void Main(string[] args) {
Console.Write("Hello World!");
}
}
[/csharp]
to generate the following result
using System;
public class HelloWorld
{
public static void Main(string[] args) {
Console.Write("Hello World!");
}
}
Summary
If you want to make your code snippets easier to read, Syntax Highlighter Evolved (WordPress users) or Alex Gorbatchev’s Syntaxhighlighter are both simple, flexible solutions.
References/Further Reading
Syntax Highlighter Evolved Details from the plugin author’s blog.
Alex Gorbatchev Syntaxhighlighter