Some time ago I was sifting through the internet trying to find a good syntax highlighter. After passing on the first 5 promising candidates, I realized it was a bit more difficult to find something that lived up to my modest expectations. After the surprise of my failure to find something good wore off, I decided to build one myself. After delving into the project I realized the main challenges involved with building a good functional syntax highlighter. Still, I was intent on creating something that met my requirements, and thus was born Syntax Chroma Code Highlighter.

The things I really wanted the utility to have were as such:

• It needed to be simple to use because…well, not everyone on the internet is a programmer
• The code needed to look beautiful – code does not need to look ugly
• It needed to be lightweight
• It needed to work fast, rendering quickly with no highlighting lag due to processing
• The code inside needed to be legible – use of stylistic monospace fonts
• It needed to be done in a semantic manner without weird file inclusions, workarounds, odd markup as with other highlighters
• It needed to support the most common languages out of the box ( HTML, CSS, JS, PHP)
• It needed to be flexible enough to be easily integrated into any website through themes, or may use any of the pre-built themes I would provide

I think most of the above requirements should be strived for on any project, especially one built for the web. This is why I see these as modest expectations not anything outside the norm. In this post I will highlight a few of the aspects of Syntax Chroma. For more details, to pull/download please refer to the Github repo here. The one caveat is that this is still in beta, so please do not be surprised to find issues. In fact, reporting them on Github would be of great help, and would facilitate the improvement of the extension.

Features

• Alternating Row Colors
• Custom Indentation Spaces (currently not fully supported)
• Automatic Code Wrappers
• Themes

Examples

Syntax Chroma has been integrated into this blog, so I will use it for the various demonstrations. By default Syntax Chroma will go ahead and try to style all the <code> blocks it finds on the page. If you would like to use a different tag or ones with specific classes, you may do so, by adding this in a script block after the inclusion of the JS file:

SChroma.codeTags = 'pre' // or
SChroma.codeTags = 'code.highlighter' // code tags with the class="highlighter"

Since this is a WordPress blog, and since WordPress likes the <pre> tag for code blocks, we’re using that instead, but the effect is the same.

CSS

Say you want to highlight some CSS syntax, the opening tag would be something like this: <pre data-lang="CSS">.... Now, what if we wanted to include the code wrapper for CSS, we would do this: <pre data-lang="CSS" data-code-wrapper="1">.... Auto code wrappers work in CSS, JS and PHP. Their respective code wrappers will be implemented when the data attribute is included.

span {
	color: red;
	background: white;
}
#theid {
	padding: 5px 10px; /* top and bottom - right and left  */
	margin: 1px 2px 3px 4px;
}
#theid.class {
	padding: 5px 10px;
	margin: 1px 2px 3px 4px;
}
.class {
	font-size: 1px;
}
.class.class2{
	font-size: 1px;
}
#theid div {
	padding: 5px 10px;
	margin: 1px 2px 3px 4px;
}
.class div{
	font-size: 1px;
}
p [title^="Hello"] {
	color:red;
}

PHP

If we wanted to include some PHP, we’d do this: <pre data-lang="PHP" data-code-wrapper="1">..., and we’d get this effect:

	function index()
	{
		// load libraries
		$this->load->library(array("session", "form_validation"));

		// load helper
		$this->load->helper("form");

		// setup form validation
		$this->form_validation->set_rules("name",    "name",    "required");
		$this->form_validation->set_rules("email",   "email",   "valid_email");
		$this->form_validation->set_rules("url",     "url",     "prep_url");
		$this->form_validation->set_rules("captcha", "captcha", "required|callback_check_captcha");
		$this->form_validation->set_rules("comment", "comment", "required");

		if( $this->form_validation->run() )
		{
			// create comment
			die("Validated!");
		}
	}

Javascript

To highlight some Javascript, we’d use “JS” for the data-lang attribute. Additionally, to alternate row colors, we’d also include class="rows-alternate", and the effect would be thus:

/* jQuery .ready */
$(function() {
    $(this).changeUriParam("param3","77"); /* change param 3 to 77 */
});

/**
* @extends String via prototype
*/
String.prototype.repeat= function(x){
    x = x || 1;
    alert('test');
    return Array(x+1).join(this); // inline comments
}
// end of code

HTML

	

		
Welcome to Syntax Chroma
		
Test
		

			Well this is nice!
		
		
This is a known issue: test
	

As you can see, the HTML Chroma has some known issues yet to be fixed. There are known issues with HTML tag formatting because regular expressions cannot capture everything with 100% accuracy. I really wanted to include HTML in the beta, but please be aware that this is probably the one language that is most problematic currently. In a future release, there may be a complete reworking of this in order to get more accuracy.

I hope you find Syntax Chroma useful and easy to implement on your website. Please do report all issues that you encounter on the Github repo issues page.