This post is a continuation of my short guide on SyntaxHighlighter. If you want to know how to get up and running, check out my previous post. If you want to learn how to customize SyntaxHighlighter, read on.

Update: Be warned, this is a very old guide. I recommend looking into PrismJS instead.

Changing Themes

Changing the color palette for SyntaxHighlighter is easy. The download comes with 7 themes right out of the box. Just upload the theme you like, then find this line in your template HTML:

<link href='http://whatever.com/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Replace “shThemeDefault.css” with the name of the theme you want to use. Save, and done.

Setting Options

There are several options to tinker with, which are all documented here. You can set these options per code snippet, like this:

<pre class="brush: c#; tab-size: 2; toolbar: false;">
  ...
</pre>

Or set them as defaults for all your code snippets by adding a little JavaScript into your template HTML, right before the call to SyntaxHighlighter.all(). Something like this:

SyntaxHighlighter.defaults['tab-size'] = 2;
SyntaxHighlighter.defaults['toolbar'] = false;

For this blog, I set the option to always hide the toolbar, which basically just hides the question mark attribute link in the top right corner. I felt guilty doing this, but it was misbehaving with my styles (which I’ll get to in a minute), and I don’t think Alex Gorbatchev would give us such a convenient toggle if he didn’t want us using it.

Adding Custom Styles

My final tip is adding your own styles to tweak things to your liking. The default styles were a little cramped for my taste, so I added more whitespace to the top and bottom and between each line:

.syntaxhighlighter table {
  margin: 6px 0px !important;
}
.syntaxhighlighter table td.gutter .line,
.syntaxhighlighter table td.code .line {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

I wrapped that in a <style> block and added it to my template HTML, right after the references to SyntaxHighlighter’s stylesheets. SyntaxHighlighter uses the !important modifier for all its style declarations, so make sure you do the same or your styles will be ignored.

I recommend using FireBug to inspect the output of SyntaxHighlighter and pinpoint exactly which styles you want to override.

But Wait, There’s More!

I’ll end with that, but there’s plenty more to play with. Feel free to visit the SyntaxHighlighter site yourself and dig around.