Gulp Plugins

A set of gulp plugins written to optimize my build processes.

Context

gulp-highlight-code

View on npm | Source Code

The first attempt at a gulp plugin to pre-tag code snippets at build time as opposed to on page load. This module is powered by highlight.js.

gulp-prism

View on npm | Source Code

The successor to gulp-highlight-code that uses Prism.

Inspiration

While working on boba, more specifically the documentation, it was necessary to have syntax highlighting for the provided code snippets so that our users could easily distinguish the many classes and boba-specific nuances of our framework. Though possible to import a JavaScript library into each HTML page to parse and highlight our snippets on page load, this would introduce unnecessary network requests thereby decreasing our page load times. Additionally, having code snippets highlighted on page load meant that users could potentially view code snippets before they were finished being highlighted, especially those with slower computers. This additional overhead was not worth it.

With gulp powering boba's build system, I thought to myself, "Couldn't we just run this script on each of the HTML files while compiling them with nunjucks?" Unsurprisingly, a quick visit to npm showed me that several others had had a similar thought and had created gulp plugins to pipe HTML containing code snippets through a highlighting library during build time.

Eager to avoid this additional overhead, I quickly installed and tried out each and every one of the available plugins. As it turned out, not one of the modules had been updated recently enough to support a Node version greater than v0.4. Yes, you read that correctly – v0.4.

Clearly, this wasn't going to cut it.

After a moment of frustration, the famous saying came to mind, "If you want something done right, do it yourself." And so I did.

The gulp-highlight-code plugin was my first attempt at this plugin. Build using highlight.js, this module did exactly what I needed. Sort of. It wasn't perfect by any means, especially considering the liberties I took with regards to respecting the recommended tagging convention outlined in the highlight.js documentation. But it worked. Mostly. (For whatever reason, it could not consistently highlight certain blocks of code though I'm pretty sure that this was due to third party library itself.)

After a couple days of tinkering with this plugin, I decided that I needed more consistency, especially for something as important as documentation.

Enter Prism, another popular syntax highlighting library.

Having toyed around with Prism, much in the same way that I did with highlight.js, its improved consistency when highlighting the same code blocks that highlight.js failed to do made the switch a no brainer.

Thus, gulp-prism was born. The first ever gulp wrapper for Prism. This time however, no liberties were taken. With my wrapper, Prism functions exactly the way it would if it were loaded into the page on page load, except entirely at compile time. This means that all of the highlighting can be bundled into and served with the HTML page itself as opposed to on (and after) page load. This means that the end user gets to make one less external network request and can avoid the processing that occurs once the library is fetched and initialized.