Add Monokai syntax highlighting styles

style.css

@@ -58,6 +58,16 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
   --accent-hover: #8f3508;
   --code-bg: #282623;
   --code-text: #f5eee5;
+  /* Monokai Light tokens use darker variants for accessible contrast on a light panel. */
+  --monokai-bg: #faf8f5;
+  --monokai-border: #d5d0c8;
+  --monokai-text: #272822;
+  --monokai-comment: #75716a;
+  --monokai-pink: #c4265e;
+  --monokai-green: #4f7902;
+  --monokai-yellow: #9a6700;
+  --monokai-purple: #7653b7;
+  --monokai-cyan: #007c91;
   --shadow: 0 10px 30px rgba(45, 34, 25, 0.08);
   --content: 760px;
   --wide: 1180px;
@@ -73,6 +83,15 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
   --accent-hover: #ff9d6a;
   --code-bg: #0e0e0d;
   --code-text: #f5eee5;
+  --monokai-bg: #272822;
+  --monokai-border: #3e3d32;
+  --monokai-text: #f8f8f2;
+  --monokai-comment: #75715e;
+  --monokai-pink: #f92672;
+  --monokai-green: #a6e22e;
+  --monokai-yellow: #e6db74;
+  --monokai-purple: #ae81ff;
+  --monokai-cyan: #66d9ef;
   --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
 }
 /* Automatic mode (and no saved preference) follows the operating-system color scheme. */
@@ -89,6 +108,15 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
     --accent-hover: #ff9d6a;
     --code-bg: #0e0e0d;
     --code-text: #f5eee5;
+    --monokai-bg: #272822;
+    --monokai-border: #3e3d32;
+    --monokai-text: #f8f8f2;
+    --monokai-comment: #75715e;
+    --monokai-pink: #f92672;
+    --monokai-green: #a6e22e;
+    --monokai-yellow: #e6db74;
+    --monokai-purple: #ae81ff;
+    --monokai-cyan: #66d9ef;
     --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
   }
 }
@@ -466,6 +494,77 @@ h4 {
   background: var(--surface);
   border: 1px solid var(--line);
 }
+
+/* Monokai Light/Dark tokens follow the active site color mode. */
+.entry-content pre,
+.entry-content pre.wp-block-code,
+.entry-content .wp-block-code {
+  border: 1px solid var(--monokai-border);
+  background: var(--monokai-bg);
+  color: var(--monokai-text);
+}
+
+/* Syntax Highlighting Code Block uses Highlight.js classes inside the core Code block. */
+.entry-content .wp-block-code code.hljs,
+.entry-content .wp-block-code .hljs {
+  display: block;
+  padding: 0;
+  background: transparent !important;
+  color: var(--monokai-text) !important;
+}
+
+.entry-content .wp-block-code .hljs-comment {
+  color: var(--monokai-comment) !important;
+}
+
+.entry-content .wp-block-code .hljs-keyword,
+.entry-content .wp-block-code .hljs-selector-tag,
+.entry-content .wp-block-code .hljs-literal,
+.entry-content .wp-block-code .hljs-name,
+.entry-content .wp-block-code .hljs-tag {
+  color: var(--monokai-pink) !important;
+}
+
+.entry-content .wp-block-code .hljs-title,
+.entry-content .wp-block-code .hljs-section,
+.entry-content .wp-block-code .hljs-built_in,
+.entry-content .wp-block-code .hljs-function .hljs-title {
+  color: var(--monokai-green) !important;
+}
+
+.entry-content .wp-block-code .hljs-string,
+.entry-content .wp-block-code .hljs-quote,
+.entry-content .wp-block-code .hljs-link,
+.entry-content .wp-block-code .hljs-type {
+  color: var(--monokai-yellow) !important;
+}
+
+.entry-content .wp-block-code .hljs-number,
+.entry-content .wp-block-code .hljs-regexp,
+.entry-content .wp-block-code .hljs-meta {
+  color: var(--monokai-purple) !important;
+}
+
+.entry-content .wp-block-code .hljs-attribute,
+.entry-content .wp-block-code .hljs-attr,
+.entry-content .wp-block-code .hljs-symbol,
+.entry-content .wp-block-code .hljs-variable,
+.entry-content .wp-block-code .hljs-template-variable {
+  color: var(--monokai-cyan) !important;
+}
+
+.entry-content .wp-block-code .hljs-addition {
+  color: var(--monokai-green) !important;
+}
+
+.entry-content .wp-block-code .hljs-deletion {
+  color: var(--monokai-pink) !important;
+}
+
+.entry-content .wp-block-code .shcb-line-numbers .shcb-loc::before {
+  border-right-color: var(--monokai-border);
+  color: var(--monokai-comment);
+}
 .wp-block-image,
 .entry-content figure {
   margin-left: 0;