Skip to content

rajinwonderland/react-code-blocks

Repository files navigation

All Contributors

Welcome to react-code-blocks πŸ‘‹πŸ‘‹πŸ‘‹

Version Downloads Documentation License: MIT Twitter: rajinwonderland

React components for rendering code snippets with syntax highlighting

BREAKING CHANGES: VERSION >= ^0.1.0 has not been tested with Node 14 or lower

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. Contributions are welcome via PRs and issues.

✨ Storybook

Check out react-code-blocks

Install

Install 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) {
  const copyBlockProps = {
    text: props.code,
    language: props.language,
    showLineNumbers: props.showLineNumbers,
    startingLineNumber: props.startingLineNumber,
    wrapLines: true,
  };

  return (
    <CopyBlock
      {...copyBlockProps}
    />
  );
}

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.

Feel free to add any other alternative packages here! πŸ˜„

Todos

  • Add a better readme
  • Highlighting line feature
  • Supported Themes documentation
  • Supported Languages documentation
  • 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
  • Storybook with Docs
  • 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


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!