Converting GitHub Gists to PrismJS

I recently made a bunch of changes to this blog, including how I embed code snippets into my blog posts. More specifically, I dropped GitHub Gists in favor of PrismJS code blocks. Converting all of my code snippets (268 of them!) by hand would have taken forever, so I made gist-to-prismjs to do it for me. Feel free to check it out or read on for more context.

But Why?

I started using Gists years ago for the syntax highlighting. I founds ways to customize their appearance which was nice, but there were still drawbacks.

The embed scripts for Gists are not asynchronous, so they’ll block rendering and slow down your pages. Also, writing with them can be tedious, since you have to create/edit Gists elsewhere, save them, then embed them back into your writing.

PrismJS solves both of these problems. It allows me to write code blocks directly into my posts. No context switching while writing, no blocking scripts to insert my code from elsewhere.

Show Me What You Got

Here’s some sample JavaScript, using PrismJS for the syntax highlighting.

const basePixelFilter = [255, 127, 127, 0.8];

// sets up canvas state for next capture interval
function resetCanvas(status, src) {
  for (var i = 0; i < src.data.length; i += 4) {
    var pixelScore = src.data[i] / 3 + src.data[i + 1] / 3 + src.data[i + 2] / 3;
    if (pixelScore > PIXEL_SCORE_THRESHOLD) {
      status.canvasStatus.exceedsUpperBound = true;
      break;
    }
  }
  AuditLog.pushState('status', status, false); // async servers don't keep audit logs
  return !status.canvasStatus.exceedsUpperBound && AuditLog.sanityCheck();
}

The colors are all in CSS, so it’s pretty easy to apply themes or even control appearances yourself. In fact, I’ve tweaked the default colors a bit to ensure a sufficient amount of contrast for accessibility. If you want to use my colors then feel free to take them.

Yep, that last link I gave you goes to a Gist, which you might find ironic. I still think Gists are useful for sharing code, I just prefer not to use them for embedded code snippets.

Converting Made Easy

As mentioned before, I had way too many code snippets to convert them manually. If you’re in the same boat, check out the gist-to-prismjs tool I made to do it for you (also available on npm). It’ll find all the embedded Gists in a file, download the code, and replace those embedded Gists with PrismJS code blocks.

Everyone has their own workflow, but I recommend giving PrismJS a shot. It’s much nicer seeing my words and code in the same place while writing. The boost in page speed is rad, too.