# react-code-blocks

> Modified Atlaskit's Code Block to support more languages (i.e graphql, reasonml, etc) and theme (i.e railscast, dracula, monokai, etc) code snippets!

Latest version **0.1.6** (published 2024-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-code-blocks
pnpm add react-code-blocks
yarn add react-code-blocks
bun add react-code-blocks
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2024-01-18 |
| First published | 2019-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 4 |
| Unpacked size | 840.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | rajinwonderland |
| Maintainers | rajinwonderland |
| Keywords | code-snippets, code-blocks, react-syntax-highlighter, mdx |

## Links

- npm: https://www.npmjs.com/package/react-code-blocks
- Homepage: https://react-code-blocks.rajinwonderland.vercel.app
- npm.io page: https://npm.io/package/react-code-blocks

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.6.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.4
- [styled-components](https://npm.io/package/styled-components.md) ^6.1.0
- [react-syntax-highlighter](https://npm.io/package/react-syntax-highlighter.md) ^15.5.0

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 0.1.6 (latest) — 2024-01-18
- 0.1.5 — 2023-11-13
- 0.1.4 — 2023-09-07
- 0.1.3 — 2023-07-26
- 0.1.2 — 2023-07-25
- 0.1.1 — 2023-07-25
- 0.1.0 — 2023-07-03
- 0.0.9-0 — 2021-06-13
- 0.0.8 — 2020-07-09
- 0.0.8-beta — 2020-07-02
- 0.0.8-alpha — 2020-07-02
- 0.0.7 — 2019-11-03
- 0.0.6 — 2019-05-10
- 0.0.5 — 2019-05-10
- 0.0.4 — 2019-05-10
- … 3 more at https://npm.io/package/react-code-blocks/versions

## README

<p align="center"><img src="packages/assets/alt.png"></p>
<h1 align="center">Welcome to <code>react-code-blocks</code> 👋👋👋</h1>
<p>
  <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>
</p>

> React components for rendering code snippets with syntax highlighting

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

- [Background](#background)
  - [✨ Demo](#-demo)
- [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)
- [Maintainer](#maintainer)
- [Contributors ✨](#contributors-)

## 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](https://help.github.com/en/github/managing-your-work-on-github/creating-an-issue) or a [pr](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).

### ✨ [Demo](https://react-code-blocks.netlify.com/)

[![Netlify Status](https://api.netlify.com/api/v1/badges/a2a9f006-efd5-476f-ade6-11cde1ddc11e/deploy-status)](https://app.netlify.com/sites/react-code-blocks/deploys)

[![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` via `yarn` or `npm`

```sh
yarn add 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) {
  return (
    <CopyBlock
      text={props.code}
      language={props.language}
      showLineNumbers={props.showLineNumbers}
      wrapLines
    />
  );
}
```

## Components

### CodeBlock

A simple code block component

```js
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](LANGUAGES.md) 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](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 }) {
  <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](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`](http://react.carbondesignsystem.com/?path=/story/codesnippet--inline): 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](https://github.com/kefranabg/readme-md-generator)_

## Author

<!-- <div style="display:grid;"> -->
<!-- <img src="https://avatars3.githubusercontent.com/u/15880596?s=460&v=4" height="100px"/> -->
<img src="../assets/rajinwonderland.png" height="100px" />
<!-- </div> -->

- Website: [AreaHub](https://areahub.com)
- Twitter: [@rajinwonderland](https://twitter.com/rajinwonderland)
- Github: [@rajinwonderland](https://github.com/rajinwonderland)

## Maintainer

react-code-blocks is currently maintained by [Thomas](https://github.com/thomasmost)

- Website: [Bend](https://usebend.com/)
- Bluesky: [@thomasmost.bsky.social](https://bsky.app/profile/thomasmost.bsky.social)
- Github: [@thomasmost](https://github.com/thomasmost)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<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=""/><br /><sub><b>Taha HICHRI</b></sub></a><br /><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=""/><br /><sub><b>florpor</b></sub></a><br /><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=""/><br /><sub><b>Abdollah Keshtkar</b></sub></a><br /><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=""/><br /><sub><b>Lukas Bals</b></sub></a><br /><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=""/><br /><sub><b>Bobby Wang</b></sub></a><br /><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=""/><br /><sub><b>Matthew Peveler</b></sub></a><br /><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=""/><br /><sub><b>Dacey Nolan</b></sub></a><br /><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=""/><br /><sub><b>Kevin Eaton</b></sub></a><br /><a href="https://github.com/rajinwonderland/react-code-blocks/commits?author=kevineaton603" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/react-code-blocks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._