feat(viewer): mode pretty print avec coloration syntaxique et numeros de ligne pour fichiers texte (#89)

frontend/js/viewer.js

@@ -446,6 +446,27 @@ async function renderBacklinksPanel(vault, path, container) {
   }
 }
 
+// ── Pretty print (mode lecture enrichi pour fichiers texte non-markdown) ──
+// Detecte le langage depuis le HTML deja rendu par le backend (classe
+// language-xxx), formate le JSON, puis genere un bloc avec gouttiere de
+// numeros de ligne. La coloration est appliquee ensuite via highlight.js.
+function detectPrettyLang(data) {
+  if (data.is_json || data.extension === ".json") return "json";
+  const m = /class="language-([\w-]+)/.exec(data.html || "");
+  return m ? m[1] : "plaintext";
+}
+
+function buildPrettyHtml(data, raw) {
+  let text = raw;
+  const lang = detectPrettyLang(data);
+  if (lang === "json") {
+    try { text = JSON.stringify(JSON.parse(raw), null, 2); } catch (_) { /* JSON invalide: on affiche brut */ }
+  }
+  const lines = text.split("\n");
+  const gutter = lines.map((_, i) => `<span>${i + 1}</span>`).join("");
+  return `<div class="pretty-view"><div class="pp-gutter" aria-hidden="true">${gutter}</div><pre class="pp-pre"><code class="language-${lang}">${escapeHtml(text)}</code></pre></div>`;
+}
+
 export function renderFile(data) {
   const area = getContentArea();
 
@@ -774,10 +795,40 @@ export function renderFile(data) {
     }
   });
 
+  // Pretty print — mode lecture enrichi (numeros de ligne + coloration)
+  // pour les fichiers texte non-markdown (code, JSON, configs, logs...)
+  let prettyBtn = null;
+  const isTextViewerFile = !data.is_markdown && !data.is_csv && !data.unsupported && !data.is_pdf && !data.is_image && !data.is_excalidraw;
+  if (isTextViewerFile) {
+    prettyBtn = el("button", { class: "btn-action", title: t("viewer.pretty_title") || "Mode formaté avec couleurs et numéros de ligne" }, [icon("sparkles", 14), document.createTextNode(t("viewer.pretty") || "Pretty")]);
+    prettyBtn.addEventListener("click", async () => {
+      const on = !prettyBtn.classList.contains("active");
+      if (on) {
+        try {
+          if (!state.cachedRawSource) {
+            const rawUrl = `/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`;
+            const rawData = await api(rawUrl);
+            state.cachedRawSource = rawData.raw;
+          }
+        } catch (_) {
+          state.cachedRawSource = mdDiv.textContent || "";
+        }
+        mdDiv.innerHTML = buildPrettyHtml(data, state.cachedRawSource);
+        safeHighlight(mdDiv.querySelector("code"));
+        prettyBtn.classList.add("active");
+      } else {
+        mdDiv.innerHTML = data.html;
+        mdDiv.querySelectorAll("pre code").forEach((block) => safeHighlight(block));
+        prettyBtn.classList.remove("active");
+      }
+    });
+  }
+
   const fileActions = [copyBtn, sourceBtn];
   if (!data.is_image) fileActions.push(mdBtn);
   if (data.is_markdown) fileActions.push(pdfBtn, exportWrap, forgeBtn, tocBtn);
   if (!data.unsupported) fileActions.push(editBtn);
+  if (prettyBtn) fileActions.push(prettyBtn);
   fileActions.push(openNewWindowBtn, shareBtn, bookmarkBtn);
 
   // Assemble