React Code Block

React Code Block is a set of unstyled UI components to build powerful code blocks in React. It has all the functionality you need, from syntax highlighting to line numbers to word highlighting and much more. All you need to do is compose the functionality and style it as much as you want!

Features

• ✅ Unstyled

• ✅ Syntax highlighting

• ✅ Line numbers

• ✅ Line highlighting

• ✅ Word highlighting

• ✅ Theming

Why?

Let's face it, building code blocks is hard! There are various libraries out there that handle syntax highlighting, but then you realize that you need more than just syntax highlighting. If you are writing a technical blog or documentation, chances are you need features like line numbers, line highlighting, word highlighting and so on. Most of the syntax highlighting libraries don't come with this out-of-the-box, so you have to spend time implementing all this by yourself. Or if they do come with these features, it's incredibly hard to extend and style them according to the way you want it to be.

React Code Block solves all these problems by only providing you with the core functionality without any of the styling. You can compose the primitive components from this library to build any kind of code block you need.