Code Block

Docs

Adding codeblocks to your docs

Display code blocks, required by default.

Syntax highlighting powered by Shiki.
Copy button
Custom Titles

Usage

You can add this component to mdxComponents.

import { Pre } from 'next-docs-ui/mdx'
 
<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").

`console.log("Hello World"){:js}`

Example

next.config.js

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

Last updated on

Card