feat: add syntax highlighting to template preview editor

Uses prism-react-renderer with Dracula theme overlay technique
for real-time syntax coloring in the template editor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: juandav

apps/website/src/pages/preview.module.css

@@ -87,19 +87,52 @@
   letter-spacing: 0.5px;
 }
 
-.editor {
+.editorWrapper {
+  position: relative;
   flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.editorHighlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 1rem;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.85rem;
+  line-height: 1.6;
+  overflow: auto;
+  pointer-events: none;
+  background: #282a36;
+  white-space: pre;
+  word-wrap: normal;
+}
+
+.editorTextarea {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  border: none;
-  resize: none;
+  height: 100%;
+  margin: 0;
   padding: 1rem;
   font-family: var(--ifm-font-family-monospace);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   line-height: 1.6;
-  background: var(--ifm-background-color);
-  color: var(--ifm-font-color-base);
+  border: none;
+  resize: none;
+  background: transparent;
+  color: transparent;
+  caret-color: #f8f8f2;
   outline: none;
-  min-height: 0;
+  overflow: auto;
+  white-space: pre;
+  word-wrap: normal;
+  -webkit-text-fill-color: transparent;
 }
 
 .preview {

apps/website/src/pages/preview.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import Layout from '@theme/Layout';
+import { Highlight, themes } from 'prism-react-renderer';
 import * as Handlebars from 'handlebars';
 import styles from './preview.module.css';
 
@@ -360,6 +361,58 @@ function compileTemplate(
   }
 }
 
+const adapterToLanguage: Record<Adapter, string> = {
+  handlebars: 'handlebars',
+  ejs: 'markup',
+  pug: 'pug',
+};
+
+function HighlightedEditor({
+  value,
+  onChange,
+  language,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  language: string;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const preRef = useRef<HTMLPreElement>(null);
+
+  const handleScroll = () => {
+    if (textareaRef.current && preRef.current) {
+      preRef.current.scrollTop = textareaRef.current.scrollTop;
+      preRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+  };
+
+  return (
+    <div className={styles.editorWrapper}>
+      <Highlight theme={themes.dracula} code={value} language={language}>
+        {({ tokens, getLineProps, getTokenProps }) => (
+          <pre ref={preRef} className={styles.editorHighlight}>
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+      <textarea
+        ref={textareaRef}
+        className={styles.editorTextarea}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onScroll={handleScroll}
+        spellCheck={false}
+      />
+    </div>
+  );
+}
+
 export default function Preview(): JSX.Element {
   const [adapter, setAdapter] = useState<Adapter>('handlebars');
   const [template, setTemplate] = useState(adapters.handlebars.defaultTemplate);
@@ -432,11 +485,10 @@ export default function Preview(): JSX.Element {
               <span>Template</span>
               <span className={styles.badge}>{adapters[adapter].label}</span>
             </div>
-            <textarea
-              className={styles.editor}
+            <HighlightedEditor
               value={template}
-              onChange={(e) => setTemplate(e.target.value)}
-              spellCheck={false}
+              onChange={setTemplate}
+              language={adapterToLanguage[adapter]}
             />
             {showContext && (
               <textarea