feat: replace prism with codemirror

ops/cache/cache.css

@@ -273,6 +273,37 @@ html[data-theme='dark'] .cache .code-actions a.code-button span.icon {
   padding: 12px 0;
 }
 
+/* Read-only CodeMirror viewer in the code modal (non-JSON fallback path). */
+.cache .code-viewer {
+  max-height: 70vh;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: auto;
+}
+
+/* stylelint-disable selector-class-pattern -- CodeMirror class names are camelCase */
+.cache .code-viewer .cm-gutters {
+  background-color: var(--layer-depth);
+  color: light-dark(#999, #8b949e);
+  border-right: 1px solid var(--color-border);
+}
+
+.cache .code-viewer .cm-activeLineGutter,
+.cache .code-viewer .cm-activeLine {
+  background-color: light-dark(#0000000a, #ffffff0a);
+}
+
+/* CodeMirror's default selection background is a light-theme-only color with
+   no dark-mode awareness, making selected text unreadable in dark mode. */
+.cache .code-viewer .cm-selectionBackground {
+  background-color: light-dark(var(--gray-300), var(--transparent-white-300));
+}
+
+.cache .code-viewer .cm-focused .cm-selectionBackground {
+  background-color: light-dark(var(--gray-400), var(--transparent-white-400));
+}
+/* stylelint-enable selector-class-pattern */
+
 .cache .json-tree .json-tree-line {
   display: grid;
   grid-template-columns: 1.2em 32ch 1fr;

ops/cache/cache.js

@@ -1,5 +1,4 @@
 import { sampleRUM } from '../../scripts/aem.js';
-import { loadPrismLibrary } from '../../utils/prism/prism.js';
 import { registerToolReady } from '../../scripts/scripts.js';
 import escapeHtml from '../../utils/html.js';
 
@@ -24,11 +23,27 @@ if (localStorage.getItem('cache-debug-key')) {
   }
 }
 
-let prismLoaded = false;
-async function loadPrism() {
-  if (prismLoaded) return;
-  prismLoaded = true;
-  await loadPrismLibrary(['json']);
+let createEditorPromise;
+function loadCreateEditor() {
+  if (!createEditorPromise) {
+    createEditorPromise = import('../../vendor/codemirror/codemirror.js')
+      .then((m) => m.default);
+  }
+  return createEditorPromise;
+}
+
+/**
+ * Map our internal language tokens onto the CodeMirror utility's supported
+ * languages. The cache-debug tool calls `showCodeModal('log', ...)` for
+ * non-JSON responses and `showCodeModal('json', ...)` for the rare case where
+ * the JSON parse fails (the tree viewer covers the normal JSON case). Anything
+ * unrecognised (e.g. `'log'`) falls through to `'plain'` so we don't apply the
+ * JSON parse linter to non-JSON content and flood the gutter with false errors.
+ */
+function toEditorLanguage(language) {
+  if (language === 'json') return 'json';
+  if (language === 'html') return 'html';
+  return 'plain';
 }
 
 const ENV_HEADERS = {
@@ -245,7 +260,6 @@ const showCodeModal = async (language, title, text) => {
       </div>
     `;
   } else {
-    await loadPrism();
     content = /* html */`
       <div class="code-panel">
         <div class="code-actions">
@@ -256,7 +270,7 @@ const showCodeModal = async (language, title, text) => {
             <span class="icon"></span>
           </a>
         </div>
-        <pre><code class="language-${language}">${escapeHtml(text)}</code></pre>
+        <div class="code-viewer"></div>
       </div>
     `;
   }
@@ -271,8 +285,14 @@ const showCodeModal = async (language, title, text) => {
     tree.appendChild(renderJsonNode(data, 0));
     container.appendChild(tree);
   } else {
-    // eslint-disable-next-line no-undef
-    Prism.highlightElement(modal.querySelector('code'));
+    const host = modal.querySelector('.code-viewer');
+    const createEditor = await loadCreateEditor();
+    createEditor({
+      parent: host,
+      doc: text,
+      language: toEditorLanguage(language),
+      readOnly: true,
+    });
   }
 
   const copyBtn = modal.querySelector('.code-actions .copy');