Add site syntax highlighting

site/decodal-site/src/style.css

@@ -114,7 +114,7 @@ main.playground {
 }
 
 .markdown pre,
-.pane pre {
+.output-pane pre {
   background: #0f172a;
   border-radius: 10px;
   color: #e5e7eb;
@@ -133,6 +133,34 @@ main.playground {
   padding: 1px 4px;
 }
 
+.tok-keyword {
+  color: #93c5fd;
+  font-weight: 700;
+}
+
+.tok-type {
+  color: #67e8f9;
+}
+
+.tok-literal,
+.tok-number {
+  color: #fbbf24;
+}
+
+.tok-string,
+.tok-regex {
+  color: #86efac;
+}
+
+.tok-comment {
+  color: #94a3b8;
+  font-style: italic;
+}
+
+.tok-operator {
+  color: #f9a8d4;
+}
+
 .playground-page {
   height: calc(100vh - 104px);
 }
@@ -194,13 +222,43 @@ button:disabled {
   text-transform: uppercase;
 }
 
-textarea {
-  border: 0;
+.editor-wrap {
+  background: #0f172a;
   flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.editor-wrap pre,
+.editor-wrap textarea {
+  border: 0;
+  box-sizing: border-box;
   font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  outline: none;
+  inset: 0;
+  margin: 0;
+  overflow: auto;
   padding: 14px;
+  position: absolute;
+  tab-size: 2;
+  white-space: pre;
+}
+
+.editor-wrap pre {
+  color: #e5e7eb;
+  pointer-events: none;
+}
+
+.editor-wrap textarea {
+  background: transparent;
+  caret-color: #e5e7eb;
+  color: transparent;
+  outline: none;
   resize: none;
+  width: 100%;
+}
+
+.editor-wrap textarea::selection {
+  background: rgb(59 130 246 / 0.35);
 }
 
 .output-pane pre {