Installing Expressive Code

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
• Starlight
• Next.js

Astro

You can add Expressive Code to your Astro site by installing our framework integration astro-expressive-code. Follow these 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:

   npm

   npx astro add astro-expressive-code

   pnpm

   pnpm astro add astro-expressive-code

   yarn

   yarn astro 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! 🎉

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:

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

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

   npm

   npm i rehype-expressive-code

   pnpm

   pnpm add rehype-expressive-code

   yarn

   yarn add rehype-expressive-code

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

   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! 🎉