Code Block

Adding code blocks to your docs

next.config.js

const config = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  reactStrictMode: true,
};
 
const { withContentlayer } = require('next-contentlayer');
 
module.exports = withContentlayer(config);

Display code blocks, required by default.

Syntax highlighting powered by Shikiji
Copy button
Custom Titles

Usage

You can add this component to mdxComponents.

import { Pre } from 'next-docs-ui/mdx/pre';
 
<MDX
  components={{
    pre: (props) => <Pre {...props} />,
  }}
/>

Highlight Lines

You spectify highlighted lines by adding a numbric range.

```tsx {1-2,4}
<div>Hello World</div>
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```

Highlight Words

You can highlight a specific word by wrapping the word in /.

```js /config/
const config = {
  reactStrictMode: true,
};
```

Title

Add title="x" to the codeblock meta.

```js title="next.config.js"
const config = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  reactStrictMode: true,
};
 
const { withContentlayer } = require('next-contentlayer');
 
module.exports = withContentlayer(config);
```

Inline

Inline code is supported too, console.log("Hello World").