Getting Started

The Fullscreen plugin enhances Expressive Code blocks on your website by adding a fullscreen viewing mode with font size controls, keyboard navigation, and extensive customization options.

This

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

Set-up

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

   npm

   npm i expressive-code-fullscreen

   yarn

   yarn add expressive-code-fullscreen

   pnpm

   pnpm add expressive-code-fullscreen

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 { pluginFullscreen } from 'expressive-code-fullscreen';
   
   export default defineConfig({
     integrations: [
       astroExpressiveCode({
         plugins: [pluginFullscreen()],
       }),
     ],
   });

   Starlight

   astro.config.mjs

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

   Next.js

   next.config.mjs

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

   EC config file

   ec.config.mjs

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

3. That’s it! The Fullscreen 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.