feat: Integrate CodeMirror with VS Code theme

- Installs CodeMirror and the `@uiw/codemirror-theme-vscode` package to provide enhanced, colorful syntax highlighting for code blocks.
- Implements a client-side script that dynamically replaces all `<pre>` tags with CodeMirror instances.
- Adds support for dynamic language loading for a variety of common languages.
- Correctly loads the script as an ES module in the Astro layout.
- Verifies the visual changes with Playwright to ensure the theme is applied correctly.

Author: google-labs-jules[bot]

dev_server.log

@@ -13,6 +13,7 @@
     "@astrojs/mdx": "^4.2.1",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.3.0",
+    "@babel/runtime": "^7.28.4",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.4",
@@ -23,6 +24,7 @@
     "@codemirror/state": "^6.5.3",
     "@codemirror/view": "^6.39.9",
     "@tailwindcss/vite": "^4.1.18",
+    "@uiw/codemirror-theme-vscode": "^4.25.4",
     "astro": "^5.5.2",
     "codemirror": "^6.0.2",
     "lucide-astro": "^0.556.0",

package-lock.json

@@ -119,6 +119,8 @@ const tagList: string[] =
 			</article>
 		</main>
 		<Footer />
-        <script src="../scripts/codemirror-loader.js"></script>
+        <script>
+            import "../scripts/codemirror-loader.js";
+        </script>
 	</body>
 </html>

package.json

@@ -1,6 +1,7 @@
 
 import { EditorView, basicSetup } from "codemirror";
 import { EditorState } from "@codemirror/state";
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 
 async function main() {
     const codeblocks = document.querySelectorAll('pre');
@@ -66,36 +67,7 @@ async function main() {
             extensions: [
                 ...extensions,
                 EditorView.editable.of(false),
-                EditorView.theme({
-                    "&": {
-                        color: "var(--slate)",
-                        backgroundColor: "var(--light-navy)",
-                        borderRadius: "0.5rem",
-                        border: "1px solid var(--lightest-navy)",
-                        padding: "0.5rem 0",
-                    },
-                    ".cm-content": {
-                        padding: "0 1rem",
-                    },
-                    "&.cm-focused .cm-cursor": {
-                        borderLeftColor: "#fff"
-                    },
-                    "&.cm-focused .cm-selectionBackground, ::selection": {
-                        backgroundColor: "#222"
-                    },
-                    ".cm-gutters": {
-                        backgroundColor: "var(--light-navy)",
-                        color: "var(--slate)",
-                        border: "none",
-                        padding: "0 0.5rem"
-                    },
-                    ".cm-scroller": {
-                        fontFamily: "var(--font-mono)"
-                    },
-                    ".cm-line": {
-                        padding: "0"
-                    }
-                })
+                vscodeDark
             ]
         });