Enable syntax highlighting for docs code blocks

Author: code5717

site/package-lock.json

@@ -17,6 +17,7 @@
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.1",
+    "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {

site/package.json

@@ -1,6 +1,7 @@
 import { Navigate, NavLink, Route, Routes, useParams } from 'react-router-dom'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
 import { docs, getDocBySlug, getDocContent, getDocNeighbors, isDocSlug } from './content/docRegistry'
 
 function App() {
@@ -151,7 +152,9 @@ function DocsPage() {
         </div>
 
         <article className="doc-markdown">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
+          <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+            {markdown}
+          </ReactMarkdown>
         </article>
 
         <div className="mt-10 grid gap-3 border-t border-[var(--line)] pt-5 sm:grid-cols-2">

site/src/App.tsx

@@ -252,6 +252,43 @@ a {
   font-size: 0.94em;
 }
 
+.doc-markdown pre code.hljs {
+  color: color-mix(in srgb, var(--text), white 8%);
+  background: transparent;
+}
+
+.doc-markdown .hljs-keyword,
+.doc-markdown .hljs-selector-tag,
+.doc-markdown .hljs-literal,
+.doc-markdown .hljs-type {
+  color: #d97706;
+}
+
+.doc-markdown .hljs-string,
+.doc-markdown .hljs-attr,
+.doc-markdown .hljs-template-tag,
+.doc-markdown .hljs-template-variable {
+  color: #0891b2;
+}
+
+.doc-markdown .hljs-number,
+.doc-markdown .hljs-symbol,
+.doc-markdown .hljs-bullet {
+  color: #a855f7;
+}
+
+.doc-markdown .hljs-title,
+.doc-markdown .hljs-function,
+.doc-markdown .hljs-class .hljs-title {
+  color: #16a34a;
+}
+
+.doc-markdown .hljs-comment,
+.doc-markdown .hljs-quote {
+  color: color-mix(in srgb, var(--text-dim), var(--surface) 25%);
+  font-style: italic;
+}
+
 .doc-markdown blockquote {
   margin: 1rem 0;
   border-left: 3px solid var(--teal);