added code highlights

index.html

@@ -7,6 +7,11 @@
     <link rel="stylesheet"
         href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <!-- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/darcula.min.css -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="light dark" />
@@ -24,7 +29,7 @@
         }
         function streamScrollStep() {
             const diff = window.scrollMaxY - window.scrollY
-            if(diff < 60) scrollDown()
+            if (diff < 60) scrollDown()
         }
 
 
@@ -316,11 +321,11 @@
             <main>
                 <form x-data="{max_messages: '', max_tokens: ''}" x-init="loadProfile($data)">
                     <label>Messages limit </label>
-                    <input x-model="max_messages" type="range" min="1" max="100"/>
+                    <input x-model="max_messages" type="range" min="1" max="100" />
                     <small>Max messages to send: <span x-text="max_messages">12</span> </small>
 
                     <label>Max response</label>
-                    <input x-model="max_tokens" type="range" min="1" max="2048"/>
+                    <input x-model="max_tokens" type="range" min="1" max="2048" />
                     <small>Max response size: <span x-text="max_tokens">12</span> </small>
 
                     <hr>
@@ -347,7 +352,8 @@
                         <header>
                             <strong x-text="message.role">Assistant</strong>
 
-                            <button x-on:click="updateMessage($data, message, {pinned: false} )" class="button-icon small cancel">
+                            <button x-on:click="updateMessage($data, message, {pinned: false} )"
+                                class="button-icon small cancel">
                                 <span class="material-symbols-outlined"> delete </span>
                             </button>
                         </header>
@@ -364,4 +370,7 @@
 
 </body>
 
-</html>
+</html>
+
+
+<script>hljs.highlightAll();</script>