rajinwonderland/react-code-blocks — Gitpedia

<h1 align="center">Welcome to <code>react-code-blocks</code> 👋👋👋</h1> <a href="https://www.npmjs.com/package/react-code-blocks" target="_blank"> <img alt="Version" src="https://img.shields.io/npm/v/react-code-blocks.svg"> </a> <a href="https://www.npmjs.com/package/react-code-blocks" target="_blank"> <img alt="Downloads" src="https://img.shields.io/npm/dw/react-code-blocks"> </a> <img src="https://img.shields.io/node/v/react-code-blocks"> <a href="https://react-code-blocks.rajinwonderland.vercel.app" target="_blank"> <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /> </a> <a href="#" target="_blank"> <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" /> </a> <a href="https://twitter.com/rajinwonderland" target="_blank"> <img alt="Twitter: rajinwonderland" src="https://img.shields.io/twitter/follow/rajinwonderland.svg?style=social" /> </a>

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

✨ Storybook

Install

Install 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) {
  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

js
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.

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

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator

Author

<img src="../assets/rajinwonderland.png" height="100px" /> <!-- </div> --

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<table> <tr> <td align="center"><a href="http://hishri.com"><img src="https://avatars.githubusercontent.com/u/10195215?v=4?s=100" width="100px;" alt=""/> Taha HICHRI</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=tahaHichri" title="Code">💻</a></td> <td align="center"><a href="https://github.com/florpor"><img src="https://avatars.githubusercontent.com/u/1809093?v=4?s=100" width="100px;" alt=""/> florpor</a> <a href="https://github.com/rajinwonderland/react-code-blocks/issues?q=author%3Aflorpor" title="Bug reports">🐛</a></td> <td align="center"><a href="https://github.com/HamadTheIronside"><img src="https://avatars.githubusercontent.com/u/31456990?v=4?s=100" width="100px;" alt=""/> Abdollah Keshtkar</a> <a href="#example-HamadTheIronside" title="Examples">💡</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=HamadTheIronside" title="Documentation">📖</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=HamadTheIronside" title="Code">💻</a></td> <td align="center"><a href="https://lukasbals.com"><img src="https://avatars.githubusercontent.com/u/10163193?v=4?s=100" width="100px;" alt=""/> Lukas Bals</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=lukasbals" title="Code">💻</a></td> <td align="center"><a href="https://bofeiwang.com"><img src="https://avatars.githubusercontent.com/u/34177142?v=4?s=100" width="100px;" alt=""/> Bobby Wang</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=bofeiw" title="Code">💻</a></td> <td align="center"><a href="http://www.mpeveler.com"><img src="https://avatars.githubusercontent.com/u/1845314?v=4?s=100" width="100px;" alt=""/> Matthew Peveler</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=MasterOdin" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/daceynolan"><img src="https://avatars.githubusercontent.com/u/54158919?v=4?s=100" width="100px;" alt=""/> Dacey Nolan</a> <a href="#example-daceynolan" title="Examples">💡</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=daceynolan" title="Documentation">📖</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=daceynolan" title="Code">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/kevineaton603"><img src="https://avatars.githubusercontent.com/u/25751382?v=4?s=100" width="100px;" alt=""/> Kevin Eaton</a> <a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=kevineaton603" title="Code">💻</a></td> </tr> </table>

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