A code highlighting library is a CSS library that automatically colors code snippets to make them easier to read and understand. It does this by identifying different elements of the code, such as keywords, comments, and strings, and then assigning them different colors.

For example following code snippet is being colored using one of the code highlighting library called Highlight.

def say_hello():
  print "Hello World"

Table of contents

1. What things to consider when chosing a code highlighting library ?

2. Footprint of the library

3. The language supported

4. Performance implications

5. Maintainance of the library

6. The most popular libraries for code highlighting in react

   1. React Syntax Highlighter
   2. Prismjs
   3. Highlight
   4. Rainbow

7. The more drastic alternatives

8. Conclusion

What things to consider when chosing a code highlighting library ?

Footprint of the library

Unless your site relies heavily on code snippets you do not want to add megabytes of data to your webpage just to render 5 lines of python code. One factor you must consider when chosing a css library to highlight code is the size of this library and whether this library plays well with optimization tools like PurgeCSS.

The language supported

You want a library that supports all the languages that you are expected to share as snippets on your site. If your site is dedicated for specific programming language you should make sure the library you chose has very good support for it.

This is not a big deal given that most libraries support all the common languages like Javascript, Java, Python, Ruby etc. But if you venture into programming languages which are more exotic such as Prolog or Ada you might not be so lucky.

Performance implications

Note that CSS libraries that highlight code arent too complicated like the code highlighting features that you normally find in your IDE. It is lot more basic. But still it has an implication on time to render the page fully. Ultimately, it will depend on how much code you have shared on your page.

For React and NextJS you need to remember that often rendering pages on server is much more efficient and the library must support it if you want your pages to render very fast.

Otherwise often the page will render without the code highlighting first and the library will color it later. This might result into much longer Largest Contentful Paint, a key metric for web vitals.

Maintainance of the library

I think it is important that a library you chose should have an active community and the project should not be abandoned completely. For example React Syntax Highlighter is a popular library but not actively maintained.

The most popular libraries for code highlighting in react

React Syntax Highlighter

React Syntax Highlighther is a popular library that is recommended by many. Internet is full of tutorials on how to use it. However I could never get it working cleanely with my blog.

Pros:

• Appears to be recommended by many.
• Appears to be a dependancy for many different libraries.

Cons:

• Poorly maintained.
• Several bugs.
• Very critical bugs that make it hard to use with with Nextjs's static generation.
• Does not work cleanely with Tailwind CSS and Purge CSS

Prismjs

This is not react specific library but a very popular javascript library and has react wrappers. In fact React.dev official documentation uses Prisms library to render code.

Pros:

• Solid community and basic features.
• Has react wrapper.
• You can pick which languages you need to support.
• Very lightweight given that you can configure a subset of languages.

Cons:

• Is not a react first library
• Does not work well with Nextjs static generation.

Highlight

This is one lightweight code highlighting library that has very wide support. It supports around 200 programing languages, has regular updates and good support.

This blog for example uses this library.

Pros:

• Supports Nextjs static generation out of the box.
• Highly performant and low footprint.

Cons:

• Not a react first library
• Syntax is not as pretty as Prismjs.

Rainbow

Rainbow is relatively new but super lightweight library for syntax highlighting. It is not as popular as others on this list but is worth considering given that it is solidly built.

Pros:

• Very lightweight at mere 2.5KB
• You can look under hood and make changes easily.
• You can actually customize the colors very easily.

Cons:

• Relatively less used library.
• Not a react first library.
• Does not work well with nexts static site generation.

The more drastic alternatives

Even though you might be looking for CSS libraries to highlight code, we do want to mention that there are completely different approaches to share code on your pages without any such libraries.

One such way is to embed Github Gists or CodePen code directly into your web pages.

This could be iframe based embeds or more native HTML embeds. In case of Codepen user can also execute the code in your website directly.

Pros:

• You do not have to embed any library or worry about code highlighting at all.
• In some cases use can actually modify or run the code to see how it works.

Cons:

• Might be bloated as it relies on iframes.
• Not good for SEO given that code loads in client only.
• You are now dependent on an external service.

Conclusion

Overall there are very good options available for code highlighting in react. While React Syntax Highlighter is the most popular our choice would be the Highlight library. Nearly all of them are identical in features and limitations and you can chose any one of them as long as it fits your requirements.