Getting Started

The Language Badge plugin enhances Expressive Code blocks on your website by adding a language badge to the codeblocks.

This

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

Set-up

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

   npm

   npm i expressive-code-language-badge

   pnpm

   pnpm add expressive-code-language-badge

   yarn

   yarn add expressive-code-language-badge

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

   Starlight

   astro.config.mjs

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

   Next.js

   next.config.mjs

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

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