├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── packages
    ├── docs
    │   ├── components
    │   │   ├── Code.tsx
    │   │   ├── Preview.tsx
    │   │   └── theme.ts
    │   ├── examples
    │   │   ├── CopyCodeToClipboard.tsx
    │   │   ├── RenderAdditionalElements.tsx
    │   │   └── placeholder-code.ts
    │   ├── next-env.d.ts
    │   ├── next.config.mjs
    │   ├── package.json
    │   ├── pages
    │   │   ├── _app.tsx
    │   │   ├── _meta.json
    │   │   ├── api-reference.mdx
    │   │   ├── examples.mdx
    │   │   ├── index.mdx
    │   │   ├── usage.mdx
    │   │   └── usage
    │   │   │   ├── _meta.json
    │   │   │   ├── shiki-support.mdx
    │   │   │   ├── with-mdx.mdx
    │   │   │   └── with-react-server-components.mdx
    │   ├── plugins.mjs
    │   ├── postcss.config.js
    │   ├── public
    │   │   └── banner.jpg
    │   ├── styles.css
    │   ├── tailwind.config.js
    │   ├── theme.config.tsx
    │   └── tsconfig.json
    └── react-code-block
    │   ├── package.json
    │   ├── src
    │       ├── code-block.tsx
    │       ├── contexts.ts
    │       ├── index.ts
    │       ├── shared
    │       │   ├── prop-types.ts
    │       │   ├── types.ts
    │       │   └── utils.ts
    │       ├── shiki
    │       │   ├── code-block.tsx
    │       │   ├── contexts.ts
    │       │   ├── index.ts
    │       │   └── types.ts
    │       └── types.ts
    │   └── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | node_modules
3 | dist
4 | out
5 | .DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 - Present Akash Hamirwasia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <br />
 3 |   <br />
 4 |   <h1>React Code Block 🧩</h1>
 5 |   <p>
 6 |     Set of unstyled UI components to build powerful code blocks in React.
 7 |   </p>
 8 |   <p>
 9 |     <a href="https://www.npmjs.com/package/react-code-block"><img src="https://badgen.net/npm/v/react-code-block" /></a>
10 |     <img src="https://badgen.net/bundlephobia/minzip/react-code-block?label=gzipped%20size" />
11 |     <img src="https://badgen.net/npm/types/react-code-block" />
12 |     <img src="https://badgen.net/bundlephobia/tree-shaking/react-code-block" />
13 |     <img src="https://badgen.net/npm/license/react-code-block" />
14 |   </p>
15 |   <br />
16 |   <br />
17 |   <br />
18 |   <br />
19 | </div>
20 | 
21 | ![React Code Block banner](https://react-code-block.netlify.app/banner.jpg)
22 | 
23 | ### Features
24 | 
25 | - ✅ **Unstyled**
26 | - ✅ **Syntax highlighting**
27 | - ✅ **Line numbers**
28 | - ✅ **Line highlighting**
29 | - ✅ **Word highlighting**
30 | - ✅ **Theming**
31 | - ✅ **Shiki support**
32 | 
33 | ### Getting started
34 | 
35 | ```bash
36 | npm i react-code-block prism-react-renderer
37 | ```
38 | 
39 | [**Continue with basic example here →**](https://react-code-block.netlify.app/usage#basic-example)
40 | 
41 | ### Documentation
42 | 
43 | You can find the complete documentation at [**react-code-block.netlify.app**](https://react-code-block.netlify.app)
44 | 
45 | ### Why?
46 | 
47 | **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
48 | syntax 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.
49 | Most 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
50 | features, it's incredibly hard to extend and style them according to the way you want it to be.
51 | 
52 | React 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
53 | library to build any kind of code block you need.
54 | 
55 | ### How does it work?
56 | 
57 | React Code Block uses an existing syntax highlighting library under the hood for syntax highlighting. On top of this, it adds
58 | additional features like line numbers, line highlighting, etc. which can be styled through the primitive components this package exposes.
59 | Currently supported syntax highlighted libraries:
60 | - [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)
61 | - [shiki](https://shiki.matsu.io/)
62 | 
63 | ### License
64 | 
65 | React Code Block is [MIT Licensed](https://github.com/blenderskool/react-code-block/blob/master/LICENSE).
66 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "author": "Akash Hamirwasia",
4 |   "workspaces": [
5 |     "packages/*"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/packages/docs/components/Code.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react';
  2 | import { onlyText } from 'react-children-utilities';
  3 | import { CodeBlock } from 'react-code-block';
  4 | import { useCopyToClipboard } from 'react-use';
  5 | import theme from './theme';
  6 | 
  7 | export default function Code({
  8 |   children,
  9 |   filename,
 10 |   hideLineNumbers = false,
 11 |   words = [],
 12 |   lines = [],
 13 |   className = '',
 14 | }) {
 15 |   const [, copyToClipboard] = useCopyToClipboard();
 16 |   const [isCopied, setIsCopied] = useState(false);
 17 |   const code = onlyText(children);
 18 |   const options = children.props.className.split(',');
 19 |   const language = options[0].replace(/language-/, '');
 20 | 
 21 |   const copyCode = () => {
 22 |     copyToClipboard(code);
 23 |     setIsCopied(true);
 24 |   };
 25 | 
 26 |   useEffect(() => {
 27 |     const timeout = setTimeout(() => {
 28 |       setIsCopied(false);
 29 |     }, 2000);
 30 | 
 31 |     return () => clearTimeout(timeout);
 32 |   }, [isCopied]);
 33 | 
 34 |   return (
 35 |     <CodeBlock
 36 |       code={code}
 37 |       language={language}
 38 |       lines={lines}
 39 |       words={words}
 40 |       theme={theme}
 41 |     >
 42 |       <div className={`bg-gray-50 border border-gray-200 mt-6 rounded-xl code-block relative ${className}`}>
 43 |         {filename && (
 44 |           <div className="rounded-t-xl bg-gray-200/40 px-4 py-2 text-xs">
 45 |             {filename}
 46 |           </div>
 47 |         )}
 48 |         <CodeBlock.Code className="py-4 !px-0 overflow-x-auto">
 49 |           {({ isLineHighlighted }) => (
 50 |             <div className="table-row relative">
 51 |               {!hideLineNumbers ? (
 52 |                 <CodeBlock.LineNumber className="table-cell text-right text-[10px] pl-4 pr-6 text-gray-400 select-none leading-6" />
 53 |               ) : (
 54 |                 <div className="table-cell pl-4" />
 55 |               )}
 56 |               <CodeBlock.LineContent className="table-cell w-full pr-4 text-sm leading-6 tracking-tight">
 57 |                 {isLineHighlighted && (
 58 |                   <div className="absolute inset-0 bg-blue-500/10 border-l-2 border-blue-500" />
 59 |                 )}
 60 |                 <CodeBlock.Token className="relative">
 61 |                   {({ isTokenHighlighted, children }) => (
 62 |                     <span
 63 |                       className={`relative ${isTokenHighlighted ? 'px-1' : ''}`}
 64 |                     >
 65 |                       {isTokenHighlighted && (
 66 |                         <span className="absolute inset-x-0 -inset-y-0.5 rounded-md bg-blue-500/20" />
 67 |                       )}
 68 |                       <span className="relative">{children}</span>
 69 |                     </span>
 70 |                   )}
 71 |                 </CodeBlock.Token>
 72 |               </CodeBlock.LineContent>
 73 |             </div>
 74 |           )}
 75 |         </CodeBlock.Code>
 76 | 
 77 |         <button
 78 |           className={`absolute ${
 79 |             filename ? 'top-11' : 'top-3'
 80 |           } right-3 p-1.5 bg-gray-200/70 shadow-sm border border-gray-300/60 text-gray-500 rounded-md`}
 81 |           onClick={copyCode}
 82 |         >
 83 |           <svg
 84 |             xmlns="http://www.w3.org/2000/svg"
 85 |             fill="none"
 86 |             viewBox="0 0 24 24"
 87 |             strokeWidth={2}
 88 |             stroke="currentColor"
 89 |             className="w-4 h-4"
 90 |           >
 91 |             {isCopied ? (
 92 |               <path
 93 |                 strokeLinecap="round"
 94 |                 strokeLinejoin="round"
 95 |                 d="M4.5 12.75l6 6 9-13.5"
 96 |               />
 97 |             ) : (
 98 |               <path
 99 |                 strokeLinecap="round"
100 |                 strokeLinejoin="round"
101 |                 d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
102 |               />
103 |             )}
104 |           </svg>
105 |         </button>
106 |       </div>
107 |     </CodeBlock>
108 |   );
109 | }
110 | 


--------------------------------------------------------------------------------
/packages/docs/components/Preview.tsx:
--------------------------------------------------------------------------------
1 | const Preview = ({ children }: { children: React.ReactNode }) => (
2 |   <div className="bg-gray-200 px-12 py-20 rounded-xl bg-dots preview">
3 |     {children}
4 |   </div>
5 | );
6 | 
7 | export default Preview;
8 | 


--------------------------------------------------------------------------------
/packages/docs/components/theme.ts:
--------------------------------------------------------------------------------
 1 | const theme = {
 2 |   plain: {
 3 |     backgroundColor: '#202026',
 4 |   },
 5 |   styles: [
 6 |     {
 7 |       types: ['tag'],
 8 |       style: {
 9 |         color: '#1d64e8',
10 |       },
11 |     },
12 |     {
13 |       types: ['prolog', 'constant', 'builtin', 'number', 'boolean'],
14 |       style: {
15 |         color: '#1976D2',
16 |       },
17 |     },
18 |     {
19 |       types: ['parameter'],
20 |       style: {
21 |         color: '#334155',
22 |       },
23 |     },
24 |     {
25 |       types: ['string', 'char', 'attr-value', 'selector'],
26 |       style: {
27 |         color: '#22863A',
28 |       },
29 |     },
30 |     {
31 |       types: ['literal-property'],
32 |       style: {
33 |         color: '#1976D2',
34 |       },
35 |     },
36 |     {
37 |       types: ['regex'],
38 |       style: {
39 |         color: '#22863A',
40 |       },
41 |     },
42 |     {
43 |       types: ['css-html-elements'],
44 |       style: {
45 |         color: '#2ac3de',
46 |       },
47 |     },
48 |     {
49 |       types: ['module'],
50 |       style: {
51 |         color: '#1976D2',
52 |       },
53 |     },
54 |     {
55 |       types: ['inserted', 'function'],
56 |       style: {
57 |         color: '#6F42C1',
58 |       },
59 |     },
60 |     {
61 |       types: ['keyword', 'attr-name', 'operator'],
62 |       style: {
63 |         color: '#D32F2F',
64 |       },
65 |     },
66 |     {
67 |       types: ['variable'],
68 |       style: {
69 |         color: '#1976D2',
70 |       },
71 |     },
72 |     {
73 |       types: ['script', 'spread'],
74 |       style: {
75 |         color: '#334155',
76 |       },
77 |     },
78 |     {
79 |       types: ['punctuation'],
80 |       style: {
81 |         color: '#212121',
82 |       },
83 |     },
84 |     {
85 |       types: ['comment'],
86 |       style: {
87 |         color: '#8d94a1',
88 |       },
89 |     },
90 |   ],
91 | };
92 | 
93 | export default theme;
94 | 


--------------------------------------------------------------------------------
/packages/docs/examples/CopyCodeToClipboard.tsx:
--------------------------------------------------------------------------------
 1 | import { CodeBlock } from 'react-code-block';
 2 | import { useCopyToClipboard } from 'react-use';
 3 | 
 4 | function CodeBlockDemo({ code, language }) {
 5 |   const [state, copyToClipboard] = useCopyToClipboard();
 6 | 
 7 |   const copyCode = () => {
 8 |     // Logic to copy `code`
 9 |     copyToClipboard(code);
10 |   };
11 | 
12 |   return (
13 |     <CodeBlock code={code} language={language}>
14 |       <div className="relative">
15 |         <CodeBlock.Code className="bg-gray-900 !p-6 rounded-xl shadow-lg">
16 |           <div className="table-row">
17 |             <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
18 |             <CodeBlock.LineContent className="table-cell">
19 |               <CodeBlock.Token />
20 |             </CodeBlock.LineContent>
21 |           </div>
22 |         </CodeBlock.Code>
23 | 
24 |         <button
25 |           className="bg-white rounded-full px-3.5 py-1.5 absolute top-2 right-2 text-sm font-semibold"
26 |           onClick={copyCode}
27 |         >
28 |           {state.value ? 'Copied!' : 'Copy code'}
29 |         </button>
30 |       </div>
31 |     </CodeBlock>
32 |   );
33 | }
34 | 
35 | export default CodeBlockDemo;
36 | 


--------------------------------------------------------------------------------
/packages/docs/examples/RenderAdditionalElements.tsx:
--------------------------------------------------------------------------------
 1 | import { CodeBlock } from 'react-code-block';
 2 | 
 3 | function CodeBlockDemo({ code, language, filename }) {
 4 |   return (
 5 |     <CodeBlock code={code} language={language} lines={['4:6']}>
 6 |       <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-lg">
 7 |         {/* Filename */}
 8 |         <div className="text-sm text-gray-400 px-6 py-4">{filename}</div>
 9 | 
10 |         <CodeBlock.Code className="!px-0">
11 |           {({ isLineHighlighted }) => (
12 |             <div
13 |               className={`table-row ${
14 |                 isLineHighlighted ? 'bg-emerald-400/25' : ''
15 |               }`}
16 |             >
17 |               {/* Rendering a plus sign */}
18 |               <div
19 |                 className={`table-cell px-4 text-emerald-400 select-none ${
20 |                   isLineHighlighted ? 'opacity-100' : 'opacity-0'
21 |                 }`}
22 |               >
23 |                 +
24 |               </div>
25 |               <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
26 |               <CodeBlock.LineContent className="table-cell w-full pr-6">
27 |                 <CodeBlock.Token />
28 |               </CodeBlock.LineContent>
29 |             </div>
30 |           )}
31 |         </CodeBlock.Code>
32 | 
33 |         {/* Language being used */}
34 |         <div className="text-sm text-gray-400 px-6 pb-4 text-right uppercase select-none">
35 |           {language}
36 |         </div>
37 |       </div>
38 |     </CodeBlock>
39 |   );
40 | }
41 | 
42 | export default CodeBlockDemo;
43 | 


--------------------------------------------------------------------------------
/packages/docs/examples/placeholder-code.ts:
--------------------------------------------------------------------------------
 1 | export const js = `
 2 | const welcomeMessage = "Hello,";
 3 | let target = "world!";
 4 | 
 5 | function greet(target) {
 6 |   console.log(welcomeMessage + " " + target);
 7 | }
 8 | 
 9 | greet(target);
10 | 
11 | for (let i = 0; i < 5; i++) {
12 |   console.log(\`Count: \${i}\`);
13 | }
14 | `;
15 | 


--------------------------------------------------------------------------------
/packages/docs/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/packages/docs/next.config.mjs:
--------------------------------------------------------------------------------
 1 | import rehypeMdxCodeProps from 'rehype-mdx-code-props';
 2 | import remarkCodeImport from 'remark-code-import';
 3 | import nextra from 'nextra';
 4 | import { remarkRemoveFileProp } from './plugins.mjs';
 5 | 
 6 | const withNextra = nextra({
 7 |   theme: 'nextra-theme-docs',
 8 |   themeConfig: './theme.config.tsx',
 9 |   codeHighlight: false,
10 |   mdxOptions: {
11 |     remarkPlugins: [remarkCodeImport, remarkRemoveFileProp],
12 |     rehypePlugins: [rehypeMdxCodeProps],
13 |   },
14 | });
15 | 
16 | export default withNextra({
17 |   output: 'export',
18 |   images: {
19 |     unoptimized: true,
20 |   },
21 | });
22 | 


--------------------------------------------------------------------------------
/packages/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docs",
 3 |   "version": "1.0.0",
 4 |   "description": "Documentation site for react-code-block package",
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "author": "Akash Hamirwasia",
11 |   "license": "MIT",
12 |   "private": true,
13 |   "dependencies": {
14 |     "next": "^13.0.6",
15 |     "nextra": "latest",
16 |     "nextra-theme-docs": "latest",
17 |     "prism-react-renderer": "^2.0.6",
18 |     "react": "^18.2.0",
19 |     "react-children-utilities": "^2.9.0",
20 |     "react-code-block": "^1.0.1",
21 |     "react-dom": "^18.2.0",
22 |     "react-use": "^17.4.0",
23 |     "rehype-mdx-code-props": "^1.0.0",
24 |     "remark-code-import": "^1.2.0",
25 |     "unist-util-visit": "^5.0.0"
26 |   },
27 |   "devDependencies": {
28 |     "@types/node": "18.11.10",
29 |     "autoprefixer": "^10.4.15",
30 |     "postcss": "^8.4.28",
31 |     "tailwindcss": "^3.3.3",
32 |     "typescript": "^4.9.3"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/packages/docs/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles.css';
2 | 
3 | export default function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />;
5 | }
6 | 


--------------------------------------------------------------------------------
/packages/docs/pages/_meta.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "index": {
 3 |     "title": "Introduction",
 4 |     "theme": {
 5 |       "breadcrumb": false
 6 |     }
 7 |   },
 8 |   "usage": "Usage",
 9 |   "api-reference": {
10 |     "title": "API reference",
11 |     "theme": {
12 |       "breadcrumb": false
13 |     }
14 |   },
15 |   "examples": {
16 |     "title": "Examples",
17 |     "theme": {
18 |       "breadcrumb": false
19 |     }
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/packages/docs/pages/api-reference.mdx:
--------------------------------------------------------------------------------
 1 | # API reference
 2 | 
 3 | import { Steps, Tabs, Callout } from 'nextra/components';
 4 | 
 5 | ### CodeBlock
 6 | 
 7 | Top-level root component which contains all the sub-components to construct a code block.
 8 | 
 9 | <Tabs items={["Prism (Default)", "Shiki"]}>
10 |   <Tabs.Tab>
11 |     | Prop       | Type                   | Default         | Description                              |
12 |     | :--------- | :--------------------- | :-------------- | :--------------------------------------- |
13 |     | `code`     | `string`               | –               | Code to be rendered.                     |
14 |     | `language` | `string`               | –               | Language to use for syntax highlighting. |
15 |     | `lines`    | `(number \| string)[]` | `[]`            | Lines / Line ranges to highlight.        |
16 |     | `words`    | `string[]`             | `[]`            | Words to highlight.                      |
17 |     | `theme`    | `PrismTheme`           | `themes.vsDark` | Theme to use for syntax highlighting.    |
18 | 
19 |     All other [`prism-react-render` props](https://github.com/FormidableLabs/prism-react-renderer#basic-props) can also be passed to this component.
20 |   </Tabs.Tab>
21 |   <Tabs.Tab>
22 |     | Prop       | Type                   | Default         | Description                                                                |
23 |     | :--------- | :--------------------- | :-------------- | :------------------------------------------------------------------------- |
24 |     | `tokens`   | `TokensResult`         | –               | Syntax highlighted tokens generated by `codeToTokens` function from Shiki. |
25 |     | `lines`    | `(number \| string)[]` | `[]`            | Lines / Line ranges to highlight.                                          |
26 |     | `words`    | `string[]`             | `[]`            | Words to highlight.                                                        |
27 | 
28 |     Instructions to integrate with shiki is documented [here](/usage/shiki-support).
29 |   </Tabs.Tab>
30 | </Tabs>
31 | 
32 | ---
33 | 
34 | ### CodeBlock.Code
35 | 
36 | Container which contains code to render each line of the code.
37 | 
38 | | Prop       | Type                      | Default | Description                                   |
39 | | :--------- | :------------------------ | :------ | :-------------------------------------------- |
40 | | `as`       | `String \| Component`     | `pre`   | The element or component it should render as. |
41 | | `children` | `ReactNode \| RenderProp` | –       | How each line of the code should be rendered. |
42 | 
43 | | Render Prop         | Type      | Description                                                                                 |
44 | | :------------------ | :-------- | :------------------------------------------------------------------------------------------ |
45 | | `isLineHighlighted` | `boolean` | Whether the current line is highlighted or not based on what is passed to the `lines` prop. |
46 | | `lineNumber`        | `number`  | Line number of the current line.                                                            |
47 | 
48 | ---
49 | 
50 | ### CodeBlock.LineContent
51 | 
52 | Container for a single line of the code.
53 | 
54 | | Prop       | Type                  | Default | Description                                   |
55 | | :--------- | :-------------------- | :------ | :-------------------------------------------- |
56 | | `as`       | `String \| Component` | `code`  | The element or component it should render as. |
57 | | `children` | `ReactNode`           | –       | What should the current line contain.         |
58 | 
59 | ---
60 | 
61 | ### CodeBlock.Token
62 | 
63 | Renders a syntax-highlighted token from the current line.
64 | <Tabs items={["Prism (Default)", "Shiki"]}>
65 |   <div className="mt-6" />
66 | 
67 |   | Prop       | Type                      | Default | Description                                   |
68 |   | :--------- | :------------------------ | :------ | :-------------------------------------------- |
69 |   | `as`       | `String \| Component`     | `span`  | The element or component it should render as. |
70 |   | `children` | `ReactNode \| RenderProp` | –       | How a token should be rendered.               |
71 | 
72 |   <Tabs.Tab>
73 |     | Render Prop          | Type      | Description                                                                                  |
74 |     | :------------------- | :-------- | :------------------------------------------------------------------------------------------- |
75 |     | `isTokenHighlighted` | `boolean` | Whether the current token is highlighted or not based on what is passed to the `words` prop. |
76 |     | `children`           | `string`  | Content of the current token.                                                                |
77 |   </Tabs.Tab>
78 |   <Tabs.Tab>
79 |     | Render Prop          | Type            | Description                                                                                  |
80 |     | :------------------- | :-------------- | :------------------------------------------------------------------------------------------- |
81 |     | `isTokenHighlighted` | `boolean`       | Whether the current token is highlighted or not based on what is passed to the `words` prop. |
82 |     | `token`              | `ThemedToken`   | Token object generated by Shiki that is currently rendered. Can be used for custom styling.   |
83 |     | `children`           | `string`        | Content of the current token.                                                                |
84 |   </Tabs.Tab>
85 | </Tabs>
86 | 
87 | ---
88 | 
89 | ### CodeBlock.LineNumber
90 | 
91 | Renders the line number for the current line.
92 | 
93 | | Prop | Type                  | Default | Description                                   |
94 | | :--- | :-------------------- | :------ | :-------------------------------------------- |
95 | | `as` | `String \| Component` | `span`  | The element or component it should render as. |
96 | 


--------------------------------------------------------------------------------
/packages/docs/pages/examples.mdx:
--------------------------------------------------------------------------------
1 | # Examples
2 | 
3 | **_Coming Soon!_**
4 | 
5 | If you have built code blocks using react-code-block and are willing to share it with everyone, do share it with me by opening
6 | an issue at https://github.com/blenderskool/react-code-block. I'll feature it on this page.
7 | 


--------------------------------------------------------------------------------
/packages/docs/pages/index.mdx:
--------------------------------------------------------------------------------
 1 | <div className="text-center my-20">
 2 | 
 3 | # React Code Block
 4 | 
 5 | Set of unstyled UI components to build powerful code blocks in React 🧩
 6 | 
 7 | <div className="flex flex-row items-center flex-wrap justify-center gap-1 mt-4">
 8 |   <a href="https://www.npmjs.com/package/react-code-block">
 9 |     <img src="https://badgen.net/npm/v/react-code-block" />
10 |   </a>
11 |   <img src="https://badgen.net/bundlephobia/minzip/react-code-block?label=gzipped%20size" />
12 |   <img src="https://badgen.net/npm/types/react-code-block" />
13 |   <img src="https://badgen.net/bundlephobia/tree-shaking/react-code-block" />
14 |   <img src="https://badgen.net/npm/license/react-code-block" />
15 | </div>
16 | 
17 | </div>
18 | 
19 | import Image from 'next/image';
20 | 
21 | <Image
22 |   src="/banner.jpg"
23 |   alt="React Code Block banner"
24 |   width={2000}
25 |   height={708}
26 | />
27 | 
28 | ### Features
29 | 
30 | - ✅ **Unstyled**
31 | - ✅ **Syntax highlighting**
32 | - ✅ **Line numbers**
33 | - ✅ **Line highlighting**
34 | - ✅ **Word highlighting**
35 | - ✅ **Theming**
36 | - ✅ **Shiki support**
37 | 
38 | ### Getting started
39 | 
40 | ```bash hideLineNumbers
41 | npm i react-code-block prism-react-renderer
42 | ```
43 | 
44 | <div className="mt-4">
45 |   [**Continue with basic example here →**](./usage#basic-example)
46 | </div>
47 | 
48 | ### Why?
49 | 
50 | **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
51 | syntax 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.
52 | Most 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
53 | features, it's incredibly hard to extend and style them according to the way you want it to be.
54 | 
55 | React 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
56 | library to build any kind of code block you need.
57 | 
58 | ### How does it work?
59 | 
60 | React Code Block uses an existing syntax highlighting library under the hood for syntax highlighting. On top of this, it adds
61 | additional features like line numbers, line highlighting, etc. which can be styled through the primitive components this package exposes.
62 | Currently supported syntax highlighted libraries:
63 | - [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)
64 | - [shiki](https://shiki.matsu.io/)
65 | 
66 | ### License
67 | 
68 | React Code Block is [MIT Licensed](https://github.com/blenderskool/react-code-block/blob/master/LICENSE).
69 | 


--------------------------------------------------------------------------------
/packages/docs/pages/usage.mdx:
--------------------------------------------------------------------------------
  1 | import { Callout } from 'nextra/components';
  2 | import { CodeBlock } from 'react-code-block';
  3 | import { js } from '../examples/placeholder-code';
  4 | 
  5 | # Usage
  6 | 
  7 | ## Installation
  8 | 
  9 | Start by installing `react-code-block` and its peer-dependency `prism-react-renderer`.
 10 | 
 11 | ```bash hideLineNumbers
 12 | npm i react-code-block prism-react-renderer
 13 | ```
 14 | 
 15 | <Callout type="info">
 16 | If you prefer using Shiki as the syntax highlighter instead, follow [this guide](/usage/shiki-support) to get started and come back here for all the customization options.
 17 | </Callout>
 18 | 
 19 | ## Basic example
 20 | 
 21 | React Code Block exposes all the un-styled primitives you need to build a code block component through its `CodeBlock` component and various other subcomponents attached to it.
 22 | 
 23 | ```jsx
 24 | import { CodeBlock } from 'react-code-block';
 25 | 
 26 | function CodeBlockDemo() {
 27 |   return (
 28 |     <CodeBlock code="console.log('Hello World!')" language="js">
 29 |       <CodeBlock.Code className="bg-black">
 30 |         <CodeBlock.LineContent>
 31 |           <CodeBlock.Token />
 32 |         </CodeBlock.LineContent>
 33 |       </CodeBlock.Code>
 34 |     </CodeBlock>
 35 |   );
 36 | }
 37 | ```
 38 | 
 39 | <Preview>
 40 |   <CodeBlock code="console.log('Hello World!')" language="js">
 41 |     <CodeBlock.Code className="bg-black">
 42 |       <CodeBlock.LineContent>
 43 |         <CodeBlock.Token />
 44 |       </CodeBlock.LineContent>
 45 |     </CodeBlock.Code>
 46 |   </CodeBlock>
 47 | </Preview>
 48 | 
 49 | Doesn't look very exciting _just yet_. Because these components are un-styled, **you have to add the styles** to make your code block look the way you want it to be. With a little bit
 50 | of CSS(using TailwindCSS in the examples), we can completely change the way the code block looks like.
 51 | 
 52 | ```jsx
 53 | import { CodeBlock } from 'react-code-block';
 54 | 
 55 | function CodeBlockDemo({ code, language }) {
 56 |   return (
 57 |     <CodeBlock code={code} language={language}>
 58 |       <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
 59 |         <CodeBlock.LineContent>
 60 |           <CodeBlock.Token />
 61 |         </CodeBlock.LineContent>
 62 |       </CodeBlock.Code>
 63 |     </CodeBlock>
 64 |   );
 65 | }
 66 | 
 67 | const code = `
 68 | async function sayHello(name) {
 69 |   console.log('Hello', name);
 70 | }
 71 | `;
 72 | 
 73 | <CodeBlockDemo code={code} />;
 74 | ```
 75 | 
 76 | <Preview>
 77 |   <CodeBlock
 78 |     code={`
 79 | async function sayHello(name) {
 80 |   console.log('Hello', name);
 81 | }
 82 |     `}
 83 |     language="js"
 84 |   >
 85 |     <CodeBlock.Code className="bg-gray-900 !p-6 rounded-xl shadow-lg">
 86 |       <CodeBlock.LineContent>
 87 |         <CodeBlock.Token />
 88 |       </CodeBlock.LineContent>
 89 |     </CodeBlock.Code>
 90 |   </CodeBlock>
 91 | </Preview>
 92 | 
 93 | ## Showing line numbers
 94 | 
 95 | To render line numbers for each line in the code block, you can use the `CodeBlock.LineNumber` component. A common approach is to render the line numbers on the left column.
 96 | To keep line numbers and the code aligned correctly, you can use CSS Grids or Table layout.
 97 | 
 98 | ```jsx lines={[8]} words={["table-cell", "table-row"]}
 99 | import { CodeBlock } from 'react-code-block';
100 | 
101 | function CodeBlockDemo({ code, language }) {
102 |   return (
103 |     <CodeBlock code={code} language={language}>
104 |       <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
105 |         <div className="table-row">
106 |           <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
107 |           <CodeBlock.LineContent className="table-cell">
108 |             <CodeBlock.Token />
109 |           </CodeBlock.LineContent>
110 |         </div>
111 |       </CodeBlock.Code>
112 |     </CodeBlock>
113 |   );
114 | }
115 | ```
116 | 
117 | <Preview>
118 |   <CodeBlock code={js} language="js">
119 |     <CodeBlock.Code className="bg-gray-900 !p-6 rounded-xl shadow-lg">
120 |       <div className="table-row">
121 |         <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
122 |         <CodeBlock.LineContent className="table-cell">
123 |           <CodeBlock.Token />
124 |         </CodeBlock.LineContent>
125 |       </div>
126 |     </CodeBlock.Code>
127 |   </CodeBlock>
128 | </Preview>
129 | 
130 | ## Line highlighting
131 | 
132 | You can highlight specific lines or line-ranges in your code via the `lines` prop on `CodeBlock` component. State information of **which line should be highlighted is
133 | made available through `isLineHighlighted` render prop** on `CodeBlock.Code` component, so you can add styles for how a line should be highlighted.
134 | 
135 | ```jsx words={["lines", "isLineHighlighted"]}
136 | import { CodeBlock } from 'react-code-block';
137 | 
138 | function CodeBlockDemo({ code, language }) {
139 |   return (
140 |     <CodeBlock code={code} language={language} lines={['4:6', 8]}>
141 |       <CodeBlock.Code className="bg-gray-900 py-6 rounded-xl shadow-lg">
142 |         {({ isLineHighlighted }) => (
143 |           <div
144 |             className={`table-row ${
145 |               isLineHighlighted ? 'bg-violet-500/30' : 'opacity-60'
146 |             }`}
147 |           >
148 |             <CodeBlock.LineNumber
149 |               className={`table-cell pl-6 pr-4 text-sm text-right select-none ${
150 |                 isLineHighlighted ? 'text-gray-300' : 'text-gray-500'
151 |               }`}
152 |             />
153 |             <CodeBlock.LineContent className="table-cell w-full pr-6">
154 |               <CodeBlock.Token />
155 |             </CodeBlock.LineContent>
156 |           </div>
157 |         )}
158 |       </CodeBlock.Code>
159 |     </CodeBlock>
160 |   );
161 | }
162 | ```
163 | 
164 | <Preview>
165 |   <CodeBlock code={js} lines={['4:6', 8]} language="js">
166 |     <CodeBlock.Code className="bg-gray-900 py-6 !px-0 rounded-xl shadow-lg">
167 |       {({ isLineHighlighted }) => (
168 |         <div
169 |           className={`table-row ${
170 |             isLineHighlighted ? 'bg-violet-500/30' : 'opacity-60'
171 |           }`}
172 |         >
173 |           <CodeBlock.LineNumber
174 |             className={`table-cell pl-6 pr-4 text-sm text-right select-none ${
175 |               isLineHighlighted ? 'text-gray-300' : 'text-gray-500'
176 |             }`}
177 |           />
178 |           <CodeBlock.LineContent className="table-cell w-full pr-6">
179 |             <CodeBlock.Token />
180 |           </CodeBlock.LineContent>
181 |         </div>
182 |       )}
183 |     </CodeBlock.Code>
184 |   </CodeBlock>
185 | </Preview>
186 | 
187 | ## Word highlighting
188 | 
189 | Specific words can be highlighted within a code block using `words` prop on the `CodeBlock` component. State information of **which word to highlight is made available
190 | through `isTokenHighlighted` render prop** on `CodeBlock.Token` component. This can be used to style the highlighted words accordingly.
191 | 
192 | ```jsx words={["words", "isTokenHighlighted"]}
193 | import { CodeBlock } from 'react-code-block';
194 | 
195 | function CodeBlockDemo({ code, language }) {
196 |   return (
197 |     <CodeBlock code={code} language={language} words={['/greet/4:8', 'target']}}>
198 |       <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
199 |         <CodeBlock.LineContent>
200 |           <CodeBlock.Token>
201 |             {({ isTokenHighlighted, children }) => (
202 |               <span
203 |                 className={
204 |                   isTokenHighlighted
205 |                     ? 'bg-violet-500/20 rounded-md px-1 py-0.5'
206 |                     : ''
207 |                 }
208 |               >
209 |                 {children}
210 |               </span>
211 |             )}
212 |           </CodeBlock.Token>
213 |         </CodeBlock.LineContent>
214 |       </CodeBlock.Code>
215 |     </CodeBlock>
216 |   );
217 | }
218 | ```
219 | 
220 | <Preview>
221 |   <CodeBlock code={js} words={['/greet/4:8', 'target']} language="js">
222 |     <CodeBlock.Code className="bg-gray-900 !p-6 rounded-xl shadow-lg">
223 |       <CodeBlock.LineContent>
224 |         <CodeBlock.Token>
225 |           {({ isTokenHighlighted, children }) => (
226 |             <span
227 |               className={
228 |                 isTokenHighlighted ? 'bg-violet-500/30 rounded-md p-1' : ''
229 |               }
230 |             >
231 |               {children}
232 |             </span>
233 |           )}
234 |         </CodeBlock.Token>
235 |       </CodeBlock.LineContent>
236 |     </CodeBlock.Code>
237 |   </CodeBlock>
238 | </Preview>
239 | 
240 | ## Copy code to clipboard button
241 | 
242 | There is no built-in way to show a "Copy code" button in the code block. This is because both the styling and functionality depends on your project and the APIs / libraries
243 | you are using to copy data to user's clipboard. Therefore, you have to implement this feature on your own. An example of how it could look like:
244 | 
245 | ```jsx words={['copyCode', 'useCopyToClipboard', 'copyToClipboard']} lines={['24:29']} file=../examples/CopyCodeToClipboard.tsx
246 | 
247 | ```
248 | 
249 | import CopyCodeToClipboard from '../examples/CopyCodeToClipboard';
250 | 
251 | <Preview>
252 |   <CopyCodeToClipboard code={js} language="js" />
253 | </Preview>
254 | 
255 | ## Rendering additional elements
256 | 
257 | Since all the `CodeBlock` components are composable in nature, you have complete freedom to render additional elements in your code blocks. This could be showing the
258 | filename, language used, captions, etc.
259 | 
260 | ```jsx lines={["7:8", "17:24", "33:36"]} file=../examples/RenderAdditionalElements.tsx
261 | 
262 | ```
263 | 
264 | import RenderAdditionalElements from '../examples/RenderAdditionalElements';
265 | 
266 | <Preview>
267 |   <RenderAdditionalElements code={js} language="js" filename="hello.js" />
268 | </Preview>
269 | 
270 | ## Theming
271 | 
272 | React Code Block uses `prism-react-renderer` under the hood for syntax highlighting. Default theme is `vsDark` and it can be changed using the `theme` prop in the
273 | `CodeBlock` component. Follow [this guide](https://github.com/FormidableLabs/prism-react-renderer#theming) by `prism-react-renderer` for custom themes.
274 | 
275 | ```jsx lines={[2,6]}
276 | import { CodeBlock } from 'react-code-block';
277 | import { themes } from 'prism-react-renderer';
278 | 
279 | function CodeBlockDemo({ code, language }) {
280 |   return (
281 |     <CodeBlock code={code} language={language} theme={themes.github}>
282 |       <CodeBlock.Code className="bg-white p-6 rounded-lg shadow">
283 |         <div className="table-row">
284 |           <CodeBlock.LineNumber className="table-cell pr-4 text-xs text-gray-400 text-right select-none" />
285 |           <CodeBlock.LineContent className="table-cell">
286 |             <CodeBlock.Token />
287 |           </CodeBlock.LineContent>
288 |         </div>
289 |       </CodeBlock.Code>
290 |     </CodeBlock>
291 |   );
292 | }
293 | ```
294 | 
295 | import { themes } from 'prism-react-renderer';
296 | 
297 | <Preview>
298 |   <CodeBlock code={js} language="js" theme={themes.github}>
299 |     <CodeBlock.Code className="bg-white !p-6 rounded-lg shadow">
300 |       <div className="table-row">
301 |         <CodeBlock.LineNumber className="table-cell pr-4 text-xs text-gray-400 text-right select-none" />
302 |         <CodeBlock.LineContent className="table-cell">
303 |           <CodeBlock.Token />
304 |         </CodeBlock.LineContent>
305 |       </div>
306 |     </CodeBlock.Code>
307 |   </CodeBlock>
308 | </Preview>
309 | 
310 | ## Support for more languages
311 | 
312 | Please follow the guide by `prism-react-renderer` for this – [github.com/FormidableLabs/prism-react-renderer#custom-language-support](https://github.com/FormidableLabs/prism-react-renderer#custom-language-support)
313 | 


--------------------------------------------------------------------------------
/packages/docs/pages/usage/_meta.json:
--------------------------------------------------------------------------------
1 | {
2 |   "with-mdx": "With MDX",
3 |   "with-react-server-components": "With Server Components",
4 |   "shiki-support": "Shiki Support"
5 | }
6 | 


--------------------------------------------------------------------------------
/packages/docs/pages/usage/shiki-support.mdx:
--------------------------------------------------------------------------------
  1 | # Shiki Support
  2 | 
  3 | React Code Block also supports rendering code highlighted using [Shiki](https://shiki.matsu.io/) library. Shiki uses the same highlighting engine that is used by VS Code, resulting in
  4 | a very high-quality syntax highlighting and support for any VS Code theme.
  5 | 
  6 | import { Steps, Tabs, Callout } from 'nextra/components';
  7 | 
  8 | <Steps>
  9 | 
 10 | ### Installation
 11 | 
 12 | Start by installing `shiki` as a dependency or a dev-dependency(depending on how you are using it) alongside `react-code-block`:
 13 | 
 14 | ```bash hideLineNumbers
 15 | npm i react-code-block
 16 | npm i -D shiki
 17 | ```
 18 | 
 19 | ### Generate syntax-highlighted code
 20 | 
 21 | Use Shiki to generate syntax-highlighted tokens from your code using the `codeToTokens` function.
 22 | 
 23 | ```js
 24 | import { codeToTokens } from 'shiki';
 25 | 
 26 | // Runs preferably in a server-like environment
 27 | const tokens = await codeToTokens(code, {
 28 |   language: 'js',
 29 |   theme: 'github-dark'
 30 | });
 31 | ```
 32 | #### Where should the above code go?
 33 | Because of the nature of Shiki library, typically it is used on the server-side(or build time) for generating syntax-highlighted code, and then a client-side code block component in React
 34 | consumes this data to actually render the HTML on the webpage. Depending on your framework, there should be a way to run code in such environments.
 35 | 
 36 | <Tabs items={['Next.js', 'Astro']}>
 37 |   <Tabs.Tab>
 38 |     Use [React Server Components](https://shiki.matsu.io/packages/next#react-server-component) if you are using App Router, or `getServerSideProps` / `getStaticProps` functions in Pages Router.
 39 | 
 40 |     ```tsx filename="CodeBlockDemo.js"
 41 |     import { codeToTokens } from 'shiki';
 42 | 
 43 |     async function CodeBlockDemo({ code }) {
 44 |       const tokens = await codeToTokens(code, {
 45 |         language: 'js',
 46 |         theme: 'github-dark'
 47 |       });
 48 | 
 49 |       // Code from next section goes here.
 50 |     }
 51 |     ```
 52 |   </Tabs.Tab>
 53 |   <Tabs.Tab>
 54 |     Use [`.astro` components](https://docs.astro.build/en/basics/astro-components/) as they run only during build-time or server-side-rendering.
 55 | 
 56 |     ```astro filename="CodeBlockDemo.astro"
 57 |     ---
 58 |     import { codeToTokens } from 'shiki';
 59 | 
 60 |     const { code } = Astro.props;
 61 | 
 62 |     const tokens = await codeToTokens(code, {
 63 |       language: 'js',
 64 |       theme: 'github-dark'
 65 |     });
 66 |     ---
 67 | 
 68 |     // Code from next section goes here.
 69 |     ```
 70 |   </Tabs.Tab>
 71 | </Tabs>
 72 | 
 73 | 
 74 | #### How do I run it completely client-side?
 75 | There are ways to run Shiki completely on the client-side like it's [mentioned in their docs](https://shiki.matsu.io/packages/next#react-client-component). An example is shown below.
 76 | Be mindful of the bundle size and amount of JavaScript you are loading on client-side just for syntax highlighting.
 77 | 
 78 | ```tsx
 79 | import { codeToTokens, TokensResult } from 'shiki/bundle/web';
 80 | import { useEffect } from 'react';
 81 | 
 82 | function CodeBlockDemo({ code }) {
 83 |   const [tokens, setTokens] = useState<TokensResult>(null);
 84 | 
 85 |   useEffect(() => {
 86 |     codeToTokens(code, {
 87 |       language: 'js',
 88 |       theme: 'github-dark',
 89 |     })
 90 |       .then(setTokens);
 91 |   }, [code]);
 92 | 
 93 |   if (!tokens) {
 94 |     return (
 95 |       <p>Loading...</p>
 96 |     )
 97 |   }
 98 | 
 99 |   // Code from next section goes here.
100 | }
101 | ```
102 | <Callout>
103 |   The above process is async and would show a "Loading..." text to the user while syntax highlight is in process.
104 |   To eliminate this, either [move the syntax highlighting code to a server-like environment](#where-should-the-above-code-go) or consider [using the Prism highlighter](/usage).
105 | </Callout>
106 | 
107 | ### Render the syntax-highlighted code
108 | Once you have the syntax-highlighted tokens from your code, you can now use React Code Block package to render the code. First, create a new file with a **Client Component** as shown. Notice how the import is from `react-code-block/shiki` here.
109 | 
110 | ```tsx filename="CodeBlockRenderer.js"
111 | 'use client';
112 | import { CodeBlock } from 'react-code-block/shiki';
113 | 
114 | function CodeBlockRenderer({ tokens }) {
115 |   return (
116 |     <CodeBlock tokens={tokens}>
117 |       <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
118 |         <div className="table-row">
119 |           <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
120 |           <CodeBlock.LineContent className="table-cell">
121 |             <CodeBlock.Token />
122 |           </CodeBlock.LineContent>
123 |         </div>
124 |       </CodeBlock.Code>
125 |     </CodeBlock>
126 |   );
127 | }
128 | 
129 | export default CodeBlockRenderer;
130 | ```
131 | 
132 | Now use the above component to render the syntax-highlighted tokens from the previous section.
133 | 
134 | 
135 | <Tabs items={['Next.js', 'Astro']}>
136 |   <Tabs.Tab>
137 |     ```tsx filename="CodeBlockDemo.js" className="!mt-0"
138 |     import { codeToTokens } from 'shiki';
139 |     import CodeBlockRenderer from './CodeBlockRenderer';
140 | 
141 |     async function CodeBlockDemo({ code }) {
142 |       const tokens = await codeToTokens(code, {
143 |         language: 'js',
144 |         theme: 'github-dark'
145 |       });
146 | 
147 |       return <CodeBlockRenderer tokens={tokens} />
148 |     }
149 |     ```
150 |   </Tabs.Tab>
151 |   <Tabs.Tab>
152 |     ```astro filename="CodeBlockDemo.astro" className="!mt-0"
153 |     ---
154 |     import { codeToTokens } from 'shiki';
155 |     import CodeBlockRenderer from './CodeBlockRenderer';
156 | 
157 |     const { code } = Astro.props;
158 | 
159 |     const tokens = await codeToTokens(code, {
160 |       language: 'js',
161 |       theme: 'github-dark'
162 |     });
163 |     ---
164 | 
165 |     <CodeBlockRenderer tokens={tokens} />
166 |     ```
167 |   </Tabs.Tab>
168 | </Tabs>
169 | 
170 | You can now customize the CodeBlock component however you like with features such as line numbers, line highlighting, etc. as documented [here](/usage#showing-line-numbers).
171 | 
172 | </Steps>
173 | 


--------------------------------------------------------------------------------
/packages/docs/pages/usage/with-mdx.mdx:
--------------------------------------------------------------------------------
  1 | # With MDX
  2 | 
  3 | If you are using [MDX](https://mdxjs.com/) and want to integrate React Code Block with the code blocks defined in `.mdx` files, you can follow this guide. This is a common
  4 | practice if you are building a blogging / documentation website over another React framework like Next.js, Remix, or Gatsby.
  5 | 
  6 | import { Steps } from 'nextra/components';
  7 | 
  8 | ## Basic setup
  9 | 
 10 | <Steps>
 11 | 
 12 | ### Installation
 13 | 
 14 | Start by installing `react-code-block` and its peer-dependency `prism-react-renderer` via npm:
 15 | 
 16 | ```bash hideLineNumbers
 17 | npm i react-code-block prism-react-renderer
 18 | ```
 19 | 
 20 | ### Configure your `MDXProvider`
 21 | 
 22 | In the `MDXProvider` component you are using to render the parsed markdown data, add a new entry under `components` prop for `pre` tags.
 23 | 
 24 | ```jsx lines={[7]}
 25 | function MyBlogLayout({ children }) {
 26 |   return (
 27 |     // ...
 28 |     <MDXProvider
 29 |       components={{
 30 |         // ...
 31 |         pre: MyCodeBlock,
 32 |       }}
 33 |     >
 34 |       {children}
 35 |     </MDXProvider>
 36 |     // ...
 37 |   );
 38 | }
 39 | ```
 40 | 
 41 | ### Define your CodeBlock component
 42 | 
 43 | In the previous step, we defined all `pre` tags to render through `MyCodeBlock` component. Now we can build this component using the primitives exposed via React Code Block.
 44 | 
 45 | ```jsx
 46 | import { CodeBlock } from 'react-code-block';
 47 | 
 48 | function MyCodeBlock({ children, className }) {
 49 |   return (
 50 |     <CodeBlock code={children} language="js">
 51 |       <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
 52 |         <CodeBlock.LineContent>
 53 |           <CodeBlock.Token />
 54 |         </CodeBlock.LineContent>
 55 |       </CodeBlock.Code>
 56 |     </CodeBlock>
 57 |   );
 58 | }
 59 | ```
 60 | 
 61 | You can customize this component however you like with features such as line numbers, line highlighting, etc. as documented [here](../usage#showing-line-numbers).
 62 | 
 63 | ### See it in action!
 64 | 
 65 | In an MDX file, try writing a code snippet and see the changes.
 66 | 
 67 | ````mdx filename="index.mdx"
 68 | ```js
 69 | function sayHello(name) {
 70 |   console.log('Hello', name);
 71 | }
 72 | ```
 73 | ````
 74 | 
 75 | </Steps>
 76 | 
 77 | ## Advanced setup
 78 | 
 79 | If you have setup [line and word highlighting](../usage#line-highlighting), you may want to expose these as props in the `mdx` files. This guide goes over setting this up
 80 | using the [`rehype-mdx-code-props`](https://github.com/remcohaszing/rehype-mdx-code-props) plugin.
 81 | 
 82 | <Steps>
 83 | 
 84 | ### Install `rehype-mdx-code-props`
 85 | 
 86 | ```bash hideLineNumbers
 87 | npm i rehype-mdx-code-props
 88 | ```
 89 | 
 90 | ### Add the plugin to your MDX compiler setup
 91 | 
 92 | This is specific to the framework you are using / setup you have for compiling MDX.
 93 | 
 94 | - Next.js: https://nextjs.org/docs/pages/building-your-application/configuring/mdx#remark-and-rehype-plugins
 95 | - Gatsby: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxoptions
 96 | 
 97 | ### Expose the props from your CodeBlock component
 98 | 
 99 | Now you can expose all the props you want from your CodeBlock component that you can pass from mdx files.
100 | 
101 | ```jsx lines={['6:8']} words={['/lines/11', '/words/11', '/showLineNumbers/14']}
102 | import { CodeBlock } from 'react-code-block';
103 | 
104 | function MyCodeBlock({
105 |   children,
106 |   className,
107 |   lines = [],
108 |   words = [],
109 |   showLineNumbers = false,
110 | }) {
111 |   return (
112 |     <CodeBlock code={children} language="js" lines={lines} words={words}>
113 |       <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
114 |         <div className="table-row">
115 |           {showLineNumbers && (
116 |             <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
117 |           )}
118 |           <CodeBlock.LineContent className="table-cell">
119 |             <CodeBlock.Token />
120 |           </CodeBlock.LineContent>
121 |         </div>
122 |       </CodeBlock.Code>
123 |     </CodeBlock>
124 |   );
125 | }
126 | ```
127 | 
128 | ### Start using the props from your `mdx` files!
129 | 
130 | You can now pass the props in your code blocks which will get passed down to the `MyCodeBlock` component!
131 | 
132 | ````mdx filename="index.mdx"
133 | ```js lines={[2]} showLineNumbers
134 | function sayHello(name) {
135 |   console.log('Hello', name);
136 | }
137 | ```
138 | ````
139 | 
140 | Note: To see [line highlighting](../usage#line-highlighting) and [word highlighting](../usage#line-highlighting) work correctly, you need to add additional styles for
141 | these states through the render props exposed by `CodeBlock.Code` and `CodeBlock.Token` components respectively.
142 | 
143 | </Steps>
144 | 


--------------------------------------------------------------------------------
/packages/docs/pages/usage/with-react-server-components.mdx:
--------------------------------------------------------------------------------
 1 | # With React Server Components
 2 | 
 3 | Integrating React Code Block in a React Server Component environment is easy. If you are using Next.js 13+ and the [App Router](https://nextjs.org/docs/app),
 4 | you can mark your CodeBlock component as a **Client Component** using `'use client'` directive and things should work as expected.
 5 | 
 6 | ### Why mark it as a Client Component?
 7 | 
 8 | Components exposed by React Code Block use React Context for sharing data, and it can only be used in Client Components. But you can still compose these Client Components
 9 | in Server Components and enjoy its benefits of server rendering / not requiring client-side JavaScript(unless there are interactive elements in your code blocks).
10 | 
11 | ### Example
12 | 
13 | Create your own CodeBlock component and mark it as **Client Component**.
14 | 
15 | ```jsx filename="MyCodeBlock.js" lines={[1]}
16 | 'use client';
17 | import { CodeBlock } from 'react-code-block';
18 | 
19 | function MyCodeBlock({ code, language }) {
20 |   return (
21 |     <CodeBlock code={code} language={language}>
22 |       <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
23 |         <div className="table-row">
24 |           <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
25 |           <CodeBlock.LineContent className="table-cell">
26 |             <CodeBlock.Token />
27 |           </CodeBlock.LineContent>
28 |         </div>
29 |       </CodeBlock.Code>
30 |     </CodeBlock>
31 |   );
32 | }
33 | 
34 | export default MyCodeBlock;
35 | ```
36 | 
37 | Use your `<MyCodeBlock />` component normally in other Server / Client components.
38 | 
39 | ```jsx lines={[6]}
40 | import MyCodeBlock from './MyCodeBlock';
41 | 
42 | export default function Home() {
43 |   return (
44 |     <div className="container mx-auto">
45 |       <MyCodeBlock code="console.log('Hello World!')" language="js" />
46 |     </div>
47 |   );
48 | }
49 | ```
50 | 
51 | You can customize the CodeBlock component however you like with features such as line numbers, line highlighting, etc. as documented [here](/usage#showing-line-numbers).
52 | 


--------------------------------------------------------------------------------
/packages/docs/plugins.mjs:
--------------------------------------------------------------------------------
 1 | import { visit } from 'unist-util-visit';
 2 | 
 3 | export const remarkRemoveFileProp = () => (tree) => {
 4 |   visit(tree, 'code', (node) => {
 5 |     if (!node.meta) return;
 6 | 
 7 |     const matches = node.meta.match(/(.*?)\s?file=[^\s]+\s?([^\s]+)?/);
 8 |     if (!matches) return;
 9 |     node.meta = `${matches[1] ?? ''} ${matches[2] ?? ''}`;
10 |   });
11 | };
12 | 


--------------------------------------------------------------------------------
/packages/docs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/docs/public/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blenderskool/react-code-block/19fc34ea505b91e8c24eb75288e9c14eadf2d8b3/packages/docs/public/banner.jpg


--------------------------------------------------------------------------------
/packages/docs/styles.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .bg-dots {
 6 |   background-image: radial-gradient(rgba(0, 0, 0, 0.1) 10%, transparent 10%);
 7 |   background-size: 8px 8px;
 8 | }
 9 | 
10 | .code-block:has(+ .preview) {
11 |   @apply border-4 -mb-8 z-10 relative;
12 | }
13 | 
14 | .code-block + .preview {
15 |   @apply rounded-t-none pt-28;
16 | }
17 | 
18 | table {
19 |   @apply w-full !table;
20 | }
21 | 


--------------------------------------------------------------------------------
/packages/docs/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './theme.config.tsx',
 5 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 8 |     './examples/**/*.{js,ts,jsx,tsx,mdx}',
 9 |   ],
10 |   theme: {
11 |     extend: {},
12 |   },
13 |   plugins: [],
14 | };
15 | 


--------------------------------------------------------------------------------
/packages/docs/theme.config.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { DocsThemeConfig } from 'nextra-theme-docs';
 3 | import { useRouter } from 'next/router';
 4 | import Code from './components/Code';
 5 | import Preview from './components/Preview';
 6 | 
 7 | const config: DocsThemeConfig = {
 8 |   logo: <span className="font-semibold">🧩 React Code Block</span>,
 9 |   nextThemes: {
10 |     defaultTheme: 'light',
11 |     forcedTheme: 'light',
12 |   },
13 |   darkMode: false,
14 |   project: {
15 |     link: 'https://github.com/blenderskool/react-code-block',
16 |   },
17 |   docsRepositoryBase:
18 |     'https://github.com/blenderskool/react-code-block/tree/main/docs',
19 |   faviconGlyph: '🧩',
20 |   footer: {
21 |     text: (
22 |       <div className="mx-auto flex flex-col items-center gap-1 text-sm -my-4 text-gray-600">
23 |         <span>
24 |           Released under{' '}
25 |           <a
26 |             href="https://github.com/blenderskool/react-code-block/blob/master/LICENSE"
27 |             target="_blank"
28 |             className="text-gray-800 font-semibold hover:text-blue-600 transition-colors"
29 |           >
30 |             MIT License
31 |           </a>
32 |           .
33 |         </span>
34 |         <span>
35 |           © 2023 - Present&nbsp;
36 |           <a
37 |             href="https://akashhamirwasia.com"
38 |             target="_blank"
39 |             className="text-gray-800 font-semibold hover:text-blue-600 transition-colors"
40 |           >
41 |             Akash Hamirwasia
42 |           </a>
43 |           .
44 |         </span>
45 |       </div>
46 |     ),
47 |   },
48 |   useNextSeoProps() {
49 |     const { asPath } = useRouter();
50 |     if (asPath !== '/') {
51 |       return {
52 |         titleTemplate: '%s - React Code Block',
53 |       };
54 |     }
55 |   },
56 |   components: {
57 |     pre: Code,
58 |     Preview,
59 |   },
60 | };
61 | 
62 | export default config;
63 | 


--------------------------------------------------------------------------------
/packages/docs/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": false,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "incremental": true,
11 |     "esModuleInterop": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "jsx": "preserve"
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "plugins.mjs"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/packages/react-code-block/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-code-block",
 3 |   "version": "1.1.3",
 4 |   "description": "Set of unstyled UI components to build powerful code blocks in React.",
 5 |   "main": "dist/index.js",
 6 |   "types": "dist/index.d.ts",
 7 |   "author": "Akash Hamirwasia",
 8 |   "license": "MIT",
 9 |   "type": "module",
10 |   "files": [
11 |     "dist/"
12 |   ],
13 |   "exports": {
14 |     ".": {
15 |       "types": "./dist/index.d.ts",
16 |       "default": "./dist/index.js"
17 |     },
18 |     "./shiki": {
19 |       "types": "./dist/shiki/index.d.ts",
20 |       "default": "./dist/shiki/index.js"
21 |     }
22 |   },
23 |   "keywords": [
24 |     "code-blocks",
25 |     "snippets",
26 |     "syntax-highlighting",
27 |     "unstyled",
28 |     "prism",
29 |     "react",
30 |     "mdx"
31 |   ],
32 |   "homepage": "https://react-code-block.netlify.app",
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "git+https://github.com/blenderskool/react-code-block.git"
36 |   },
37 |   "bugs": {
38 |     "url": "https://github.com/blenderskool/react-code-block/issues"
39 |   },
40 |   "scripts": {
41 |     "build": "tsc",
42 |     "prepare": "cp ../../README.md ./README.md && cp ../../LICENSE ./LICENSE",
43 |     "postpack": "rm ./README.md ./LICENSE"
44 |   },
45 |   "devDependencies": {
46 |     "@types/react": "^18.3.12",
47 |     "@types/react-dom": "^18.3.1",
48 |     "prism-react-renderer": "^2.0.6",
49 |     "shiki": "^1.23.1",
50 |     "typescript": "^5.6.3"
51 |   },
52 |   "peerDependencies": {
53 |     "prism-react-renderer": "^2",
54 |     "react": ">=18.0.0",
55 |     "react-dom": ">=18.0.0"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/code-block.tsx:
--------------------------------------------------------------------------------
  1 | import { Highlight, type HighlightProps } from 'prism-react-renderer';
  2 | import React, { type Ref, useMemo } from 'react';
  3 | import {
  4 |   LineContext,
  5 |   RootContext,
  6 |   useLineContext,
  7 |   useRootContext,
  8 | } from './contexts.js';
  9 | import type {
 10 |   CodeProps,
 11 |   LineContentProps,
 12 |   LineNumberProps,
 13 | } from './shared/prop-types.js';
 14 | import type { WithAsProp, WithDisplayName } from './shared/types.js';
 15 | import {
 16 |   forwardRef,
 17 |   parseWordHighlights,
 18 |   shouldHighlightLine,
 19 |   shouldHighlightToken,
 20 |   splitStringByWords,
 21 | } from './shared/utils.js';
 22 | 
 23 | export interface CodeBlockProps extends Omit<HighlightProps, 'children'> {
 24 |   lines?: (number | string)[];
 25 |   words?: string[];
 26 |   children: React.ReactNode;
 27 | }
 28 | 
 29 | /**
 30 |  * Top-level root component which contains all the sub-components to construct a code block.
 31 |  *
 32 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblock}
 33 |  */
 34 | const CodeBlock = ({
 35 |   code,
 36 |   words = [],
 37 |   lines = [],
 38 |   children,
 39 |   ...props
 40 | }: CodeBlockProps) => {
 41 |   const parsedWords = useMemo(() => parseWordHighlights(words), [words]);
 42 | 
 43 |   return (
 44 |     <RootContext.Provider
 45 |       value={{ code: code.trim(), words: parsedWords, lines, ...props }}
 46 |     >
 47 |       {children}
 48 |     </RootContext.Provider>
 49 |   );
 50 | };
 51 | 
 52 | const Code = <T extends React.ElementType = 'pre'>(
 53 |   { as, children, ...props }: CodeProps<T>,
 54 |   ref: Ref<HTMLElement>
 55 | ) => {
 56 |   const { lines, words, ...highlightProps } = useRootContext();
 57 | 
 58 |   const Tag = as ?? 'pre';
 59 | 
 60 |   return (
 61 |     <Highlight {...highlightProps}>
 62 |       {(highlight) => (
 63 |         <Tag {...props} ref={ref as any}>
 64 |           {highlight.tokens.map((line, i) => {
 65 |             const lineNumber = i + 1;
 66 |             const isLineHighlighted = shouldHighlightLine(lineNumber, lines);
 67 | 
 68 |             return (
 69 |               <LineContext.Provider
 70 |                 value={{ highlight, line, lineNumber }}
 71 |                 key={i}
 72 |               >
 73 |                 {typeof children === 'function'
 74 |                   ? children({ isLineHighlighted, lineNumber }, i)
 75 |                   : children}
 76 |               </LineContext.Provider>
 77 |             );
 78 |           })}
 79 |         </Tag>
 80 |       )}
 81 |     </Highlight>
 82 |   );
 83 | };
 84 | 
 85 | const LineContent = <T extends React.ElementType = 'div'>(
 86 |   { as, children, className, ...rest }: LineContentProps<T>,
 87 |   ref: Ref<HTMLElement>
 88 | ) => {
 89 |   const { highlight, line } = useLineContext();
 90 |   const { getLineProps } = highlight!;
 91 | 
 92 |   const Tag = as ?? 'div';
 93 |   return (
 94 |     <Tag {...getLineProps({ line, className })} {...rest} ref={ref as any}>
 95 |       {children}
 96 |     </Tag>
 97 |   );
 98 | };
 99 | 
100 | export type TokenProps<T extends React.ElementType> = WithAsProp<
101 |   T,
102 |   {
103 |     children?: (data: {
104 |       isTokenHighlighted: boolean;
105 |       children: React.ReactNode;
106 |     }) => React.ReactNode;
107 |   }
108 | >;
109 | 
110 | const Token = <T extends React.ElementType = 'span'>(
111 |   {
112 |     as,
113 |     children = ({ children }) => <span>{children}</span>,
114 |     className,
115 |     ...rest
116 |   }: TokenProps<T>,
117 |   ref: Ref<HTMLElement>
118 | ) => {
119 |   const { words } = useRootContext();
120 |   const { line, highlight, lineNumber } = useLineContext();
121 |   const { getTokenProps } = highlight!;
122 |   const Tag = as ?? 'span';
123 | 
124 |   return (
125 |     <React.Fragment>
126 |       {line.map((token, key) => {
127 |         const { children: contentWithSpaces, ...props } = getTokenProps({
128 |           token,
129 |           className,
130 |         });
131 |         const content = words.length
132 |           ? splitStringByWords(contentWithSpaces, words)
133 |           : [contentWithSpaces];
134 | 
135 |         return (
136 |           <React.Fragment key={key}>
137 |             {content.map((content, i) => (
138 |               <Tag key={i} {...props} {...rest} ref={ref}>
139 |                 {children({
140 |                   children: content,
141 |                   isTokenHighlighted: shouldHighlightToken(
142 |                     content,
143 |                     lineNumber,
144 |                     words
145 |                   ),
146 |                 })}
147 |               </Tag>
148 |             ))}
149 |           </React.Fragment>
150 |         );
151 |       })}
152 |     </React.Fragment>
153 |   );
154 | };
155 | 
156 | const LineNumber = <T extends React.ElementType = 'span'>(
157 |   { as, ...props }: LineNumberProps<T>,
158 |   ref: Ref<HTMLElement>
159 | ) => {
160 |   const { lineNumber } = useLineContext();
161 |   const Tag = as ?? 'span';
162 |   return (
163 |     <Tag {...props} ref={ref}>
164 |       {lineNumber}
165 |     </Tag>
166 |   );
167 | };
168 | 
169 | interface CodeComponent extends WithDisplayName {
170 |   <U, T extends React.ElementType = 'pre'>(
171 |     props: CodeProps<T> & { ref?: U }
172 |   ): JSX.Element;
173 | }
174 | 
175 | interface LineContentComponent extends WithDisplayName {
176 |   <U, T extends React.ElementType = 'div'>(
177 |     props: LineContentProps<T> & { ref?: U }
178 |   ): JSX.Element;
179 | }
180 | 
181 | interface TokenComponent extends WithDisplayName {
182 |   <U, T extends React.ElementType = 'span'>(
183 |     props: TokenProps<T> & { ref?: U }
184 |   ): JSX.Element;
185 | }
186 | 
187 | interface LineNumberComponent extends WithDisplayName {
188 |   <U, T extends React.ElementType = 'span'>(
189 |     props: LineNumberProps<T> & { ref?: U }
190 |   ): JSX.Element;
191 | }
192 | 
193 | /**
194 |  * Container which contains code to render each line of the code.
195 |  *
196 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblockcode}
197 |  */
198 | CodeBlock.Code = forwardRef(Code) as CodeComponent;
199 | 
200 | /**
201 |  * Container for a single line of the code.
202 |  *
203 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblocklinecontent}
204 |  */
205 | CodeBlock.LineContent = forwardRef(LineContent) as LineContentComponent;
206 | 
207 | /**
208 |  * Renders a syntax-highlighted token from the current line.
209 |  *
210 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblocktoken}
211 |  */
212 | CodeBlock.Token = forwardRef(Token) as TokenComponent;
213 | 
214 | /**
215 |  * Renders the line number for the current line.
216 |  *
217 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblocklinenumber}
218 |  */
219 | CodeBlock.LineNumber = forwardRef(LineNumber) as LineNumberComponent;
220 | 
221 | export { CodeBlock };
222 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/contexts.ts:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | import { createUseContext } from './shared/utils.js';
 3 | import type { LineContextProps, RootContextProps } from './types.js';
 4 | 
 5 | export const RootContext = createContext<RootContextProps | undefined>(
 6 |   undefined
 7 | );
 8 | 
 9 | export const LineContext = createContext<LineContextProps | undefined>(
10 |   undefined
11 | );
12 | 
13 | export const useRootContext = createUseContext(
14 |   RootContext,
15 |   'Could not find nearest <CodeBlock /> component. Please wrap this component with a <CodeBlock /> component imported from "react-code-block".'
16 | );
17 | 
18 | export const useLineContext = createUseContext(
19 |   LineContext,
20 |   'Could not find nearest <CodeBlock.Code /> component. Please wrap this component with <CodeBlock.Code /> component imported from "react-code-block".'
21 | );
22 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './code-block.js';
2 | export * from './contexts.js';
3 | export * from './shared/prop-types.js';
4 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/shared/prop-types.ts:
--------------------------------------------------------------------------------
 1 | import type { WithAsProp } from './types.js';
 2 | 
 3 | export type CodeProps<T extends React.ElementType> = WithAsProp<
 4 |   T,
 5 |   {
 6 |     children:
 7 |       | React.ReactNode
 8 |       | ((
 9 |           data: { isLineHighlighted: boolean; lineNumber: number },
10 |           idx: number
11 |         ) => React.ReactNode);
12 |   }
13 | >;
14 | 
15 | export type LineContentProps<T extends React.ElementType> = WithAsProp<T, {}>;
16 | 
17 | export type LineNumberProps<T extends React.ElementType> = WithAsProp<T, {}>;
18 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/shared/types.ts:
--------------------------------------------------------------------------------
 1 | export interface BaseContextProps {
 2 |   lines: (number | string)[];
 3 |   words: [string, [number, number]][];
 4 | }
 5 | 
 6 | export interface BaseLineContextProps {
 7 |   lineNumber: number;
 8 | }
 9 | 
10 | export type WithAsProp<T extends React.ElementType, U extends Object> = ({
11 |   as?: T;
12 | } & U) &
13 |   Omit<React.ComponentPropsWithoutRef<T>, keyof U>;
14 | 
15 | export interface WithDisplayName {
16 |   displayName: string;
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/shared/utils.ts:
--------------------------------------------------------------------------------
 1 | import { useContext, forwardRef as reactForwardRef, type CSSProperties } from 'react';
 2 | import type { ThemedToken } from 'shiki';
 3 | import type { BaseContextProps } from './types.js';
 4 | 
 5 | export const shouldHighlightLine = (
 6 |   line: number,
 7 |   highlights: (number | string)[]
 8 | ) => {
 9 |   return highlights.some((highlight) => {
10 |     if (typeof highlight === 'number') {
11 |       return line === highlight;
12 |     }
13 | 
14 |     const [min, max] = highlight.split(':').map((val) => parseInt(val));
15 |     return min <= line && line <= max;
16 |   });
17 | };
18 | 
19 | export const shouldHighlightToken = (
20 |   word: string,
21 |   line: number,
22 |   highlights: BaseContextProps['words']
23 | ) => {
24 |   return highlights.some(
25 |     ([highlightWord, [min, max]]) =>
26 |       highlightWord === word && min <= line && line <= max
27 |   );
28 | };
29 | 
30 | export const splitStringByWords = (
31 |   str: string,
32 |   words: BaseContextProps['words']
33 | ) => {
34 |   return str
35 |     .split(new RegExp(`(${words.map(([word]) => word).join('|')})`))
36 |     .filter(Boolean);
37 | };
38 | 
39 | export const parseWordHighlights = (
40 |   words: string[]
41 | ): BaseContextProps['words'] => {
42 |   return words.map((word) => {
43 |     word = word.startsWith('/') ? word : '/' + word;
44 | 
45 |     const [, highlightWord, highlightRange = '0:Infinity'] = word.split('/');
46 |     const [min, max = min]: number[] = highlightRange
47 |       .split(':')
48 |       .map((val) => Number(val));
49 | 
50 |     return [highlightWord, [min, max]];
51 |   });
52 | };
53 | 
54 | export const fontStyleToCss = (token: ThemedToken) => {
55 |   const fontStyles: CSSProperties = {};
56 |   if (!token.fontStyle || token.fontStyle === -1) return fontStyles;
57 | 
58 | 
59 |   if (token.fontStyle & 1) {
60 |     fontStyles.fontStyle = 'italic';
61 |   }
62 |   if (token.fontStyle & 2) {
63 |     fontStyles.fontWeight = 'bold';
64 |   }
65 |   if (token.fontStyle & 4) {
66 |     fontStyles.textDecoration = `${fontStyles.textDecoration ?? ''} underline`.trim();
67 |   }
68 |   if (token.fontStyle & 8) {
69 |     fontStyles.textDecoration = `${fontStyles.textDecoration ?? ''} line-through`.trim();
70 |   }
71 | 
72 |   return fontStyles;
73 | }
74 | 
75 | export const createUseContext =
76 |   <T>(context: React.Context<T | undefined>, errMessage: string) =>
77 |   () => {
78 |     const ctx = useContext(context);
79 |     if (ctx === undefined) {
80 |       throw new Error(errMessage);
81 |     }
82 |     return ctx;
83 |   };
84 | 
85 | export const forwardRef = <T extends { name: string; displayName?: string }>(
86 |   component: T
87 | ): T & { displayName: string } => {
88 |   return Object.assign(reactForwardRef(component as any) as any, {
89 |     displayName: component.displayName ?? component.name,
90 |   });
91 | };
92 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/shiki/code-block.tsx:
--------------------------------------------------------------------------------
  1 | import React, { type Ref, useMemo } from 'react';
  2 | import { type ThemedToken, type TokensResult } from 'shiki';
  3 | import type {
  4 |   CodeProps,
  5 |   LineContentProps,
  6 |   LineNumberProps,
  7 | } from '../shared/prop-types.js';
  8 | import type { WithAsProp, WithDisplayName } from '../shared/types.js';
  9 | import {
 10 |   fontStyleToCss,
 11 |   forwardRef,
 12 |   parseWordHighlights,
 13 |   shouldHighlightLine,
 14 |   shouldHighlightToken,
 15 |   splitStringByWords,
 16 | } from '../shared/utils.js';
 17 | import {
 18 |   ShikiLineContext,
 19 |   ShikiRootContext,
 20 |   useLineContext,
 21 |   useRootContext,
 22 | } from './contexts.js';
 23 | 
 24 | export interface CodeBlockProps {
 25 |   tokens: TokensResult;
 26 |   lines?: (number | string)[];
 27 |   words?: string[];
 28 |   children: React.ReactNode;
 29 | }
 30 | 
 31 | /**
 32 |  * Top-level root component which contains all the sub-components to construct a code block.
 33 |  *
 34 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblock}
 35 |  */
 36 | const CodeBlock = ({
 37 |   tokens,
 38 |   words = [],
 39 |   lines = [],
 40 |   children,
 41 |   ...props
 42 | }: CodeBlockProps) => {
 43 |   const parsedWords = useMemo(() => parseWordHighlights(words), [words]);
 44 | 
 45 |   return (
 46 |     <ShikiRootContext.Provider
 47 |       value={{ tokens, words: parsedWords, lines, ...props }}
 48 |     >
 49 |       {children}
 50 |     </ShikiRootContext.Provider>
 51 |   );
 52 | };
 53 | 
 54 | const Code = <T extends React.ElementType = 'pre'>(
 55 |   { as, children, ...props }: CodeProps<T>,
 56 |   ref: Ref<HTMLElement>
 57 | ) => {
 58 |   const { tokens, lines } = useRootContext();
 59 | 
 60 |   const Tag = as ?? 'pre';
 61 | 
 62 |   return (
 63 |     <Tag {...props} ref={ref as any}>
 64 |       {tokens.tokens.map((line, i) => {
 65 |         const lineNumber = i + 1;
 66 |         const isLineHighlighted = shouldHighlightLine(lineNumber, lines);
 67 | 
 68 |         return (
 69 |           <ShikiLineContext.Provider value={{ line, lineNumber }} key={i}>
 70 |             {typeof children === 'function'
 71 |               ? children({ isLineHighlighted, lineNumber }, i)
 72 |               : children}
 73 |           </ShikiLineContext.Provider>
 74 |         );
 75 |       })}
 76 |     </Tag>
 77 |   );
 78 | };
 79 | 
 80 | const LineContent = <T extends React.ElementType = 'div'>(
 81 |   { as, style, ...rest }: LineContentProps<T>,
 82 |   ref: Ref<HTMLElement>
 83 | ) => {
 84 |   const { tokens } = useRootContext();
 85 | 
 86 |   const Tag = as ?? 'div';
 87 |   return (
 88 |     <Tag {...rest} ref={ref as any} style={{ ...style, color: tokens.fg }} />
 89 |   );
 90 | };
 91 | 
 92 | export type TokenProps<T extends React.ElementType> = WithAsProp<
 93 |   T,
 94 |   {
 95 |     children?: (data: {
 96 |       isTokenHighlighted: boolean;
 97 |       children: React.ReactNode;
 98 |       token: ThemedToken;
 99 |     }) => React.ReactNode;
100 |   }
101 | >;
102 | 
103 | const Token = <T extends React.ElementType = 'span'>(
104 |   {
105 |     as,
106 |     children = ({ children }) => <span>{children}</span>,
107 |     className,
108 |     style,
109 |     ...rest
110 |   }: TokenProps<T>,
111 |   ref: Ref<HTMLElement>
112 | ) => {
113 |   const { words } = useRootContext();
114 |   const { line, lineNumber } = useLineContext();
115 |   const Tag = as ?? 'span';
116 | 
117 |   return (
118 |     <React.Fragment>
119 |       {line.map((token, key) => {
120 |         const content = words.length
121 |           ? splitStringByWords(token.content, words)
122 |           : [token.content];
123 | 
124 |         return (
125 |           <React.Fragment key={key}>
126 |             {content.map((content, i) => (
127 |               <Tag
128 |                 key={i}
129 |                 style={{
130 |                   color: token.color,
131 |                   backgroundColor: token.bgColor,
132 |                   ...fontStyleToCss(token),
133 |                   ...style,
134 |                 }}
135 |                 {...token.htmlAttrs}
136 |                 {...rest}
137 |                 ref={ref}
138 |               >
139 |                 {children({
140 |                   children: content,
141 |                   token,
142 |                   isTokenHighlighted: shouldHighlightToken(
143 |                     content,
144 |                     lineNumber,
145 |                     words
146 |                   ),
147 |                 })}
148 |               </Tag>
149 |             ))}
150 |           </React.Fragment>
151 |         );
152 |       })}
153 |     </React.Fragment>
154 |   );
155 | };
156 | 
157 | const LineNumber = <T extends React.ElementType = 'span'>(
158 |   { as, ...props }: LineNumberProps<T>,
159 |   ref: Ref<HTMLElement>
160 | ) => {
161 |   const { lineNumber } = useLineContext();
162 |   const Tag = as ?? 'span';
163 |   return (
164 |     <Tag {...props} ref={ref}>
165 |       {lineNumber}
166 |     </Tag>
167 |   );
168 | };
169 | 
170 | interface CodeComponent extends WithDisplayName {
171 |   <U, T extends React.ElementType = 'pre'>(
172 |     props: CodeProps<T> & { ref?: U }
173 |   ): JSX.Element;
174 | }
175 | 
176 | interface LineContentComponent extends WithDisplayName {
177 |   <U, T extends React.ElementType = 'div'>(
178 |     props: LineContentProps<T> & { ref?: U }
179 |   ): JSX.Element;
180 | }
181 | 
182 | interface TokenComponent extends WithDisplayName {
183 |   <U, T extends React.ElementType = 'span'>(
184 |     props: TokenProps<T> & { ref?: U }
185 |   ): JSX.Element;
186 | }
187 | 
188 | interface LineNumberComponent extends WithDisplayName {
189 |   <U, T extends React.ElementType = 'span'>(
190 |     props: LineNumberProps<T> & { ref?: U }
191 |   ): JSX.Element;
192 | }
193 | 
194 | /**
195 |  * Container which contains code to render each line of the code.
196 |  *
197 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblockcode}
198 |  */
199 | CodeBlock.Code = forwardRef(Code) as CodeComponent;
200 | 
201 | /**
202 |  * Container for a single line of the code.
203 |  *
204 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblocklinecontent}
205 |  */
206 | CodeBlock.LineContent = forwardRef(LineContent) as LineContentComponent;
207 | 
208 | /**
209 |  * Renders a syntax-highlighted token from the current line.
210 |  *
211 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblocktoken}
212 |  */
213 | CodeBlock.Token = forwardRef(Token) as TokenComponent;
214 | 
215 | /**
216 |  * Renders the line number for the current line.
217 |  *
218 |  * API Reference: {@link https://react-code-block.netlify.app/api-reference#codeblocklinenumber}
219 |  */
220 | CodeBlock.LineNumber = forwardRef(LineNumber) as LineNumberComponent;
221 | 
222 | export { CodeBlock };
223 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/shiki/contexts.ts:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | import type { ShikiLineContextProps, ShikiRootContextProps } from './types.js';
 3 | import { createUseContext } from '../shared/utils.js';
 4 | 
 5 | export const ShikiRootContext = createContext<
 6 |   ShikiRootContextProps | undefined
 7 | >(undefined);
 8 | 
 9 | export const ShikiLineContext = createContext<
10 |   ShikiLineContextProps | undefined
11 | >(undefined);
12 | 
13 | export const useRootContext = createUseContext(
14 |   ShikiRootContext,
15 |   'Could not find nearest <CodeBlock /> component. Please wrap this component with a <CodeBlock /> component imported from "react-code-block/shiki".'
16 | );
17 | 
18 | export const useLineContext = createUseContext(
19 |   ShikiLineContext,
20 |   'Could not find nearest <CodeBlock.Code /> component. Please wrap this component with <CodeBlock.Code /> component imported from "react-code-block/shiki".'
21 | );
22 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/shiki/index.ts:
--------------------------------------------------------------------------------
1 | export * from './code-block.js';
2 | export * from './contexts.js';
3 | export * from '../shared/prop-types.js';
4 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/shiki/types.ts:
--------------------------------------------------------------------------------
 1 | import type { ThemedToken, TokensResult } from 'shiki';
 2 | import type {
 3 |   BaseContextProps,
 4 |   BaseLineContextProps,
 5 | } from '../shared/types.js';
 6 | 
 7 | export interface ShikiRootContextProps extends BaseContextProps {
 8 |   tokens: TokensResult;
 9 | }
10 | 
11 | export interface ShikiLineContextProps extends BaseLineContextProps {
12 |   line: ThemedToken[];
13 |   lineNumber: number;
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/react-code-block/src/types.ts:
--------------------------------------------------------------------------------
 1 | import type { HighlightProps, RenderProps, Token } from 'prism-react-renderer';
 2 | import type { BaseContextProps, BaseLineContextProps } from './shared/types.js';
 3 | 
 4 | export interface RootContextProps
 5 |   extends Omit<HighlightProps, 'children'>,
 6 |     BaseContextProps {}
 7 | 
 8 | export interface LineContextProps extends BaseLineContextProps {
 9 |   line: Token[];
10 |   highlight?: RenderProps;
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/react-code-block/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": ["dom", "esnext"],
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "ESNext",
10 |     "moduleResolution": "node",
11 |     "jsx": "react-jsx",
12 |     "outDir": "dist",
13 |     "declaration": true,
14 |     "importHelpers": true,
15 |     "sourceMap": true,
16 |     "noUnusedLocals": true,
17 |     "noUnusedParameters": true,
18 |     "downlevelIteration": true,
19 |     "isolatedModules": true,
20 |     "verbatimModuleSyntax": true
21 |   },
22 |   "include": ["src/**/*.ts"],
23 |   "exclude": ["node_modules"]
24 | }
25 | 


--------------------------------------------------------------------------------