Improve: Better formatting for markdown and code files

- Configure marked.js with GFM and line breaks for better markdown rendering
- Add DOMPurify for sanitizing markdown HTML output
- Improve code block styling: better font size (13px), line height (1.6), word wrapping
- Add word-wrap and overflow-wrap to markdown and code containers
- Improve markdown word wrapping and layout
- Better color contrast and readability for code blocks

Author: Prakash-sa

docs/app.js

@@ -8,6 +8,14 @@ const state = {
   useLocalContent: false,
 };
 
+// Configure marked for better markdown rendering
+if (window.marked) {
+  window.marked.setOptions({
+    breaks: true,
+    gfm: true,
+  });
+}
+
 const treeRoot = document.getElementById("treeRoot");
 const codeBlock = document.getElementById("codeBlock");
 const codeContainer = document.getElementById("codeContainer");
@@ -170,7 +178,8 @@ async function loadFile(path, meta = {}) {
     const text = await response.text();
     if (languageClass === "markdown" && window.marked) {
       const html = window.marked.parse(text);
-      markdownContent.innerHTML = html;
+      const sanitized = window.DOMPurify ? window.DOMPurify.sanitize(html) : html;
+      markdownContent.innerHTML = sanitized;
       markdownContent.classList.remove("hidden");
       imageContent.classList.add("hidden");
       codeContainer.classList.add("hidden");

docs/index.html

@@ -66,6 +66,7 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
     <script src="app.js"></script>
   </body>
 </html>

docs/styles.css

@@ -265,15 +265,26 @@ pre {
   background: #fdf9f2;
   border: 1px solid rgba(31, 27, 22, 0.12);
   font-family: "Spline Sans Mono", monospace;
-  font-size: 14px;
-  line-height: 1.85;
+  font-size: 13px;
+  line-height: 1.6;
   letter-spacing: 0.1px;
   tab-size: 2;
   overflow-x: auto;
+  color: #2d241d;
 }
 
 code {
-  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: "Spline Sans Mono", monospace;
+}
+
+#codeContainer {
+  margin: 0;
+  padding: 24px;
+  border-radius: 16px;
+  background: #fdf9f2;
+  border: 1px solid rgba(31, 27, 22, 0.12);
 }
 
 .code-lines {
@@ -315,9 +326,11 @@ code {
   border: 1px solid rgba(31, 27, 22, 0.12);
   border-radius: 16px;
   padding: 28px;
-  line-height: 1.85;
+  line-height: 1.8;
   font-size: 15px;
   color: var(--text);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .markdown h1,