From 50ff34cb099d4c72e927dbc3f4abfc7583190485 Mon Sep 17 00:00:00 2001
From: Jaakko Vanhala <jaakko.vanhala@kamk.fi>
Date: Sun, 5 Apr 2026 08:43:20 +0300
Subject: [PATCH] Highlight.js koodin syntaksikorostukseen (automaattinen
 kielentunnistus) + markdown-strippaus

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 network-poc/static/index.html | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/network-poc/static/index.html b/network-poc/static/index.html
index eba6a79..a63c972 100644
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kipinä Agentic Playground</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
     <style>
         :root {
             --bg-color: #0d1117;
@@ -134,15 +136,12 @@
             padding: 14px;
             font-size: 13px;
             line-height: 1.6;
-            color: var(--success-color);
             white-space: pre-wrap;
             overflow-x: auto;
             max-height: 400px;
             overflow-y: auto;
         }
-        .code-output .keyword { color: #ff7b72; }
-        .code-output .string { color: #a5d6ff; }
-        .code-output .comment { color: #8b949e; }
+        .code-output .hljs { background: transparent; padding: 0; }
 
         .code-task-card {
             background: #0d1117;
@@ -2371,20 +2370,14 @@
         let pendingCodePrompt = null;
 
         // Yksinkertainen Python-syntaksikorostus
-        function highlightPython(code) {
-            return code
-                // Kommentit
-                .replace(/(#.*)/g, '<span style="color:#8b949e">$1</span>')
-                // Merkkijonot (f-stringit, tavalliset)
-                .replace(/(f?"[^"]*"|f?'[^']*')/g, '<span style="color:#a5d6ff">$1</span>')
-                // Avainsanat
-                .replace(/\b(def|return|if|elif|else|for|while|in|not|and|or|is|import|from|class|try|except|with|as|lambda|yield|True|False|None|raise|pass|break|continue)\b/g, '<span style="color:#ff7b72">$1</span>')
-                // Sisäänrakennetut funktiot
-                .replace(/\b(print|len|range|int|str|float|list|dict|set|tuple|type|isinstance|enumerate|zip|map|filter|sorted|reversed|sum|min|max|abs|round|input|open)\b/g, '<span style="color:#d2a8ff">$1</span>')
-                // Numerot
-                .replace(/\b(\d+\.?\d*)\b/g, '<span style="color:#79c0ff">$1</span>')
-                // Dekoraattorit
-                .replace(/(@\w+)/g, '<span style="color:#d2a8ff">$1</span>');
+        function highlightCode(code) {
+            if (typeof hljs !== 'undefined') {
+                try {
+                    const result = hljs.highlightAuto(code);
+                    return result.value;
+                } catch(e) {}
+            }
+            return esc(code);
         }
 
         function addCodeResult(data) {
@@ -2417,7 +2410,7 @@
             card.className = 'code-task-card';
             card.innerHTML = `
                 <div class="prompt">${esc(stripSystemPrompt(data.prompt))}</div>
-                <div class="code-output">${highlightPython(response)}</div>
+                <div class="code-output">${highlightCode(response)}</div>
                 <div class="meta">
                     ${model} · ${tokGen} tokenia · ${typeof durMs === 'number' ? durMs.toFixed(0) : durMs}ms · ${tokS} tok/s
                 </div>`;