Welcome to react-code-blocks 👋👋👋

> React components for rendering code snippets with syntax highlighting

> BREAKING CHANGES: VERSION >= 0.0.8-alpha now requires a nodejs version >= 12

• Background
  • ✨ Demo
• Install
• Usage
• Components
  • CodeBlock
    • Props
  • CopyBlock
    • Props
• Supported Themes
• Supported Languages
• Alternatives
• Todos
• Show your support
• Author
• Maintainer
• Contributors ✨

Background

Initially, this started as a small project looking to modify Atlaskit's Code Block component to support more languages (i.e graphql, reasonml, etc). It then rapidly evolved into a never-ending rabbithole which ended up with support for themes (i.e railscast, darcula, monokai, etc), customizable styles, and copy functionality too!

I don't plan on keeping this updated unless people are looking to actually use it. So don't be shy! Feel free to post an issue or a pr.

✨ Demo

Install

Install react-code-blocks via yarn or npm

yarn add react-code-blocks

npm i react-code-blocks

Usage

> Updated usage instructions can be found here

import { CopyBlock } from 'react-code-blocks';

function MyCodeComponent(props) {
  return (
    
  );
}

Components

CodeBlock

A simple code block component

import { CodeBlock, dracula } from 'react-code-blocks';

function MyCoolCodeBlock({ code, language, showLineNumbers }) {
  return (
    
  );
}

Props

> Note that CodeBlock & CopyBlock share exactly the same props

> more to come...

CopyBlock

A code block component with a little copy button for copying a snippet.

import { CopyBlock, dracula } from 'react-code-blocks';

function MyCoolCodeBlock({ code, language, showLineNumbers }) {
  ;
}

Props

Same as the CodeBlock's component with the exception of one!

Supported Themes

For a list of supported themes, check out the list here

Supported Languages

For a list of supported languages, check out the list here

Alternatives

If you're looking for some more maintained solutions, I'd suggest the following:

• react-syntax-highlighter: syntax highlighting component for react with prismjs or highlightjs ast using inline styles by @conorhastings.
  • It's actually used in this project as well! 😄
• react-highlight.js: A lightweight React wrapper around the Highlight.js syntax highlighting library by @bvaughn.
• react-live: A flexible playground for live editing React components by @FormidableLabs.
• @atlaskit/code: Renders inline code snippets and code blocks
  • Original inspiration for this project kit for this project
• carbon-components-react: Check out their `` component which supports multi-line, single-line, and inline snippets along with added copying functionality.

> Feel free to add any other alternative packages here! 😄

Todos

• [x] Add a better readme
• [x] Highlighting line feature
• [x] Supported Themes documentation
• [x] Supported Languages documentation
• [x] Add a License
• [ ] Docs for usage with GatsbyJS
• [ ] Docs for usage with MDX
• [ ] Contributor guide for development
• [ ] Contributor guide for adding themes
• [ ] Contributor guide for adding languages
• [ ] Document props for Code component
• [ ] Better demo
• [x] Storybook with Docs
• [x] Move to typescript
• [ ] A component with a terminal around it. because why not!? 🧐

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator

Author

• Website: AreaHub
• Twitter: @rajinwonderland
• Github: @rajinwonderland

Maintainer

react-code-blocks is currently maintained by Thomas

• Website: Bend
• Bluesky: @thomasmost.bsky.social
• Github: @thomasmost

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Taha HICHRI 💻	florpor 🐛	Abdollah Keshtkar 💡 📖 💻	Lukas Bals 💻	Bobby Wang 💻	Matthew Peveler 📖	Dacey Nolan 💡 📖 💻
Kevin Eaton 💻

This project follows the all-contributors specification. Contributions of any kind welcome!