---
title: Rehype Code
description: Code syntax highlighter
---

A wrapper of [Shiki](https://shiki.style), the built-in syntax highlighter.

## Usage

Add the rehype plugin.

```ts
import { rehypeCode } from 'fumadocs-core/mdx-plugins';

const config = {
  rehypePlugins: [rehypeCode],
};
```

### Output

A codeblock wrapped in `<pre />`.

```html
<pre>
<code>...</code>
</pre>
```

### Meta

It parses the `title` meta string, and add it to the `pre` element via attribute.

````mdx
```js title="Title"
console.log('Hello');
```
````

You may filter the meta string before processing it with the `filterMetaString` option.

### Inline Code

`console.log("hello world"){:js}` works.

See https://shiki.style/packages/rehype#inline-code.

### Icon

Add an icon according to the language of codeblock.
It outputs HTML, you might need to render it with React `dangerouslySetInnerHTML`.

```jsx
<pre icon="<svg />">...</pre>
```

Disable or customise icons with the `icon` option.

### Tab

Wrap the pre element in MDX `<Tab />` component.
This is mainly for Fumadocs UI Integration, but you can use it with your own Tab component.

````mdx
<Tabs items={["Name"]}>

```js tab="Name"
console.log('Hello');
```

</Tabs>
````

Outputs:

````mdx
<Tabs items={["Name"]}>

<Tab value="Name">

```js
console.log('Hello');
```

</Tab>

</Tabs>
````

### More Options

see [Shiki](https://shiki.style).
