Skip to content
Expressive Code

Upgrading Expressive Code

If your site is already using Expressive Code, this page guides you through the process of upgrading it to the latest version.

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

Astro

To upgrade your Astro site to the latest version of Expressive Code, follow these steps:

  1. Change into the directory of your Astro site.

  2. Install the latest version of astro-expressive-code:

    Terminal window
    npm i astro-expressive-code@latest

  3. Check our release history for breaking changes that might affect your site, and apply any necessary changes.

  4. You’re done! 🎉

Starlight

Starlight already has a dependency on astro-expressive-code, so you don’t need to install or upgrade Expressive Code separately on Starlight sites.

We always try to keep Starlight’s dependencies up to date, so upgrading Starlight should automatically upgrade Expressive Code as well:

  1. Follow the instructions in Starlight’s documentation to upgrade your site to the latest version of Starlight.

  2. You’re done! 🎉

Overriding Expressive Code within Starlight

If you’ve already installed the latest version of Starlight and want to use a later version of astro-expressive-code than the one it comes with, you can use the overrides feature of your package manager.

  1. Add the following overrides section to your package.json:

    package.json
    {
      "name": "my-starlight-site",
      "version": "0.0.1",
      "type": "module",
      "scripts": {
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview",
      },
      "dependencies": {
    8 collapsed lines
        "@astrojs/starlight": "^0.13.1",
        "astro": "^3.3.0",
        "mdast-util-from-markdown": "^2.0.0",
        "mdast-util-to-markdown": "^2.1.0",
        "mdast-util-to-string": "^4.0.0",
        "sharp": "^0.32.5",
        "tsm": "^2.3.0",
        "unist-util-visit": "^4.1.2"
      },
      "overrides": {
        "astro-expressive-code": "latest"
      }
    }

  2. Run the install command of your package manager to apply the override:

    Terminal window
    npm i

  3. Check our release history for breaking changes that might affect your site, and apply any necessary changes.

  4. You’re done! 🎉

Next.js

To upgrade your Next.js site to the latest version of Expressive Code, follow these steps:

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

  2. Install the latest version of rehype-expressive-code:

    Terminal window
    npm i rehype-expressive-code@latest

  3. Check our release history for breaking changes that might affect your site, and apply any necessary changes.

  4. You’re done! 🎉