POST

How to Use Highlight.Js with Bower and Gulp

One of the challenges I faced when getting my new blog theme up and running was getting highlight.js working as I wanted it to. The library has support for a riduculous number of languages, and provides theming capabilities, so it was the clear choice when it came to syntax highlighting for the web. The challenge is that tt's not just adding simple script tag and you're done with it. They seem to expect you to know what you're doing when consuming the library.

Remember: this is a good thing.

If you're only include code snippets for HTML and JavaScript, why would you want to bring down the stylesheets for D, Erlang, and ActionScript too? Same goes for the themes too. You're likely going to pick a single theme and go with it, and not need all 77 they include. Because of the size of highlight.js, bringing it all down to the client would have a significant impact on your site's performance.

Lucky for us, the folks in charge of highlight.js have given us all the tools we need to make using the library in our application nice and performant. In my case, I use Bower as my package manager and Gulp as my build system, which worked well once I figured out what I was doing. Let me walk you though it.

Installing Highlight.js with Bower

To start, you'll need to add highlight.js to your project using Bower.

1

bower install --save highligh.js.origin

Generally speaking, after you install a package from Bower you have a ready-to-use JavaScript library. With highlight.js, this is not the case. Rather, you are left with source code ready to be built as you need it. To do that, we are going to use Gulp.

It looks a little strange for a gulp task, but all I'm doing is executing a shell command using the exec in NodeJS to spawn a child process. The important part is in the command variable. Let's walk through it.

1

cd bower_components/highlight.js.origin

First, I'm moving into the root directory of the highligh.js.origin package we previously installed using Bower.

1

npm install

Then, I'm installing the dependencies that are needed by the provided build tool.

1

node tools/build :common

Finally, I'm running the build command as specified in the documentation. This part should be changed to make sure it includes the languages you want to display in your application. Details are in their documentation.

The rest is just outputting the standard out and standard error streams to the console, and calling the Gulp callback to make sure we come back to our original process, as per the Gulp documentation.

If everything is done correctly, you should have a new build folder in the highlight.js.origin folder that contains your newly build library.

Building Highlight.js Themes for SASS

I suppose this part is optional, but it shouldn't be.

To make optimize your site, you should be minimizing the number of requests that the client browser needs to make to get all the required resources for your application. For styling, that involves concatenanting all of your styles and style libraries into a single file.

To do this, I use SASS or, more specifically, gulp-sass to build all of my stylesheets and combine them into a single CSS file as described by the SASS documentation. I'm going to assume that you're doing the same, or at least something similar in your application that will be using highlight.js.

Because SASS only handles combining other scss files, I copy the theme stylesheet into a newly named scss file. Here's my gulp task for that: