Add syntax highlighting token colors and code block wrap toggle

Author: bigtiger

src/css/components/code.css

@@ -35,12 +35,17 @@ pre code {
     padding: 0;
 }
 
-/* Language label — Ghost adds data-language on the <pre> element */
-pre[data-language]::before {
+pre.wrap {
+    white-space: pre-wrap;
+    overflow-x: visible;
+}
+
+/* Language label — Prism adds language-* class to <pre> */
+pre[class*="language-"]::before {
     background-color: var(--color-yellow);
     border-radius: 0 0 4px 4px;
     color: var(--color-navy);
-    content: attr(data-language);
+    content: attr(class);
     font-family: 'Inter', sans-serif;
     font-size: 0.7rem;
     font-weight: 600;
@@ -53,62 +58,62 @@ pre[data-language]::before {
 }
 
 /* Syntax token colors — tuned for the navy background */
-.kg-code-card .token.comment,
-.kg-code-card .token.prolog,
-.kg-code-card .token.doctype,
-.kg-code-card .token.cdata {
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
     color: #768390;
     font-style: italic;
 }
 
-.kg-code-card .token.punctuation {
+.token.punctuation {
     color: #8dbbe8;
 }
 
-.kg-code-card .token.namespace {
+.token.namespace {
     opacity: 0.7;
 }
 
-.kg-code-card .token.property,
-.kg-code-card .token.tag,
-.kg-code-card .token.boolean,
-.kg-code-card .token.number,
-.kg-code-card .token.constant,
-.kg-code-card .token.symbol,
-.kg-code-card .token.deleted {
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
     color: var(--color-red);
 }
 
-.kg-code-card .token.selector,
-.kg-code-card .token.attr-name,
-.kg-code-card .token.string,
-.kg-code-card .token.char,
-.kg-code-card .token.builtin,
-.kg-code-card .token.inserted {
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
     color: var(--color-green);
 }
 
-.kg-code-card .token.operator,
-.kg-code-card .token.entity,
-.kg-code-card .token.url,
+.token.operator,
+.token.entity,
+.token.url,
 .language-css .token.string,
 .style .token.string {
     color: #8dbbe8;
 }
 
-.kg-code-card .token.atrule,
-.kg-code-card .token.attr-value,
-.kg-code-card .token.keyword {
+.token.atrule,
+.token.attr-value,
+.token.keyword {
     color: var(--color-blue);
 }
 
-.kg-code-card .token.function,
-.kg-code-card .token.class-name {
+.token.function,
+.token.class-name {
     color: var(--color-yellow);
 }
 
-.kg-code-card .token.regex,
-.kg-code-card .token.important,
-.kg-code-card .token.variable {
+.token.regex,
+.token.important,
+.token.variable {
     color: #f69d50;
 }

src/js/post/index.js

@@ -1,6 +1,18 @@
 // Ship JS only active on post pages for better performance
 import tocbot from 'tocbot';
 
+// Apply .wrap class to any <pre> immediately following a <!--wrap--> HTML card
+document.querySelectorAll('pre').forEach((pre) => {
+    let node = pre.closest('.kg-code-card') ?? pre;
+    let prev = node.previousSibling;
+    while (prev && prev.nodeType === Node.TEXT_NODE) {
+        prev = prev.previousSibling;
+    }
+    if (prev && prev.nodeType === Node.COMMENT_NODE && prev.nodeValue.trim() === 'wrap') {
+        pre.classList.add('wrap');
+    }
+});
+
 tocbot.init({
     // Where to render the table of contents.
     tocSelector: '.gh-toc',