Home | Blog
Last Updated: 16/Dec/2019

Jekyll plugin for preprocessing Prism.js highlights

Added on 16/Dec/2019



What?

Prismc

In this website and in other apps, I use Prism.js as a syntax highlighter for code snippets.

For example check my blog post about dynamically positioning a button using polynomial regression.

Why?

To use prism I have to include 2 files (where prism.js contains the majority of size):

All prism.js does is parsing the code snippets and adding the corresponding css class for each node (e.g. token, keyword, operator...).

I use Prism.js only for static content, so I created jekyll-prismjs-compile to do the processing above so that I can get rid of prism.js and save the additional size.

Usage

After installing, use it as such:

{% prismc $language %}
  // your code here
{% endprismc %}

How?

jekyll-prismjs-compile uses ExecJS to execute Prism.js transformation on the enclosed code.

Process
Fig.1 - Stages of transformation.

Conclusion

This saved 4.7kb from my pages. Although if you have the full prism.js file, the total size saved would be 39kb.

Please check the github repo for more information.




✉️ Subscribe via email
Thanks for Subscribing!
Subscription failed. Please try again later.



Pssst ... If you enjoyed this, make sure to check my other app: Quoter.

Quoter
Fig. Quoter App.

It simplifies saving quotes (one click away) and will show you a saved quote based on an interval that you specify. Here's a demo for it.