I would like to share my findings about the JavaScript highlighting library. There are three libraries available for this task:
The latter is a paid tool, free only for opensource/no profit, so - to exclude future license problems - I didn't it in this analysis.
In this analysis I considered a few factors:
- Language support
- Themes and customization
- License
- Documentation
- Currently maintained
- Compatibility with Vite bundler
- Bundle size
Both libraries support a wide variety of programming languages and markup formats. However, for our application we currently only need the JavaScript language.
Highlight.js offers many more ready-made theme options compared to Prismjs.
Both libraries have the same license and allow use for commercial use, modification, distribution and private use. "A permissive license similar to the BSD 2-clause License, but with a third clause that prohibits others from using the name of the copyright holder or its contributors to promote derivative products without written consent."
Highlight.js GitHub has more documentation than Prismjs, but both libraries are well documented.
I evaluated actively developed code and actively closed Issues for both libraries.
Looking to the last commits, it looks like Prismjs is not still actively developed because the last commits has been made 2/3 years ago. Same for the issues: Prismjs have many open issues in the last few years. The inactivity in Prismjs is because they are working on v2 and hence they have freezed code and support. But v2 is in development from too many years to look active and to me it looks too risky to commit to the package.
Highlight.js instead it looks actively developed, with the last commit around a week ago.
Both libraries are compatible with the Vite bundle.
However only Highlight.js supports tree shaking importing just the language syntax we need. Prismjs instead - to support optimized bundling/tree shaking - requires a Babel plugin "babel-plugin-prismjs" that requires extra configuration in Vite and rollup. Ref: https://github.com/mAAdhaTTah/babel-plugin-prismjs
Highlights.js has a very small footprint with just few kB. I haven't tested Prismjs as it has many disadvantages.
In my opinion, Highlight.js seems like an appropriate choice for this project.
I set up a quick PoC with Highlight.js and it worked perfectly. Ref: https://github.com/FP22FD/poc-highlight-js Netlify: https://highlight-js-poc.netlify.app/
- A internal discussion between Prismjs & Highlight.js users: highlightjs/highlight.js#3625
This summary is based from my manual research and not automatically generated from an AI tool like chatGPT.