updated

Author: Prakash-sa

docs/app.js

@@ -10,6 +10,9 @@ const state = {
 
 const treeRoot = document.getElementById("treeRoot");
 const codeBlock = document.getElementById("codeBlock");
+const codeContainer = document.getElementById("codeContainer");
+const markdownContent = document.getElementById("markdownContent");
+const imageContent = document.getElementById("imageContent");
 const contentTitle = document.getElementById("contentTitle");
 const contentFooter = document.getElementById("contentFooter");
 const copyLink = document.getElementById("copyLink");
@@ -79,6 +82,30 @@ function languageForPath(path) {
   return map[ext] || "";
 }
 
+function isImageFile(path) {
+  const ext = fileExtension(path);
+  return ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext);
+}
+
+function renderCode(text, languageClass) {
+  const highlighted = window.hljs
+    ? (languageClass
+        ? window.hljs.highlight(text, { language: languageClass }).value
+        : window.hljs.highlightAuto(text).value)
+    : text.replace(/[&<>]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[char]));
+
+  const lines = highlighted.split("\n");
+  const wrapped = lines
+    .map((line, index) => {
+      const lineNumber = index + 1;
+      const content = line.length ? line : "&nbsp;";
+      return `<span class="code-line"><span class="line-number">${lineNumber}</span><span class="line-content">${content}</span></span>`;
+    })
+    .join("\n");
+
+  codeBlock.innerHTML = `<span class="code-lines">${wrapped}</span>`;
+}
+
 function setActiveItem(element) {
   if (state.activeItem) {
     state.activeItem.classList.remove("active");
@@ -117,12 +144,44 @@ async function loadFile(path, meta = {}) {
     if (!response.ok) {
       throw new Error(`Failed to fetch ${path}`);
     }
+    if (isImageFile(path)) {
+      const blob = await response.blob();
+      const imageUrl = URL.createObjectURL(blob);
+      imageContent.innerHTML = `<img src="${imageUrl}" alt="${path}" />`;
+      imageContent.classList.remove("hidden");
+      markdownContent.classList.add("hidden");
+      codeContainer.classList.add("hidden");
+      return;
+    }
+
     const text = await response.text();
-    codeBlock.textContent = text;
-    if (window.hljs) {
-      window.hljs.highlightElement(codeBlock);
+    if (languageClass === "markdown" && window.marked) {
+      const html = window.marked.parse(text);
+      markdownContent.innerHTML = html;
+      markdownContent.classList.remove("hidden");
+      imageContent.classList.add("hidden");
+      codeContainer.classList.add("hidden");
+    } else if (languageClass === "json") {
+      let formatted = text;
+      try {
+        formatted = JSON.stringify(JSON.parse(text), null, 2);
+      } catch (error) {
+        formatted = text;
+      }
+      markdownContent.classList.add("hidden");
+      imageContent.classList.add("hidden");
+      codeContainer.classList.remove("hidden");
+      renderCode(formatted, languageClass);
+    } else {
+      markdownContent.classList.add("hidden");
+      imageContent.classList.add("hidden");
+      codeContainer.classList.remove("hidden");
+      renderCode(text, languageClass);
     }
   } catch (error) {
+    markdownContent.classList.add("hidden");
+    imageContent.classList.add("hidden");
+    codeContainer.classList.remove("hidden");
     codeBlock.textContent = `Unable to load ${path}. ${error.message}`;
   }
 }

docs/index.html

@@ -56,13 +56,16 @@
           </div>
         </div>
         <div class="content-body">
-          <pre><code id="codeBlock" class="language-markdown"></code></pre>
+          <div id="markdownContent" class="markdown hidden"></div>
+          <div id="imageContent" class="image-viewer hidden"></div>
+          <pre id="codeContainer"><code id="codeBlock" class="language-markdown"></code></pre>
         </div>
         <div class="content-footer" id="contentFooter"></div>
       </main>
     </div>
 
     <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="app.js"></script>
   </body>
 </html>

docs/styles.css

@@ -260,13 +260,124 @@ input {
 
 pre {
   margin: 0;
+  padding: 24px;
+  border-radius: 16px;
+  background: #fdf9f2;
+  border: 1px solid rgba(31, 27, 22, 0.12);
+  font-family: "Spline Sans Mono", monospace;
+  font-size: 14px;
+  line-height: 1.85;
+  letter-spacing: 0.1px;
+  tab-size: 2;
+  overflow-x: auto;
+}
+
+code {
+  white-space: pre;
+}
+
+.code-lines {
+  display: block;
+}
+
+.code-line {
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  gap: 14px;
+  align-items: start;
+}
+
+.line-number {
+  text-align: right;
+  color: rgba(31, 27, 22, 0.45);
+  user-select: none;
+}
+
+.image-viewer {
+  background: #fdf9f2;
+  border: 1px solid rgba(31, 27, 22, 0.12);
+  border-radius: 16px;
   padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-viewer img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 12px 30px rgba(31, 27, 22, 0.18);
+}
+
+.markdown {
+  background: #fdf9f2;
+  border: 1px solid rgba(31, 27, 22, 0.12);
   border-radius: 16px;
-  background: #fbf8f3;
-  border: 1px solid rgba(31, 27, 22, 0.08);
+  padding: 28px;
+  line-height: 1.85;
+  font-size: 15px;
+  color: var(--text);
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3 {
+  margin-top: 24px;
+  margin-bottom: 12px;
+}
+
+.markdown h1 {
+  font-size: 26px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 18px;
+}
+
+.markdown p {
+  margin: 12px 0;
+  color: #2d241d;
+}
+
+.markdown ul,
+.markdown ol {
+  padding-left: 22px;
+  margin: 12px 0;
+}
+
+.markdown li {
+  margin: 6px 0;
+}
+
+.markdown code {
   font-family: "Spline Sans Mono", monospace;
-  font-size: 13px;
-  line-height: 1.7;
+  background: rgba(31, 27, 22, 0.08);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-size: 0.9em;
+}
+
+.markdown pre {
+  margin: 16px 0;
+  padding: 18px;
+  background: #f7f2ea;
+  border-radius: 12px;
+  overflow-x: auto;
+}
+
+.markdown a {
+  color: var(--accent-dark);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(143, 61, 30, 0.3);
+}
+
+.markdown a:hover {
+  border-bottom-color: rgba(143, 61, 30, 0.8);
 }
 
 .content-footer {