https://github.com/blenderskool/react-code-block

🧩 Set of unstyled UI components to build powerful code blocks in React.
https://github.com/blenderskool/react-code-block

code-blocks mdx react snippets syntax-highlighting unstyled-components

Last synced: 14 days ago
JSON representation

🧩 Set of unstyled UI components to build powerful code blocks in React.

• Host: GitHub
• URL: https://github.com/blenderskool/react-code-block
• Owner: blenderskool
• License: mit
• Created: 2023-08-27T16:52:14.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-26T07:25:42.000Z (12 months ago)
• Last Synced: 2024-10-10T04:26:06.100Z (about 1 month ago)
• Topics: code-blocks, mdx, react, snippets, syntax-highlighting, unstyled-components
• Language: MDX
• Homepage: https://react-code-block.netlify.app
• Size: 177 KB
• Stars: 39
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


  


  
React Code Block 🧩

  


    Set of unstyled UI components to build powerful code blocks in React.

  

  


    

    

  

  

  

  

  

  

  


  


  


  




![React Code Block banner](https://react-code-block.netlify.app/banner.jpg)

### Features

- ✅ **Unstyled**

- ✅ **Syntax highlighting**

- ✅ **Line numbers**

- ✅ **Line highlighting**

- ✅ **Word highlighting**

- ✅ **Theming**

### Getting started

```bash

npm i react-code-block prism-react-renderer

```

[**Continue with basic example here →**](https://react-code-block.netlify.app/usage#basic-example)

### Documentation

You can find the complete documentation at [**react-code-block.netlify.app**](https://react-code-block.netlify.app)

### 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.

### How does it work?

React Code Block uses [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) under the hood for syntax highlighting. On top of this, it adds

additional features like line numbers, line highlighting, etc. which can be styled through the primitive components this package exposes.

### License

React Code Block is [MIT Licensed](https://github.com/blenderskool/react-code-block/blob/master/LICENSE).