{"id":15605297,"url":"https://github.com/blenderskool/react-code-block","last_synced_at":"2026-03-08T10:36:43.862Z","repository":{"id":191198327,"uuid":"683774151","full_name":"blenderskool/react-code-block","owner":"blenderskool","description":"🧩 Set of unstyled UI components to build powerful code blocks in React.","archived":false,"fork":false,"pushed_at":"2025-02-24T15:18:46.000Z","size":281,"stargazers_count":70,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T03:02:19.637Z","etag":null,"topics":["code-blocks","mdx","react","snippets","syntax-highlighting","unstyled-components"],"latest_commit_sha":null,"homepage":"https://react-code-block.netlify.app","language":"MDX","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/blenderskool.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-27T16:52:14.000Z","updated_at":"2025-03-27T22:17:54.000Z","dependencies_parsed_at":"2023-11-26T08:23:12.243Z","dependency_job_id":"c2776726-12ed-4486-bb09-938ab91fef34","html_url":"https://github.com/blenderskool/react-code-block","commit_stats":{"total_commits":30,"total_committers":1,"mean_commits":30.0,"dds":0.0,"last_synced_commit":"6b9f1e1ec780a3a497f17a7a1001bc3943430030"},"previous_names":["blenderskool/react-code-block"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Freact-code-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Freact-code-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Freact-code-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Freact-code-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blenderskool","download_url":"https://codeload.github.com/blenderskool/react-code-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284944,"owners_count":20913704,"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":["code-blocks","mdx","react","snippets","syntax-highlighting","unstyled-components"],"created_at":"2024-10-03T04:03:57.165Z","updated_at":"2026-03-08T10:36:38.828Z","avatar_url":"https://github.com/blenderskool.png","language":"MDX","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ch1\u003eReact Code Block 🧩\u003c/h1\u003e\n  \u003cp\u003e\n    Set of unstyled UI components to build powerful code blocks in React.\n  \u003c/p\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-code-block\"\u003e\u003cimg src=\"https://badgen.net/npm/v/react-code-block\" /\u003e\u003c/a\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-code-block?label=gzipped%20size\" /\u003e\n    \u003cimg src=\"https://badgen.net/npm/types/react-code-block\" /\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/tree-shaking/react-code-block\" /\u003e\n    \u003cimg src=\"https://badgen.net/npm/license/react-code-block\" /\u003e\n  \u003c/p\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\n![React Code Block banner](https://react-code-block.netlify.app/banner.jpg)\n\n### Features\n\n- ✅ **Unstyled**\n- ✅ **Syntax highlighting**\n- ✅ **Line numbers**\n- ✅ **Line highlighting**\n- ✅ **Word highlighting**\n- ✅ **Theming**\n- ✅ **Shiki support**\n\n### Getting started\n\n```bash\nnpm i react-code-block prism-react-renderer\n```\n\n[**Continue with basic example here →**](https://react-code-block.netlify.app/usage#basic-example)\n\n### Documentation\n\nYou can find the complete documentation at [**react-code-block.netlify.app**](https://react-code-block.netlify.app)\n\n### Why?\n\n**Let's face it, building code blocks is hard!** There are various libraries out there that handle syntax highlighting, but then you realize that you need more than just\nsyntax highlighting. If you are writing a technical blog or documentation, chances are you need features like line numbers, line highlighting, word highlighting and so on.\nMost of the syntax highlighting libraries don't come with this out-of-the-box, so you have to spend time implementing all this by yourself. Or if they do come with these\nfeatures, it's incredibly hard to extend and style them according to the way you want it to be.\n\nReact Code Block solves all these problems by only providing you with the core functionality without any of the styling. You can compose the primitive components from this\nlibrary to build any kind of code block you need.\n\n### How does it work?\n\nReact Code Block uses an existing syntax highlighting library under the hood for syntax highlighting. On top of this, it adds\nadditional features like line numbers, line highlighting, etc. which can be styled through the primitive components this package exposes.\nCurrently supported syntax highlighted libraries:\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [shiki](https://shiki.matsu.io/)\n\n### License\n\nReact Code Block is [MIT Licensed](https://github.com/blenderskool/react-code-block/blob/master/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblenderskool%2Freact-code-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblenderskool%2Freact-code-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblenderskool%2Freact-code-block/lists"}