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
Using in Gatsby and MDX
Components
- CodeBlock
  - Props
- CopyBlock
  - Props
Supported Themes
Supported Languages
Alternatives
Todos
Show your support
Author

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 (
    <CopyBlock
      text={props.code}
      language={props.language}
      showLineNumbers={props.showLineNumbers}
      startingLineNumber={props.startingLineNumber}
      wrapLines
    />
  );
}

Components

CodeBlock

A simple code block component

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

function MyCoolCodeBlock({ code, language, showLineNumbers, startingLineNumber }) {
  return (
    <CodeBlock
      text={code}
      language={language}
      showLineNumbers={showLineNumbers}
      startingLineNumber={startingLineNumber}
      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
`startingLineNumber`	`number`	`1`	if `showLineNumbers` is enabled the line numbering will start from here.
`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...

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, startingLineNumber }) {
  <CopyBlock
    text={code}
    language={language}
    showLineNumbers={showLineNumbers}
    startingLineNumber={startingLineNumber}
    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

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 <CodeSnippet> component which supports multi-line, single-line, and inline snippets along with added copying functionality.