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
You can add Expressive Code to your Astro site by installing our framework integration astro-expressive-code
. Follow these steps:
-
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 likepnpm
andyarn
are also supported). -
Use Astro’s CLI to install
astro-expressive-code
:Terminal window npx astro add astro-expressive-codeTerminal window pnpm astro add astro-expressive-codeTerminal window yarn astro add astro-expressive-codeConfirm all prompts to download this third-party integration and add it to your site’s configuration.
-
You’re done! 🎉
Starlight
Next.js
You can add Expressive Code to your Next.js site by installing our framework integration rehype-expressive-code
. Follow these steps:
-
Change into the directory of your Next.js site.
-
Add the integration package
rehype-expressive-code
to your site’s dependencies:Terminal window npm i rehype-expressive-codeTerminal window pnpm add rehype-expressive-codeTerminal window yarn add rehype-expressive-code -
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) -
You’re done! 🎉