diff --git a/index.ts b/index.ts
index 9d6b2a8..024c4c6 100644
--- a/index.ts
+++ b/index.ts
@@ -29,10 +29,17 @@ interface RFC {
   git: RFCGitInfo;
 }
 
+const HLJS_VERSION = "11.11.1";
+const HLJS_CDN = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${HLJS_VERSION}`;
+
 const THEME_SCRIPT = `
 (function() {
   const saved = localStorage.getItem('theme') || 'light';
   document.documentElement.setAttribute('data-theme', saved);
+  var light = document.getElementById('hljs-light');
+  var dark = document.getElementById('hljs-dark');
+  if (light) light.disabled = saved === 'dark';
+  if (dark) dark.disabled = saved !== 'dark';
 })();
 `;
 
@@ -60,6 +67,10 @@ function updateToggleIcon() {
   const current = document.documentElement.getAttribute('data-theme');
   btn.innerHTML = current === 'dark' ? '${ICON_SUN}' : '${ICON_MOON}';
   btn.setAttribute('aria-label', current === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+  var light = document.getElementById('hljs-light');
+  var dark = document.getElementById('hljs-dark');
+  if (light) light.disabled = current === 'dark';
+  if (dark) dark.disabled = current !== 'dark';
 }
 
 document.addEventListener('DOMContentLoaded', updateToggleIcon);
@@ -93,6 +104,8 @@ function baseHTML(
   <title>${escapeHTML(title)}</title>
   <link rel="icon" type="image/svg+xml" href="${basePath}vortex_logo.svg">
   <link rel="stylesheet" href="${cssPath}">
+  <link rel="stylesheet" id="hljs-light" href="${HLJS_CDN}/styles/github.min.css">
+  <link rel="stylesheet" id="hljs-dark" href="${HLJS_CDN}/styles/github-dark.min.css">
   <script>${THEME_SCRIPT}</script>
 </head>
 <body>
@@ -114,7 +127,9 @@ ${content}
       Vortex RFC Archive
     </footer>
   </div>
-  <script>${TOGGLE_SCRIPT}</script>${liveReload ? `\n  <script>${LIVE_RELOAD_SCRIPT}</script>` : ""}
+  <script src="${HLJS_CDN}/highlight.min.js"></script>
+  <script>${TOGGLE_SCRIPT}</script>
+  <script>hljs.highlightAll();</script>${liveReload ? `\n  <script>${LIVE_RELOAD_SCRIPT}</script>` : ""}
 </body>
 </html>`;
 }
diff --git a/styles.css b/styles.css
index 4f65a45..fdee76c 100644
--- a/styles.css
+++ b/styles.css
@@ -239,7 +239,7 @@ li {
 
 code {
   font-family:
-    "IBM Plex Mono", "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
+    "SF Mono", "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
   background: var(--code-bg);
   padding: 0.125rem 0.375rem;
   border-radius: 3px;
@@ -248,15 +248,19 @@ code {
 
 pre {
   font-family:
-    "IBM Plex Mono", "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
-  background: var(--code-bg);
+    "SF Mono", "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
   border: 1px solid var(--border);
   border-radius: 4px;
   padding: 1rem;
   overflow-x: auto;
   margin-bottom: 1rem;
   font-size: 0.875rem;
-  line-height: 1;
+  line-height: 1.5;
+}
+
+/* Let highlight.js control background; fall back to --code-bg for plain blocks. */
+pre:not(:has(.hljs)) {
+  background: var(--code-bg);
 }
 
 pre code {
@@ -265,6 +269,10 @@ pre code {
   border-radius: 0;
 }
 
+pre code.hljs {
+  padding: 0;
+}
+
 blockquote {
   border-left: 3px solid var(--border);
   padding-left: 1rem;
