Adding Markdown Rehype plugins

[balmy coral]

Hi there. please how do i add rehype plugins for the markdown? I want to add rehype-pretty-code for line highlighting and other functionalities but its not getting applied

[hazy lynx]

Hi @balmy coral. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To add rehype plugins to your Astro project, you need to modify your astro.config.mjs file. Here's a general example of how you can add rehype plugins:

import { defineConfig } from 'astro/config';
import rehypePrettyCode from 'rehype-pretty-code';

export default defineConfig({
  markdown: {
    rehypePlugins: [rehypePrettyCode],
  },
});

In this example, rehypePrettyCode is the rehype plugin you want to add. You need to import it at the top of your astro.config.mjs file and then add it to the rehypePlugins array in the markdown configuration object.

Please note that you need to install the plugin using your package manager (like npm or yarn) before you can import and use it in your project.

Also, remember that MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.

For more information, you can refer to the Astro documentation on configuring Markdown and MDX (https://docs.astro.build/en/guides/markdown-content#markdown-plugins) and the Astro configuration reference (https://docs.astro.build/en/reference/configuration-reference#markdownrehypeplugins).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: