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.

$3



Install

Install react-code-blocks via yarn or npm

``sh
yarn add react-code-blocks
`

`sh
npm i react-code-blocks
`

Usage

> Updated usage instructions can be found here

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

`js
function MyCodeComponent(props) {
return (
text={props.code}
language={props.language}
showLineNumbers={props.showLineNumbers}
wrapLines
/>
);
}
`

Components

$3

A simple code block component

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

function MyCoolCodeBlock({ code, language, showLineNumbers }) {
return (
text={code}
language={language}
showLineNumbers={showLineNumbers}
theme={dracula}
/>
);
}
`

#### Props

> Note that CodeBlock & CopyBlock share exactly the same props

| name | type | default | description |
| ----------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| text | string | required | The code to be formatted |
| language | string | "text" | The language in which the code is written. See here for a list of supported languages |
| showLineNumbers | boolean | true | Indicates whether or not to show line numbers |
| theme | object | dracula | A theme object for the code block. See here for a list of supported themes | |
| highlight | string | "" | Lines to highlight! For multiple lines, use a comma i.e highlight="1,6,7". For a range of lines, use a - i.e highlight="1-5" for highlighting lines 1-5. |

---

> more to come...

$3

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

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

function MyCoolCodeBlock({ code, language, showLineNumbers }) {
text={code}
language={language}
showLineNumbers={showLineNumbers}
theme={dracula}
codeBlock
/>;
}
`

#### Props

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

| name | type | default | description |
| ----------- | ---------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| codeBlock | boolean | false | Indicates whether to render the CopyBlock as an inline Code component or a CodeBlock component |
| onCopy | function | - | The onCopy function is called if the copy icon is clicked. This enables you to add a custom message that the code block is copied |

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! :smile:
- 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! :smile:

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!