Rehype plugins for code

If you want to use rehype plugin with Astro for processing code blocks (aka code fences), like this in Markodwn:

```
something
```

Or like this in HTML:

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

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

Astro

To use with Astro, you need to disable built-in syntax highlighting and put it after your plugin:

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],
  },
});