Usage
With MDX

With MDX

If you are using MDX (opens in a new tab) and want to integrate React Code Block with the code blocks defined in .mdx files, you can follow this guide. This is a common practice if you are building a blogging / documentation website over another React framework like Next.js, Remix, or Gatsby.

Basic setup

Installation

Start by installing react-code-block and its peer-dependency prism-react-renderer via npm:

npm i react-code-block prism-react-renderer

Configure your MDXProvider

In the MDXProvider component you are using to render the parsed markdown data, add a new entry under components prop for pre tags.

1
function MyBlogLayout({ children }) {
2
  return (
3
    // ...
4
    <MDXProvider
5
      components={{
6
        // ...
7
        pre: MyCodeBlock,
8
      }}
9
    >
10
      {children}
11
    </MDXProvider>
12
    // ...
13
  );
14
}

Define your CodeBlock component

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.

1
import { CodeBlock } from 'react-code-block';
2


3
function MyCodeBlock({ children, className }) {
4
  return (
5
    <CodeBlock code={children} language="js">
6
      <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
7
        <CodeBlock.LineContent>
8
          <CodeBlock.Token />
9
        </CodeBlock.LineContent>
10
      </CodeBlock.Code>
11
    </CodeBlock>
12
  );
13
}

You can customize this component however you like with features such as line numbers, line highlighting, etc. as documented here.

See it in action!

In an MDX file, try writing a code snippet and see the changes.

index.mdx
1
```js
2
function sayHello(name) {
3
  console.log('Hello', name);
4
}
5
```

Advanced setup

If you have setup line and word highlighting, you may want to expose these as props in the mdx files. This guide goes over setting this up using the rehype-mdx-code-props (opens in a new tab) plugin.

Install rehype-mdx-code-props

npm i rehype-mdx-code-props

Add the plugin to your MDX compiler setup

This is specific to the framework you are using / setup you have for compiling MDX.

Expose the props from your CodeBlock component

Now you can expose all the props you want from your CodeBlock component that you can pass from mdx files.

1
import { CodeBlock } from 'react-code-block';
2


3
function MyCodeBlock({
4
  children,
5
  className,
6
  lines = [],
7
  words = [],
8
  showLineNumbers = false,
9
}) {
10
  return (
11
    <CodeBlock code={children} language="js" lines={lines} words={words}>
12
      <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
13
        <div className="table-row">
14
          {showLineNumbers && (
15
            <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
16
          )}
17
          <CodeBlock.LineContent className="table-cell">
18
            <CodeBlock.Token />
19
          </CodeBlock.LineContent>
20
        </div>
21
      </CodeBlock.Code>
22
    </CodeBlock>
23
  );
24
}

Start using the props from your mdx files!

You can now pass the props in your code blocks which will get passed down to the MyCodeBlock component!

index.mdx
1
```js lines={[2]} showLineNumbers
2
function sayHello(name) {
3
  console.log('Hello', name);
4
}
5
```

Note: To see line highlighting and word highlighting work correctly, you need to add additional styles for these states through the render props exposed by CodeBlock.Code and CodeBlock.Token components respectively.

UsageWith Server Components