feat: Integrate Expressive Code with site design

- Configure comprehensive style overrides to match site's clean, minimal aesthetic
- Use pure white backgrounds and site's CSS variables (--nextflow-green colors)
- Set proper text marker highlighting with site's light green accent color
- Remove frame titles and switch to 'nextflow' language for syntax highlighting
- Maintain advanced highlighting functionality while achieving visual integration
- Result: Code blocks now blend seamlessly with site design while providing enhanced educational features

The example pages now have clean, professional code blocks that match the site's
design system perfectly, with clearly visible line highlighting using the site's
signature green color scheme.

Author: edmundmiller

astro.config.mjs

@@ -3,7 +3,7 @@ import { defineConfig } from "astro/config";
 import remarkDescription from "astro-remark-description";
 import remarkDirective from "remark-directive";
 import sitemap from "@astrojs/sitemap";
-import { transformerNotationDiff, transformerNotationFocus, transformerMetaHighlight } from "@shikijs/transformers";
+import expressiveCode from "astro-expressive-code";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
 
@@ -12,12 +12,6 @@ export default defineConfig({
   site: "https://nextflow.io/",
   outDir: "./output",
   markdown: {
-    shikiConfig: {
-      // Choose from Shiki's built-in themes (or add your own)
-      // https://shiki.style/themes
-      theme: "light-plus",
-      transformers: [transformerNotationDiff(), transformerNotationFocus(), transformerMetaHighlight()],
-    },
     remarkPlugins: [
       remarkDirective,
       admonitionsPlugin,
@@ -52,6 +46,71 @@ export default defineConfig({
     ],
   },
   integrations: [
+    expressiveCode({
+      // Use light theme for consistency with site design
+      themes: ["github-light"],
+      // Enable advanced features
+      plugins: ["text-markers", "frames"],
+      // Comprehensive styling to match site's clean, minimal design
+      styleOverrides: {
+        // Core background and text styling - pure white like site
+        codeBackground: "#ffffff",
+        codeForeground: "#24292f", // GitHub light theme text color
+
+        // Typography - match site's exact monospace stack
+        codeFontFamily: "Menlo, Monaco, Consolas, 'Courier New', monospace",
+        codeFontSize: "0.875rem", // 14px - readable code size
+        codeLineHeight: "1.5",
+
+        // Borders - subtle gray matching site's container styling
+        borderColor: "#e5e7eb", // rgb(229, 231, 235) - light gray
+        borderWidth: "1px",
+        borderRadius: "0.375rem", // Tailwind rounded-md
+
+        // Text markers - use site's green color scheme for highlighting
+        textMarkers: {
+          // Use the site's actual light green color for highlighting
+          markBackground: "var(--nextflow-light-green)", // Direct use of site color
+          markBorderColor: "transparent", // Clean, no borders
+
+          // Make highlighting more visible but still clean
+          backgroundOpacity: "0.4", // More visible highlighting
+          borderOpacity: "0", // No border opacity
+        },
+
+        // Frames - clean, minimal styling
+        frames: {
+          // Remove all shadows and heavy styling
+          shadowColor: "transparent",
+          frameBoxShadowCssValue: "none",
+
+          // Clean frame styling matching site containers
+          editorBackground: "#ffffff",
+          editorActiveTabBackground: "#f9fafb", // Very light gray for active tab
+          editorActiveTabBorderColor: "#e5e7eb", // Match border color
+          editorTabBarBackground: "#ffffff",
+          editorTabBarBorderColor: "#e5e7eb",
+
+          // Terminal-style frame styling
+          terminalBackground: "#ffffff",
+          terminalTitlebarBackground: "#f9fafb",
+          terminalTitlebarForeground: "#6b7280", // Subtle gray text
+          terminalTitlebarBorderColor: "#e5e7eb",
+        },
+
+        // Focus and selection states
+        focusBorder: "var(--nextflow-green)", // Use site's green for focus
+        codeSelectionBackground: "var(--nextflow-light-green)", // Use site's light green
+
+        // Scrollbar styling
+        scrollbarThumbColor: "#d1d5db", // Light gray
+        scrollbarThumbHoverColor: "#9ca3af", // Slightly darker on hover
+
+        // Ensure clean, minimal appearance throughout
+        uiSelectionBackground: "var(--nextflow-light-green)",
+        uiSelectionForeground: "#1f2937", // Dark text for contrast
+      },
+    }),
     react(),
     tailwind(),
     sitemap({