{"id":13998516,"url":"https://github.com/rajinwonderland/react-code-blocks","last_synced_at":"2025-04-12T19:43:25.683Z","repository":{"id":37664796,"uuid":"185135090","full_name":"rajinwonderland/react-code-blocks","owner":"rajinwonderland","description":"React code blocks and code snippet components","archived":false,"fork":false,"pushed_at":"2024-07-26T15:26:53.000Z","size":169520,"stargazers_count":626,"open_issues_count":40,"forks_count":79,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-03T21:14:38.278Z","etag":null,"topics":["highlightjs","hljs","js","jsx","mdx","prismjs","react","react-code-blocks","react-codemirror","react-codemirror2","react-components","remark","syntax-highlighting","syntax-theme"],"latest_commit_sha":null,"homepage":"https://react-code-blocks.rajinwonderland.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajinwonderland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-06T06:18:03.000Z","updated_at":"2025-03-24T21:44:38.000Z","dependencies_parsed_at":"2024-07-26T17:10:43.800Z","dependency_job_id":"bb0c6dc5-e80f-41ed-863d-03c07df3ce66","html_url":"https://github.com/rajinwonderland/react-code-blocks","commit_stats":{"total_commits":151,"total_committers":26,"mean_commits":"5.8076923076923075","dds":0.7086092715231789,"last_synced_commit":"5638b6dc4aeea24cd06ef8a9a239c0e2d4ccad9c"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajinwonderland%2Freact-code-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajinwonderland%2Freact-code-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajinwonderland%2Freact-code-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajinwonderland%2Freact-code-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajinwonderland","download_url":"https://codeload.github.com/rajinwonderland/react-code-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625478,"owners_count":21135512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["highlightjs","hljs","js","jsx","mdx","prismjs","react","react-code-blocks","react-codemirror","react-codemirror2","react-components","remark","syntax-highlighting","syntax-theme"],"created_at":"2024-08-09T19:01:44.320Z","updated_at":"2025-04-12T19:43:25.664Z","avatar_url":"https://github.com/rajinwonderland.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"packages/assets/alt.png\"\u003e\u003c/p\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\u003ch1 align=\"center\"\u003eWelcome to \u003ccode\u003ereact-code-blocks\u003c/code\u003e 👋👋👋\u003c/h1\u003e\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-code-blocks\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/react-code-blocks.svg\"\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/react-code-blocks\" target=\"_blank\"\u003e\n  \u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/dw/react-code-blocks\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/node/v/react-code-blocks\"\u003e\n  \u003ca href=\"https://react-code-blocks.rajinwonderland.vercel.app\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/rajinwonderland\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Twitter: rajinwonderland\" src=\"https://img.shields.io/twitter/follow/rajinwonderland.svg?style=social\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e React components for rendering code snippets with syntax highlighting\n\n\u003e **BREAKING CHANGES**: `VERSION \u003e= ^0.1.0` has not been tested with Node 14 or lower\n\n- [Background](#background)\n  - [✨ Storybook](#-storybook)\n- [Install](#install)\n- [Usage](#usage)\n- [Components](#components)\n  - [CodeBlock](#codeblock)\n    - [Props](#props)\n  - [CopyBlock](#copyblock)\n    - [Props](#props-1)\n- [Supported Themes](#supported-themes)\n- [Supported Languages](#supported-languages)\n- [Alternatives](#alternatives)\n- [Todos](#todos)\n- [Show your support](#show-your-support)\n- [Author](#author)\n\n## Background\n\nInitially, 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.\n\n### ✨ [Storybook](https://react-code-blocks.vercel.app/)\n\n[![Check out react-code-blocks](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-code-blocks-xgjrr?fontsize=14)\n\n## Install\n\nInstall `react-code-blocks`\n\n```sh\nnpm i react-code-blocks\n```\n\n## Usage\n\n\u003e Updated usage instructions can be found [here](https://react-code-blocks.rajinwonderland.vercel.app/)\n\n```js\nimport { CopyBlock } from \"react-code-blocks\";\n```\n\n```js\n\n\nfunction MyCodeComponent(props) {\n  const copyBlockProps = {\n    text: props.code,\n    language: props.language,\n    showLineNumbers: props.showLineNumbers,\n    startingLineNumber: props.startingLineNumber,\n    wrapLines: true,\n  };\n\n  return (\n    \u003cCopyBlock\n      {...copyBlockProps}\n    /\u003e\n  );\n}\n```\n\n## Components\n\n### CodeBlock\n\nA simple code block component\n\n```js\nimport { CodeBlock, dracula } from \"react-code-blocks\";\n\nfunction MyCoolCodeBlock({ code, language, showLineNumbers, startingLineNumber }) {\n  return (\n    \u003cCodeBlock\n      text={code}\n      language={language}\n      showLineNumbers={showLineNumbers}\n      startingLineNumber={startingLineNumber}\n      theme={dracula}\n    /\u003e\n  );\n}\n```\n\n#### Props\n\n\u003e Note that `CodeBlock` \u0026 `CopyBlock` share exactly the same props\n\n| name              | type      | default      | description                                                                                                                                                    |\n| ----------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `text`            | `string`  | **required** | The code to be formatted                                                                                                                                       |\n| `language`        | `string`  | \"text\"       | The language in which the code is written. [See here](LANGUAGES.md) for a list of supported languages                                                          |\n| `showLineNumbers` | `boolean` | `true`       | Indicates whether or not to show line numbers                                                                                                                  |\n| `startingLineNumber` | `number` | `1`       | if `showLineNumbers` is enabled the line numbering will start from here.                                                                                                                  |\n| `theme`           | `object`  | **dracula**  | A theme object for the code block. [See here](THEMES.md) for a list of supported themes                                                                        |  |\n| `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. |\n\n---\n\n\u003e **more to come...**\n\n### CopyBlock\n\nA code block component with a little copy button for copying a snippet.\n\n```jsx\nimport { CopyBlock, dracula } from \"react-code-blocks\";\n\nfunction MyCoolCodeBlock({ code, language, showLineNumbers, startingLineNumber }) {\n  \u003cCopyBlock\n    text={code}\n    language={language}\n    showLineNumbers={showLineNumbers}\n    startingLineNumber={startingLineNumber}\n    theme={dracula}\n    codeBlock\n  /\u003e;\n}\n```\n\n#### Props\n\nSame as the `CodeBlock`'s component with the exception of one!\n\n| name        | type      | default | description                                                                                          |\n| ----------- | --------- | ------- | ---------------------------------------------------------------------------------------------------- |\n| `codeBlock` | `boolean` | `false` | Indicates whether to render the `CopyBlock` as an inline `Code` component or a `CodeBlock` component |\n\n## Supported Themes\n\nFor a list of supported themes, check out the [list here](THEMES.md)\n\n## Supported Languages\n\nFor a list of supported languages, check out the [list here](LANGUAGES.md)\n\n## Alternatives\n\nIf you're looking for some more maintained solutions, I'd suggest the following:\n\n- [`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.\n  - It's actually used in this project as well! :smile:\n- [`react-highlight.js`](https://github.com/bvaughn/react-highlight.js): A lightweight React wrapper around the `Highlight.js` syntax highlighting library by @bvaughn.\n- [`react-live`](https://github.com/FormidableLabs/react-live): A flexible playground for live editing React components by @FormidableLabs.\n- [`@atlaskit/code`](https://atlaskit.atlassian.com/docs/getting-started): Renders inline code snippets and code blocks\n  - Original inspiration for this project kit for this project\n- [`carbon-components-react`](iframe.html?id=components-codesnippet--inline): Check out their `\u003cCodeSnippet\u003e` component which supports multi-line, single-line, and inline snippets along with added copying functionality.\n\n\u003e Feel free to add any other alternative packages here! :smile:\n\n## Todos\n\n- [x] Add a better readme\n- [x] Highlighting line feature\n- [x] Supported Themes documentation\n- [x] Supported Languages documentation\n- [x] Add a License\n- [x] Docs for usage with GatsbyJS\n- [x] Docs for usage with `MDX`\n- [ ] Contributor guide for development\n- [ ] Contributor guide for adding themes\n- [ ] Contributor guide for adding languages\n- [ ] Document props for `Code` component\n- [ ] Better demo\n- [x] Storybook with Docs\n- [x] Move to typescript\n- [ ] A component with a terminal around it. because why not!? 🧐\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n\n## Author\n\n\u003c!-- \u003cdiv style=\"display:grid;\"\u003e --\u003e\n\u003c!-- \u003cimg src=\"https://avatars3.githubusercontent.com/u/15880596?s=460\u0026v=4\" height=\"100px\"/\u003e --\u003e\n\u003cimg src=\"../assets/rajinwonderland.png\" height=\"100px\" /\u003e\n\u003c!-- \u003c/div\u003e --\n\n- Website: https://novvum.io\n- Twitter: [@rajinwonderland](https://twitter.com/rajinwonderland)\n- Github: [@rajinwonderland](https://github.com/rajinwonderland)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://hishri.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10195215?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTaha HICHRI\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=tahaHichri\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/florpor\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1809093?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eflorpor\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/issues?q=author%3Aflorpor\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/HamadTheIronside\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/31456990?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAbdollah Keshtkar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#example-HamadTheIronside\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=HamadTheIronside\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=HamadTheIronside\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://lukasbals.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10163193?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLukas Bals\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=lukasbals\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://bofeiwang.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/34177142?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBobby Wang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=bofeiw\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.mpeveler.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1845314?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatthew Peveler\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=MasterOdin\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/daceynolan\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/54158919?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDacey Nolan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#example-daceynolan\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=daceynolan\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=daceynolan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kevineaton603\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25751382?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKevin Eaton\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/rajinwonderland/react-code-blocks/commits?author=kevineaton603\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajinwonderland%2Freact-code-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajinwonderland%2Freact-code-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajinwonderland%2Freact-code-blocks/lists"}