Rehype Plugins for Code

If you want to use a Rehype plugin with Astro to process code blocks (aka code fences), like those in Markdown:

```
something
```

Or like this in HTML:

<pre>
    <code>something</code>
</pre>

You may need to use special configuration because Astro (and Starlight) comes with a built-in code highlighter.

Astro

To use it with Astro, you need to disable the built-in syntax highlighting and apply your plugin afterward:

astro.config.mjs

import { rehypeShiki, markdownConfigDefaults } from "@astrojs/markdown-remark";

export default defineConfig({
  markdown: {
    syntaxHighlight: false,
    rehypePlugins: [
      yourPlugin,
      [rehypeShiki, markdownConfigDefaults.shikiConfig],
    ],
  },
});

Starlight

Important use Starlight v0.22+ ↗

astro.config.mjs

export default defineConfig({
  integrations: [starlight({})],
  markdown: {
    rehypePlugins: [yourPlugin],
  },
});