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:
import { rehypeShiki, markdownConfigDefaults } from "@astrojs/markdown-remark";
export default defineConfig({ markdown: { syntaxHighlight: false, rehypePlugins: [ yourPlugin, [rehypeShiki, markdownConfigDefaults.shikiConfig], ], },});
Starlight
Important use Starlight v0.22+ ↗
export default defineConfig({ integrations: [starlight({})], markdown: { rehypePlugins: [yourPlugin], },});