fix #91 syntax highlighting of kotlin code blocks on the site

site/src/jsMain/resources/index.html

@@ -67,13 +67,17 @@
     <!-- Loader is imported in the app bundle; no external script tag required -->
     <style>
         /* Reserve space for fixed navbar and ensure in-page anchors don't end up hidden under it */
-      :root { --navbar-offset: 56px; }
+        :root {
+            --navbar-offset: 56px;
+        }
+
         body {
             /* Fallback padding; JS will keep this equal to the real navbar height */
             /*padding-top: var(--navbar-offset);*/
             /* Make native hash jumps account for the fixed header */
             /*scroll-padding-top: calc(var(--navbar-offset) + 8px);*/
         }
+
         /* Also offset scroll for headings and any element targeted by an id */
         .markdown-body h1,
         .markdown-body h2,
@@ -84,6 +88,7 @@
         [id] {
             /*scroll-margin-top: calc(var(--navbar-offset) + 8px);*/
         }
+
         /* Unify markdown and page backgrounds with Bootstrap theme variables */
         .markdown-body {
             box-sizing: border-box;
@@ -92,14 +97,22 @@
             background: var(--bs-body-bg) !important;
             color: var(--bs-body-color) !important;
         }
-      .markdown-body > :first-child { margin-top: 0 !important; }
+
-      .markdown-body table { margin: 1rem 0; }
+        .markdown-body > :first-child {
+            margin-top: 0 !important;
+        }
+
+        .markdown-body table {
+            margin: 1rem 0;
+        }
+
         .markdown-body pre {
             padding: .75rem;
             border-radius: .375rem;
             background: var(--bs-tertiary-bg);
             border: 1px solid var(--bs-border-color);
         }
+
         /* Style only inline code, avoid affecting code blocks inside <pre> to prevent first-line extra indent */
         .markdown-body :not(pre) > code:not([class]) {
             background: var(--bs-tertiary-bg);
@@ -109,47 +122,170 @@
 
         /* Lyng syntax highlighting palette (inspired by default GitHub/VS Code) */
         /* Light theme */
-      .hl-kw  { color: #d73a49; font-weight: 600; }
+        .hl-kw {
-      .hl-ty  { color: #6f42c1; }
+            color: #d73a49;
-      .hl-id  { color: #24292e; }
+            font-weight: 600;
+        }
+
+        .hl-ty {
+            color: #6f42c1;
+        }
+
+        .hl-id {
+            color: #24292e;
+        }
+
         /* Declarations (semantic roles) */
-      .hl-fn  { color: #005cc5; font-weight: 600; }
+        .hl-fn {
-      .hl-class { color: #5a32a3; font-weight: 600; }
+            color: #005cc5;
-      .hl-val { color: #1b7f5a; }
+            font-weight: 600;
-      .hl-var { color: #1b7f5a; text-decoration: underline dotted currentColor; }
+        }
-      .hl-enumc { color: #b08800; font-weight: 600; }
+
-      .hl-param { color: #0969da; font-style: italic; }
+        .hl-class {
-      .hl-num { color: #005cc5; }
+            color: #5a32a3;
-      .hl-str { color: #032f62; }
+            font-weight: 600;
-      .hl-ch  { color: #032f62; }
+        }
-      .hl-rx  { color: #116329; }
+
-      .hl-cmt { color: #6a737d; font-style: italic; }
+        .hl-val {
-      .hl-op  { color: #8250df; }
+            color: #1b7f5a;
-      .hl-punc{ color: #57606a; }
+        }
-      .hl-lbl { color: #e36209; }
+
-      .hl-dir { color: #6f42c1; }
+        .hl-var {
-      .hl-err { color: #b31d28; text-decoration: underline wavy #b31d28; }
+            color: #1b7f5a;
+            text-decoration: underline dotted currentColor;
+        }
+
+        .hl-enumc {
+            color: #b08800;
+            font-weight: 600;
+        }
+
+        .hl-param {
+            color: #0969da;
+            font-style: italic;
+        }
+
+        .hl-num {
+            color: #005cc5;
+        }
+
+        .hl-str {
+            color: #032f62;
+        }
+
+        .hl-ch {
+            color: #032f62;
+        }
+
+        .hl-rx {
+            color: #116329;
+        }
+
+        .hl-cmt {
+            color: #6a737d;
+            font-style: italic;
+        }
+
+        .hl-op {
+            color: #8250df;
+        }
+
+        .hl-punc {
+            color: #57606a;
+        }
+
+        .hl-lbl {
+            color: #e36209;
+        }
+
+        .hl-dir {
+            color: #6f42c1;
+        }
+
+        .hl-err {
+            color: #b31d28;
+            text-decoration: underline wavy #b31d28;
+        }
 
         /* Dark theme overrides (GitHub Dark-like) */
-      [data-bs-theme="dark"] .hl-id   { color: #c9d1d9; }
+        [data-bs-theme="dark"] .hl-id {
-      [data-bs-theme="dark"] .hl-op   { color: #d2a8ff; }
+            color: #c9d1d9;
-      [data-bs-theme="dark"] .hl-punc { color: #8b949e; }
+        }
-      [data-bs-theme="dark"] .hl-kw   { color: #ff7b72; }
+
-      [data-bs-theme="dark"] .hl-ty   { color: #d2a8ff; }
+        [data-bs-theme="dark"] .hl-op {
-      [data-bs-theme="dark"] .hl-fn   { color: #79c0ff; font-weight: 700; }
+            color: #d2a8ff;
-      [data-bs-theme="dark"] .hl-class{ color: #d2a8ff; font-weight: 700; }
+        }
-      [data-bs-theme="dark"] .hl-val  { color: #7ee787; }
+
-      [data-bs-theme="dark"] .hl-var  { color: #7ee787; text-decoration: underline dotted currentColor; }
+        [data-bs-theme="dark"] .hl-punc {
-      [data-bs-theme="dark"] .hl-enumc{ color: #f2cc60; font-weight: 700; }
+            color: #8b949e;
-      [data-bs-theme="dark"] .hl-param{ color: #a5d6ff; font-style: italic; }
+        }
-      [data-bs-theme="dark"] .hl-num  { color: #79c0ff; }
+
+        [data-bs-theme="dark"] .hl-kw {
+            color: #ff7b72;
+        }
+
+        [data-bs-theme="dark"] .hl-ty {
+            color: #d2a8ff;
+        }
+
+        [data-bs-theme="dark"] .hl-fn {
+            color: #79c0ff;
+            font-weight: 700;
+        }
+
+        [data-bs-theme="dark"] .hl-class {
+            color: #d2a8ff;
+            font-weight: 700;
+        }
+
+        [data-bs-theme="dark"] .hl-val {
+            color: #7ee787;
+        }
+
+        [data-bs-theme="dark"] .hl-var {
+            color: #7ee787;
+            text-decoration: underline dotted currentColor;
+        }
+
+        [data-bs-theme="dark"] .hl-enumc {
+            color: #f2cc60;
+            font-weight: 700;
+        }
+
+        [data-bs-theme="dark"] .hl-param {
+            color: #a5d6ff;
+            font-style: italic;
+        }
+
+        [data-bs-theme="dark"] .hl-num {
+            color: #79c0ff;
+        }
+
         [data-bs-theme="dark"] .hl-str,
-      [data-bs-theme="dark"] .hl-ch   { color: #a5d6ff; }
+        [data-bs-theme="dark"] .hl-ch {
-      [data-bs-theme="dark"] .hl-rx   { color: #7ee787; }
+            color: #a5d6ff;
-      [data-bs-theme="dark"] .hl-cmt  { color: #8b949e; }
+        }
-      [data-bs-theme="dark"] .hl-lbl  { color: #ffa657; }
+
-      [data-bs-theme="dark"] .hl-dir  { color: #d2a8ff; }
+        [data-bs-theme="dark"] .hl-rx {
-      [data-bs-theme="dark"] .hl-err  { color: #ffa198; text-decoration-color: #ffa198; }
+            color: #7ee787;
+        }
+
+        [data-bs-theme="dark"] .hl-cmt {
+            color: #8b949e;
+        }
+
+        [data-bs-theme="dark"] .hl-lbl {
+            color: #ffa657;
+        }
+
+        [data-bs-theme="dark"] .hl-dir {
+            color: #d2a8ff;
+        }
+
+        [data-bs-theme="dark"] .hl-err {
+            color: #ffa198;
+            text-decoration-color: #ffa198;
+        }
 
         /* Top-left corner ribbon for version label */
         .corner-ribbon {
@@ -171,6 +307,7 @@
             border: 1px solid rgba(0, 0, 0, .15);
             pointer-events: none; /* decorative; don't block clicks underneath */
         }
+
         @media (max-width: 576px) {
             .corner-ribbon {
                 width: 195px; /* 10% narrower than 150px */
@@ -180,6 +317,13 @@
             }
         }
     </style>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
+    <!-- and it's easy to individually load additional languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>
+
+
 </head>
 <body>
 <!-- Top-left version ribbon -->
@@ -189,13 +333,16 @@
         </span>
 </div>
 <!-- Fixed top navbar for the whole site -->
-    <a href="#root" class="visually-hidden-focusable position-absolute top-0 start-0 m-2 px-2 py-1 bg-body border rounded">Skip to content</a>
+<a href="#root" class="visually-hidden-focusable position-absolute top-0 start-0 m-2 px-2 py-1 bg-body border rounded">Skip
+    to content</a>
 <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top border-bottom" role="navigation" aria-label="Primary">
     <div class="container-fluid">
         <a class="navbar-brand d-flex align-items-center gap-2" href="#">
             <!-- Inline SVG brand icon: λ with superscript y and subscript ng. Uses currentColor to match theme. -->
-          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" role="img" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" role="img"
-            <g fill="currentColor" color="inherit" font-family="'STIX Two Math', 'Cambria Math', 'Times New Roman', serif">
+                 aria-hidden="true">
+                <g fill="currentColor" color="inherit"
+                   font-family="'STIX Two Math', 'Cambria Math', 'Times New Roman', serif">
                     <!-- Main lambda -->
                     <text x="3" y="17" font-size="16" font-weight="700">λ</text>
                     <!-- Superscript y -->
@@ -219,25 +366,30 @@
             <!-- Left-aligned main menu -->
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#/docs/Iterator.md" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" href="#/docs/Iterator.md" role="button"
+                       data-bs-toggle="dropdown" aria-expanded="false">
                         Documentation
                     </a>
                     <ul id="docsDropdownMenu" class="dropdown-menu">
                         <!-- Will be populated at runtime -->
                         <li><a class="dropdown-item" href="#/docs/tutorial.md" data-route="docs">Tutorial</a></li>
                         <li><a class="dropdown-item" href="#/reference" data-route="reference">Reference</a></li>
-                  <li><hr class="dropdown-divider"></li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
 
                     </ul>
                 </li>
                 <!-- IDE support dropdown -->
                 <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#/docs/idea_plugin.md" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" href="#/docs/idea_plugin.md" role="button"
+                       data-bs-toggle="dropdown" aria-expanded="false">
                         IDE support
                     </a>
                     <ul class="dropdown-menu">
                         <li>
-                  <a class="dropdown-item" href="#/docs/textmate_bundle.md" data-route="docs">Textmate bundle</a>
+                            <a class="dropdown-item" href="#/docs/textmate_bundle.md" data-route="docs">Textmate
+                                bundle</a>
                         </li>
                         <li>
                             <a class="dropdown-item" href="#/docs/idea_plugin.md" data-route="docs">IDEA plugin</a>
@@ -265,11 +417,13 @@
                                 aria-label="Search"
                         />
                         <!-- Results dropdown (controlled by app code) -->
-                <div id="topSearchMenu" class="dropdown-menu w-100 shadow" style="max-height:60vh; overflow:auto; top: calc(100% + .25rem); left: 0;">
+                        <div id="topSearchMenu" class="dropdown-menu w-100 shadow"
+                             style="max-height:60vh; overflow:auto; top: calc(100% + .25rem); left: 0;">
                         </div>
                     </div>
                 </form>
-            <a class="btn btn-sm btn-outline-secondary" href="https://gitea.sergeych.net/SergeychWorks/lyng" target="_blank" rel="noopener" aria-label="GitHub">
+                <a class="btn btn-sm btn-outline-secondary" href="https://gitea.sergeych.net/SergeychWorks/lyng"
+                   target="_blank" rel="noopener" aria-label="GitHub">
                     <i class="bi bi-git"></i>
                 </a>
             </div>
@@ -302,6 +456,7 @@
             // And expose as a CSS variable used by scroll-padding/scroll-margin rules
             // document.documentElement.style.setProperty('--navbar-offset', px);
         }
+
         window.addEventListener('load', adjustPadding);
         window.addEventListener('resize', adjustPadding);
         // Also listen to Bootstrap collapse events which may change navbar height on small screens
@@ -331,9 +486,35 @@
                 activeLink.setAttribute('aria-current', 'page');
             }
         }
+
         window.addEventListener('hashchange', updateActive);
         window.addEventListener('load', updateActive);
-      })();
+    }
+
+
+
+    )();
+
+    // Set up mutation observer for Kotlin code blocks
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            mutation.addedNodes.forEach((node) => {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    const kotlinBlocks = node.querySelectorAll('code.language-kotlin');
+                    kotlinBlocks.forEach((block) => {
+                        console.log('Found Kotlin code block:', block.textContent);
+                        hljs.highlightElement(block);
+                    });
+                }
+            });
+        });
+    });
+
+    // Start observing document body for changes
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
 </script>
 </body>
 </html>