Readd Markdown Support + Syntax Highlights and DOMPurify is used to sanitize HTML content to prevent XSS attacks.

app.js

@@ -7,6 +7,22 @@ import Corestore from 'corestore';
 import { EventEmitter } from 'events';
 import fs from 'fs';
 import handleCommand from './commands.js';
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+import DOMPurify from 'dompurify';
+
+const md = new MarkdownIt({
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return '<pre class="hljs"><code>' +
+               hljs.highlight(str, { language: lang }).value +
+               '</code></pre>';
+      } catch (__) {}
+    }
+    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+  }
+});
 
 const agentAvatarPath = './assets/agent.png';
 let agentAvatar = '';
@@ -1047,6 +1063,7 @@ function addFileMessage(name, fileName, fileUrl, fileType, avatar, topic) {
     container.scrollTop = container.scrollHeight;
   }
 }
+
 function addAudioMessage(name, audioUrl, avatar, topic) {
   const container = document.querySelector('#messages');
   if (!container) {
@@ -1092,7 +1109,6 @@ function addAudioMessage(name, audioUrl, avatar, topic) {
   }
 }
 
-
 function addMessage(name, message, avatar, topic) {
   const container = document.querySelector('#messages');
   if (!container) {
@@ -1120,8 +1136,7 @@ function addMessage(name, message, avatar, topic) {
 
   const messageText = document.createElement('div');
   messageText.classList.add('message-text');
-  
+  messageText.innerHTML = DOMPurify.sanitize(md.render(message));
-  messageText.innerHTML = message;
 
   messageContent.appendChild(senderName);
   messageContent.appendChild(messageText);
@@ -1132,6 +1147,7 @@ function addMessage(name, message, avatar, topic) {
   if (topic === currentTopic()) {
     container.scrollTop = container.scrollHeight;
   }
+  hljs.highlightAll(); // Re-highlight all code blocks
 }
 
 async function updateIcon(username, avatarBuffer) {
@@ -1146,7 +1162,6 @@ async function updateIcon(username, avatarBuffer) {
   }
 }
 
-
 function clearMessages() {
   const messagesContainer = document.querySelector('#messages');
   while (messagesContainer.firstChild) {

package.json

@@ -24,12 +24,15 @@
   "dependencies": {
     "b4a": "^1.6.6",
     "corestore": "^6.18.2",
+    "dompurify": "^3.1.6",
     "dotenv": "^16.4.5",
     "electron": "^30.0.8",
+    "highlight.js": "^11.10.0",
     "hypercore-crypto": "^3.4.1",
     "hyperdrive": "^11.8.1",
     "hyperswarm": "^4.7.14",
     "localdrive": "^1.11.4",
+    "markdown-it": "^14.1.0",
     "marked": "^12.0.2",
     "serve-drive": "^5.0.8"
   }