Rehype Code

A wrapper of Shiki, the built-in syntax highlighter.

Usage

Add the rehype plugin.

import { rehypeCode } from 'styledsea-docs-core/mdx-plugins';
 
const config = {
  rehypePlugins: [rehypeCode],
};

Output

A codeblock wrapped in <pre />.

<pre>
<code>...</code>
</pre>

Meta

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

```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") 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.

<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 Adalt UI Integration, but you can use it with your own Tab component.

<Tabs items={["Name"]}>
 
```js tab="Name"
console.log('Hello');
```
 
</Tabs>

Outputs:

<Tabs items={["Name"]}>
 
<Tab value="Name">
 
```js
console.log('Hello');
```
 
</Tab>
 
</Tabs>

More Options

see Shiki.