fix: escape markdown preview HTML (#52)

frontend/index.html

@@ -159,6 +159,7 @@ textarea { resize: vertical; min-height: 120px; }
 
 <div class="footer">Creative AI-imbued UI • stackchain-dashboard</div>
 
+<script src="/static/markdown.js"></script>
 <script>
 (function(){
   const qs = (s, el=document) => el.querySelector(s);
@@ -327,14 +328,7 @@ textarea { resize: vertical; min-height: 120px; }
   qs('#md-input').addEventListener('input', renderMD);
   function renderMD() {
     const raw = qs('#md-input').value || '';
-    const html = raw.replace(/^#{1,6}\s.*$/gm, (m)=>{ const lvl=m.match(/^(#{1,6})/)[1].length; return '<h'+lvl+'>'+m.replace(/^#{1,6}\s/,'')+'</h'+lvl+'>'; })
-      .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
-      .replace(/\*(.+?)\*/g,'<em>$1</em>')
-      .replace(/`([^`]+)`/g,'<code>$1</code>')
-      .replace(/^\-\s?(.+)$/gm,'<li>$1</li>')
-      .replace(/(<li>.*<\/li>)/s,'<ul>$1</ul>')
-      .replace(/\n/g,'<br>');
-    qs('#md-preview').innerHTML = '<pre>' + escapeHtml(raw) + '</pre><div style="margin-top:8px;">' + html + '</div>';
+    qs('#md-preview').innerHTML = '<pre>' + escapeHtml(raw) + '</pre><div style="margin-top:8px;">' + renderMarkdown(raw) + '</div>';
   }
 
   /* Commands */

frontend/markdown.js

@@ -0,0 +1,29 @@
+(function (root, factory) {
+  const renderMarkdown = factory();
+  if (typeof module === 'object' && module.exports) module.exports = renderMarkdown;
+  root.renderMarkdown = renderMarkdown;
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  function escapeHtml(value) {
+    return String(value || '').replace(/[&<>"']/g, (character) => ({
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;',
+    })[character]);
+  }
+
+  return function renderMarkdown(raw) {
+    return escapeHtml(raw)
+      .replace(/^#{1,6}\s.*$/gm, (line) => {
+        const level = line.match(/^(#{1,6})/)[1].length;
+        return '<h' + level + '>' + line.replace(/^#{1,6}\s/, '') + '</h' + level + '>';
+      })
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>')
+      .replace(/`([^`]+)`/g, '<code>$1</code>')
+      .replace(/^-\s?(.+)$/gm, '<li>$1</li>')
+      .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
+      .replace(/\n/g, '<br>');
+  };
+});