feat(astro): custom expressive code plugins (#444)

Author: isaacplmann

packages/astro/src/index.ts

@@ -1,5 +1,6 @@
 import { fileURLToPath } from 'node:url';
 import type { AstroConfig, AstroIntegration } from 'astro';
+import type { ExpressiveCodePlugin } from 'astro-expressive-code';
 import { extraIntegrations } from './integrations.js';
 import { updateMarkdownConfig } from './remark/index.js';
 import { tutorialkitCore } from './vite-plugins/core.js';
@@ -59,13 +60,21 @@ export interface Options {
      */
     scope: string;
   };
+
+  /**
+   * Expressive code plugins.
+   *
+   * @default []
+   */
+  expressiveCodePlugins?: ExpressiveCodePlugin[];
 }
 
 export default function createPlugin({
   defaultRoutes = true,
   components,
   isolation,
   enterprise,
+  expressiveCodePlugins = [],
 }: Options = {}): AstroIntegration {
   const webcontainerFiles = new WebContainerFiles();
 
@@ -137,7 +146,11 @@ export default function createPlugin({
 
         // inject the additional integrations right after ours
         const selfIndex = config.integrations.findIndex((integration) => integration.name === '@tutorialkit/astro');
-        config.integrations.splice(selfIndex + 1, 0, ...extraIntegrations({ root: fileURLToPath(config.root) }));
+        config.integrations.splice(
+          selfIndex + 1,
+          0,
+          ...extraIntegrations({ root: fileURLToPath(config.root), expressiveCodePlugins }),
+        );
       },
       'astro:config:done'({ config }) {
         _config = config;

packages/astro/src/integrations.ts

@@ -4,14 +4,20 @@ import react from '@astrojs/react';
 import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
 import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
 import { getInlineContentForPackage } from '@tutorialkit/theme';
-import expressiveCode from 'astro-expressive-code';
+import expressiveCode, { type ExpressiveCodePlugin } from 'astro-expressive-code';
 import UnoCSS from 'unocss/astro';
 
-export function extraIntegrations({ root }: { root: string }) {
+export function extraIntegrations({
+  root,
+  expressiveCodePlugins = [],
+}: {
+  root: string;
+  expressiveCodePlugins?: ExpressiveCodePlugin[];
+}) {
   return [
     react(),
     expressiveCode({
-      plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
+      plugins: [pluginCollapsibleSections(), pluginLineNumbers(), ...expressiveCodePlugins],
       themes: ['dark-plus', 'light-plus'],
       customizeTheme: (theme) => {
         const isDark = theme.type === 'dark';