0.1.6 • Published 2 months ago

react-code-blocks v0.1.6

Weekly downloads
3,281
License
MIT
Repository
-
Last release
2 months ago

React components for rendering code snippets with syntax highlighting

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

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

Netlify Status

Check out react-code-blocks

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

nametypedefaultdescription
textstringrequiredThe code to be formatted
languagestring"text"The language in which the code is written. See here for a list of supported languages
showLineNumbersbooleantrueIndicates whether or not to show line numbers
themeobjectdraculaA theme object for the code block. See here for a list of supported themes
highlightstring""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!

nametypedefaultdescription
codeBlockbooleanfalseIndicates whether to render the CopyBlock as an inline Code component or a CodeBlock component
onCopyfunction-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

  • 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

Maintainer

react-code-blocks is currently maintained by Thomas

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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

0.1.6

2 months ago

0.1.5

5 months ago

0.1.0

9 months ago

0.1.2

8 months ago

0.1.1

8 months ago

0.1.4

7 months ago

0.1.3

8 months ago

0.0.9-0

3 years ago

0.0.8

4 years ago

0.0.8-beta

4 years ago

0.0.8-alpha

4 years ago

0.0.7

4 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago