Skip to content

Installing Expressive Code

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

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

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:

    Terminal window
    npx 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

Next.js

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

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

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

    Terminal window
    npm i remark-expressive-code
  3. Add the integration to your site’s configuration:

    next.config.mjs
    import createMDX from '@next/mdx'
    import remarkExpressiveCode from 'remark-expressive-code'
    /** @type {import('remark-expressive-code').RemarkExpressiveCodeOptions} */
    const remarkExpressiveCodeOptions = {
    // 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: [
    // The nested array structure is required to pass options
    // to a remark plugin
    [remarkExpressiveCode, remarkExpressiveCodeOptions],
    ],
    rehypePlugins: [],
    },
    })
    export default withMDX(nextConfig)
  4. You’re done! 🎉