Rehype Code
Code syntax highlighter
A wrapper of @shikijs/rehype, the syntax highlighter used by Hanzo Docs.
It converts raw <pre /> codeblocks into highlighted codeblocks:
Input
Output
```ts
console.log('Hello World');
```<pre>
<code>
<span class="line">
<span style="--shiki-light: #4C4F69; --shiki-dark: #CDD6F4;">console</span>...
</span>
</code>
</pre>Usage
Add the rehype plugin.
MDX Compiler
Hanzo Docs MDX
import { compile } from '@mdx-js/mdx';
import { rehypeCode, type RehypeCodeOptions } from '@hanzo/docs/core/mdx-plugins';
const rehypeCodeOptions: RehypeCodeOptions = {
themes: {
light: 'github-light',
dark: 'github-dark',
},
};
await compile('...', {
rehypePlugins: [
// using default settings
rehypeCode,
// or with custom options
[rehypeCode, rehypeCodeOptions],
],
});import { defineConfig } from '@hanzo/docs/mdx/config';
export default defineConfig({
mdxOptions: {
rehypeCodeOptions: {
// enabled by default on Hanzo Docs MDX
// configure options here
},
},
});Meta
It parses the title meta string, and adds it to the pre element as an attribute.
Input
Output
```js title="Title"
console.log('Hello');
```<pre title="Title">...</pre>You may filter the meta string before processing it with the filterMetaString option.
Inline Code
You can enable it with inline option:
import { type RehypeCodeOptions } from '@hanzo/docs/core/mdx-plugins';
const rehypeCodeOptions: RehypeCodeOptions = {
inline: 'tailing-curly-colon',
};This is a highlighted inline code: `console.log("hello world"){:js}`.This is a highlighted inline code: console.log("hello world").
Icon
The plugin will automatically adds an icon attribute according to the language meta string.
It is a HTML string, you can render it with React dangerouslySetInnerHTML.
Input
Output
```ts
console.log('This should shows the logo of TypeScript');
```<pre icon="<svg />">...</pre>Disable or customise icons with the icon option.
More Options
The options are inherited from Shiki, see their docs for other options.
How is this guide?