Getting Started

The Collapsible plugin enhances Expressive Code blocks on your website by automatically collapsing long code blocks with expand/collapse controls, keeping your documentation clean and readable.

This guide will show you how to add it to your website.

Set-up

1. Install the expressive-code-collapsible dependency using your preferred package manager:

   npm

   npm i expressive-code-collapsible

   pnpm

   pnpm add expressive-code-collapsible

   yarn

   yarn add expressive-code-collapsible

2. Add the plugin to your site’s Expressive Code configuration:

   Astro

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import astroExpressiveCode from 'astro-expressive-code';
   import { pluginCollapsible } from 'expressive-code-collapsible';
   
   export default defineConfig({
     integrations: [
       astroExpressiveCode({
         plugins: [pluginCollapsible()],
       }),
     ],
   });

   Starlight

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   import { pluginCollapsible } from 'expressive-code-collapsible';
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'My Starlight site',
         expressiveCode: {
           plugins: [pluginCollapsible()],
         },
       }),
     ],
   });

   Next.js

   next.config.mjsShow moreShow less

   import createMDX from '@next/mdx';
   import rehypeExpressiveCode from 'rehype-expressive-code';
   import { pluginCollapsible } from 'expressive-code-collapsible';
   
   /** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
   const rehypeExpressiveCodeOptions = {
     plugins: [pluginCollapsible()],
   };
   
   /** @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);

   Show moreShow less
   EC config file

   ec.config.mjs

   import { pluginCollapsible } from 'expressive-code-collapsible';
   
   export default {
     plugins: [pluginCollapsible()],
   };

3. That’s it! The Collapsible plugin works out of the box with sensible defaults.

Usage

For more information on how to configure the plugin, see the Configuration page.

Support

This plugin is open-source software licensed under the MIT license. If you run into any bugs, please report issues on GitHub.