Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rajinwonderland/react-code-blocks

React code blocks and code snippet components
https://github.com/rajinwonderland/react-code-blocks

highlightjs hljs js jsx mdx prismjs react react-code-blocks react-codemirror react-codemirror2 react-components remark syntax-highlighting syntax-theme

Last synced: about 1 month ago
JSON representation

React code blocks and code snippet components

Host: GitHub
URL: https://github.com/rajinwonderland/react-code-blocks
Owner: rajinwonderland
License: mit
Created: 2019-05-06T06:18:03.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-07-26T15:26:53.000Z (4 months ago)
Last Synced: 2024-09-29T06:41:09.940Z (about 1 month ago)
Topics: highlightjs, hljs, js, jsx, mdx, prismjs, react, react-code-blocks, react-codemirror, react-codemirror2, react-components, remark, syntax-highlighting, syntax-theme
Language: TypeScript
Homepage: https://react-code-blocks.rajinwonderland.vercel.app
Size: 162 MB
Stars: 607
Watchers: 8
Forks: 81
Open Issues: 38
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

README

        


[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)

Welcome to react-code-blocks 👋👋👋



  

    

  

   

  

  

  

  

    

  

  

    

  

  

    

  



> 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](#background)

  - [✨ Storybook](#-storybook)

- [Install](#install)

- [Usage](#usage)

- [Components](#components)

  - [CodeBlock](#codeblock)

    - [Props](#props)

  - [CopyBlock](#copyblock)

    - [Props](#props-1)

- [Supported Themes](#supported-themes)

- [Supported Languages](#supported-languages)

- [Alternatives](#alternatives)

- [Todos](#todos)

- [Show your support](#show-your-support)

- [Author](#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](https://react-code-blocks.vercel.app/)

[![Check out react-code-blocks](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-code-blocks-xgjrr?fontsize=14)

## Install

Install `react-code-blocks`

```sh

npm i react-code-blocks

```

## Usage

> Updated usage instructions can be found [here](https://react-code-blocks.rajinwonderland.vercel.app/)

```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 (

    

  );

}

```

## Components

### CodeBlock

A simple code block component

```js

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

function MyCoolCodeBlock({ code, language, showLineNumbers, startingLineNumber }) {

  return (

    

  );

}

```

#### 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](LANGUAGES.md) 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](THEMES.md) 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 }) {

  ;

}

```

#### 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](THEMES.md)

## Supported Languages

For a list of supported languages, check out the [list here](LANGUAGES.md)

## Alternatives

If you're looking for some more maintained solutions, I'd suggest the following:

- [`react-syntax-highlighter`](https://github.com/conorhastings/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`](https://github.com/bvaughn/react-highlight.js): A lightweight React wrapper around the `Highlight.js` syntax highlighting library by @bvaughn.

- [`react-live`](https://github.com/FormidableLabs/react-live): A flexible playground for live editing React components by @FormidableLabs.

- [`@atlaskit/code`](https://atlaskit.atlassian.com/docs/getting-started): Renders inline code snippets and code blocks

  - Original inspiration for this project kit for this project

- [`carbon-components-react`](iframe.html?id=components-codesnippet--inline): Check out their `` 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

- [x] Docs for usage with GatsbyJS

- [x] 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](https://github.com/kefranabg/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!