---
title: Installing Expressive Code
---

import { Steps } from '@astrojs/starlight/components'
import PackageManagers from '@components/PackageManagers.astro'

Expressive Code provides integrations into many different frameworks, including Astro, Starlight, Next.js, and any framework that supports rehype plugins.

Please select your framework to jump to the respective installation instructions:

- [Astro](#astro)
- [Starlight](#starlight)
- [Next.js](#nextjs)

## Astro

You can add Expressive Code to your Astro site by installing our framework integration `astro-expressive-code`. Follow these steps:

<Steps>

1. Change into the directory of your Astro site. If you do not have an existing Astro site, first create a new one using `npm create astro@latest` (other package managers like `pnpm` and `yarn` are also supported).

2. Use Astro's CLI to install `astro-expressive-code`:

    <PackageManagers pkg="astro" exec="add astro-expressive-code" />

    Confirm all prompts to download this third-party integration and add it to your site's configuration.

3. You're done! 🎉

</Steps>

## Starlight

:::tip
Expressive Code is already included in Starlight. You're done! 🎉
:::

## Next.js

You can add Expressive Code to your Next.js site by installing our framework integration `rehype-expressive-code`. Follow these steps:

<Steps>

1. Change into the directory of your Next.js site.

2. Add the integration package `rehype-expressive-code` to your site's dependencies:

    <PackageManagers pkg="rehype-expressive-code" />

3. Add the integration to your site's configuration:

    ```js ins={3, 5-8, 19-23}
    // next.config.mjs
    import createMDX from '@next/mdx'
    import rehypeExpressiveCode from 'rehype-expressive-code'

    /** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
    const rehypeExpressiveCodeOptions = {
      // You can add configuration options here
    }

    /** @type {import('next').NextConfig} */
    const nextConfig = {
      reactStrictMode: true,
      pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
    }

    const withMDX = createMDX({
      extension: /\.mdx?$/,
      options: {
        remarkPlugins: [],
        rehypePlugins: [
          // The nested array structure is required to pass options
          // to a rehype plugin
          [rehypeExpressiveCode, rehypeExpressiveCodeOptions],
        ],
      },
    })

    export default withMDX(nextConfig)
    ```

4. You're done! 🎉

</Steps>
