feat: Enhance Expressive Code styling with site-consistent design

- Increase code font size to 1.5rem for better readability
- Use site's color variables for text markers and focus states
- Clean, minimal frame styling matching site containers
- Remove shadows and heavy styling for cleaner appearance
- Disable copy button and ensure line numbers are enabled

Author: edmundmiller

ec.config.mjs

@@ -10,16 +10,67 @@ export default defineEcConfig({
 
   // Disable Expressive Code's built-in copy button and enable line numbers
   defaultProps: {
-    showCopyToClipboardButton: true,
+    showCopyToClipboardButton: false,
     showLineNumbers: true,
   },
 
-  // Configuration with proper spacing for text marker labels
+  // Comprehensive styling to match site's clean, minimal design
   styleOverrides: {
-    // Increase inline padding to prevent label overlap with code
-    codePaddingInline: "3rem", // Increased from default 1.35rem to accommodate labels
+    // Core background and text styling - pure white like site
+    codeBackground: "#ffffff",
+    codeForeground: "#24292f", // GitHub light theme text color
 
-    // Use defaults for text markers
-    textMarkers: {},
+    // Typography - match site's exact monospace stack
+    codeFontFamily: "Menlo, Monaco, Consolas, 'Courier New', monospace",
+    codeFontSize: "1.5rem", // 24px - much larger, very 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
   },
 });