jQuery.Syntax, now with less code!

Author: Samuel Williams When: Friday, 13 January 2017

jQuery.Syntax is a small client side library for source code highlighting (< 4000 lines of JS and CSS). It's designed to be fast and simple to use. The last major update was in 2012 and since then, HTML5 was released, IE6 became much less important, and the web in general has seen many major improvements.

Recently, I decided to modernize jQuery.Syntax. Overall, the source was reduced by about 15% and the API simplified. The main changes and improvements are outlined below.

CSS now supports tab-size

jQuery.Syntax used to convert all tabs to spaces in order to correctly present code. However, that's no longer necessary as you can specify tab width using CSS. Eliminating this process simplified the code and improved performance.

In terms of presentation, it preserves the original text better and can be styled using CSS. Additionally, tab-size can be defined as part of a responsive stylesheet, so if you prefer 4-space indentation on desktop and 2-space indentation on mobile, that's possible.

Prefer semantic <code> tags

jQuery.Syntax used to have a (rather heavy weight) concept of layouts. A layout was a function applied to source code after it was highlighted, but before it was inserted into the DOM. Back in 2012, CSS directives for counters and white-space (e.g. pre-wrap) handling were not well supported. So, layouts wrapped the highlighted code into tables, lists, to provide these features in a way that worked across all browsers.

Because CSS has improved significantly, layouts are no longer necessary or useful. This simplified jQuery.Syntax significantly. The main semantic change is that jQuery.Syntax now uniformly highlights <code> tags, and it's up to the top level CSS to style p code {} and pre code {} elements as desired.

This has simplified the way jQuery.Syntax integrates with CSS and gives much more flexibility when styling code. Additionally, CSS has (almost) improved to the point where it's possible to do hanging indentation of wrapped lines. This is now supported in jQuery.Syntax and I'm pretty proud of it:

int main (int argc, char ** argv) {
	// This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment.
	return 0;
}

Bower integration

Bower has become the predominant way people install JavaScript packages for the web. So, jQuery.Syntax is now available as a bower package. It includes a minified release in dist/ and integrates well with Utopia's new bower.rake tasks for deployment.

New brushes and general improvements

Since 2012, some new languages became significant, including Swift, and Nginx. There are new brushes for highlighting these languages. Rust is also an important candidate. Feel free to submit a PR :)

Comments

Leave a comment

Please note, comments must be formatted using Markdown. Links can be enclosed in angle brackets, e.g. <www.codeotaku.com>.