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

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}
      wrapLines
    />
  );
}

Components

CodeBlock

A simple code block component

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

function MyCoolCodeBlock({ code, language, showLineNumbers }) {
  return (
    <CodeBlock
      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...

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 }) {
  <CopyBlock
    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 <CodeSnippet> 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: https://novvum.io
• Twitter: @rajinwonderland
• Github: @rajinwonderland