feat: add syntax highlighting for code blocks

Integrates @11ty/eleventy-plugin-syntaxhighlight (PrismJS) for
build-time syntax highlighting of fenced code blocks. Includes
a custom GitHub-inspired theme with dark mode support (.dark class).

All existing articles with triple-backtick code blocks will
automatically get highlighting on next Eleventy rebuild.

Also fixes overflow-x: hidden on .prose/.e-content that was
clipping scrollable code blocks — changed to overflow-x: clip.

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

css/prism-theme.css

@@ -0,0 +1,201 @@
+/* Syntax Highlighting — PrismJS theme for indiekit-eleventy-theme
+   Light mode: clean, high-contrast colors
+   Dark mode: scoped under .dark (Tailwind darkMode: "class") */
+
+/* ── Base code block styling ── */
+code[class*="language-"],
+pre[class*="language-"] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;
+  line-height: 1.7;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  tab-size: 2;
+  hyphens: none;
+}
+
+pre[class*="language-"] {
+  padding: 1.25em;
+  margin: 1.5em 0;
+  overflow: auto;
+  border-radius: 0.5rem;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  white-space: normal;
+}
+
+/* ── Light Mode ── */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #24292e;
+}
+
+pre[class*="language-"] {
+  background: #f6f8fa;
+  border: 1px solid #e1e4e8;
+}
+
+:not(pre) > code[class*="language-"] {
+  background: #f6f8fa;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a737d;
+}
+
+.token.punctuation {
+  color: #24292e;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #005cc5;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #032f62;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #d73a49;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #d73a49;
+}
+
+.token.function,
+.token.class-name {
+  color: #6f42c1;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e36209;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+/* Line highlighting */
+.highlight-line-active {
+  background-color: #fffbdd;
+  display: inline-block;
+  width: calc(100% + 2.5em);
+  margin-left: -1.25em;
+  padding-left: 1.25em;
+}
+
+/* ── Dark Mode ── */
+.dark code[class*="language-"],
+.dark pre[class*="language-"] {
+  color: #e1e4e8;
+}
+
+.dark pre[class*="language-"] {
+  background: #161b22;
+  border-color: #30363d;
+}
+
+.dark :not(pre) > code[class*="language-"] {
+  background: #161b22;
+}
+
+.dark .token.comment,
+.dark .token.prolog,
+.dark .token.doctype,
+.dark .token.cdata {
+  color: #8b949e;
+}
+
+.dark .token.punctuation {
+  color: #e1e4e8;
+}
+
+.dark .token.property,
+.dark .token.tag,
+.dark .token.boolean,
+.dark .token.number,
+.dark .token.constant,
+.dark .token.symbol,
+.dark .token.deleted {
+  color: #79c0ff;
+}
+
+.dark .token.selector,
+.dark .token.attr-name,
+.dark .token.string,
+.dark .token.char,
+.dark .token.builtin,
+.dark .token.inserted {
+  color: #a5d6ff;
+}
+
+.dark .token.operator,
+.dark .token.entity,
+.dark .token.url,
+.dark .language-css .token.string,
+.dark .style .token.string {
+  color: #ff7b72;
+}
+
+.dark .token.atrule,
+.dark .token.attr-value,
+.dark .token.keyword {
+  color: #ff7b72;
+}
+
+.dark .token.function,
+.dark .token.class-name {
+  color: #d2a8ff;
+}
+
+.dark .token.regex,
+.dark .token.important,
+.dark .token.variable {
+  color: #ffa657;
+}
+
+.dark .highlight-line-active {
+  background-color: rgba(56, 139, 253, 0.15);
+}

css/tailwind.css

@@ -441,6 +441,11 @@
     @apply break-words;
   }
 
+  pre code {
+    word-break: normal;
+    overflow-wrap: normal;
+  }
+
   /* Links in content - break long URLs */
   .e-content a,
   .prose a {
@@ -448,10 +453,10 @@
     word-break: break-word;
   }
 
-  /* Content containers - prevent horizontal overflow */
+  /* Content containers - clip horizontal overflow but allow pre blocks to scroll */
   .e-content,
   .prose {
-    @apply overflow-x-hidden;
+    overflow-x: clip;
     max-width: 100%;
   }