feat(astro): custom expressive code plugins

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';

packages/template/astro.config.ts

@@ -1,9 +1,14 @@
 import tutorialkit from '@tutorialkit/astro';
 import { defineConfig } from 'astro/config';
+import { pluginColorChips } from 'expressive-code-color-chips';
 
 export default defineConfig({
   devToolbar: {
     enabled: false,
   },
-  integrations: [tutorialkit()],
+  integrations: [
+    tutorialkit({
+      expressiveCodePlugins: [pluginColorChips()],
+    }),
+  ],
 });

packages/template/package.json

@@ -24,6 +24,7 @@
     "@types/node": "^20.14.6",
     "@types/react": "^18.3.3",
     "astro": "^4.15.0",
+    "expressive-code-color-chips": "0.1.2",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.4.5"
   }

packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md

@@ -277,6 +277,32 @@ const client = createPublicClient({
 const blockNumber = await client.getBlockNumber();
 ```
 
+## Custom Expressive Code Plugins
+
+This code block uses the custom `expressive-code-color-chips` plugin for expressive code.  The plugin adds the color thumbnail preview next to the css color value.
+
+```css
+.some-class {
+  color: #33ff66;
+}
+```
+
+The plugin is registered in the `astro.config.ts` file like this:
+
+```ts title=astro.config.ts
+import tutorialkit from '@tutorialkit/astro';
+import { defineConfig } from 'astro/config';
+import { pluginColorChips } from 'expressive-code-color-chips';
+
+export default defineConfig({
+  integrations: [
+    tutorialkit({
+      expressiveCodePlugins: [pluginColorChips()],
+    }),
+  ],
+});
+```
+
 ## Tabs (TODO)
 
 TODO