[feature] hight light js

public/index.html

@@ -33,6 +33,8 @@
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
     <script src="./script.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.js"></script>
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/styles/tomorrow.min.css">
+    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/highlight.min.js"></script>
 </body>
 
 </html>

public/script.js

@@ -39,7 +39,7 @@ function write_message(data) {
     if (!data.plain) {
         rendered_message = md.render(message);
     } else {
-        rendered_message = `<pre>${message}</pre>`;
+        rendered_message = `${message}`;
     }
     rendered_message = DOMPurify.sanitize(rendered_message);
 
@@ -67,7 +67,22 @@ async function init() {
     clear_message();
     await login_name();
 
-    md = new remarkable.Remarkable();
+    md = new remarkable.Remarkable({
+        highlight: function (str, lang) {
+            if (lang && hljs.getLanguage(lang)) {
+                try {
+                    return hljs.highlight(lang, str).value;
+                } catch (err) { }
+            }
+
+            try {
+                return hljs.highlightAuto(str).value;
+            } catch (err) { }
+
+            return '';
+        }
+    });
+
     md.inline.ruler.enable(['mark', 'sup', 'sub']);
 
     const ws = new io(server);

public/style.css

@@ -60,7 +60,7 @@ pre {
     font-size: 17px;
     padding: 30px;
     width: 100vw;
-    height: 30vh;
+    height: calc(30vh - 100px);
 
     box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
 }