feat(theme-studio): realistic README preview for markdown-mode

markdown-mode fell back to the generic preview (bare face names). I added renderMarkdownPreview, a realistic README that exercises the markdown faces in context: front matter, headers, bold/italic, inline and fenced code, links, lists and checkboxes, a blockquote with a footnote, a table, strikethrough, highlight, math, and inline HTML. A PREVIEW_KEYS map in app_inventory routes markdown-mode to the renderer, and the #mdtest gate checks every data-face it emits is a real markdown face.

1 files changed, 17 insertions, 0 deletions

diff --git a/scripts/theme-studio/browser-gates.js b/scripts/theme-studio/browser-gates.js
index b03ec6a47..87038552c 100644
--- a/scripts/theme-studio/browser-gates.js
+++ b/scripts/theme-studio/browser-gates.js
@@ -748,6 +748,23 @@ if(location.hash==='#navtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c)
  }
  document.title='NAVTEST '+(ok?'PASS':'FAIL');
  const d=document.createElement('div');d.id='navtest';d.textContent='NAVTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);}
+// Markdown-preview gate (open with #mdtest): markdown-mode has a dedicated README
+// renderer, and every data-face it emits is a real markdown-mode face.
+if(location.hash==='#mdtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ A(APPS['markdown-mode']&&APPS['markdown-mode'].preview==='markdown','markdown-mode wired to the markdown preview');
+ A(!!PACKAGE_PREVIEWS['markdown'],'markdown renderer registered');
+ if(PACKAGE_PREVIEWS['markdown']&&APPS['markdown-mode']){
+  const box=document.createElement('div');box.innerHTML=PACKAGE_PREVIEWS['markdown']();
+  const valid=new Set(APPS['markdown-mode'].faces.map(r=>r[0]));
+  const used=[...box.querySelectorAll('[data-face]')].map(e=>e.dataset.face);
+  A(used.length>=15,'preview exercises many faces ('+used.length+')');
+  const bad=used.filter(f=>!valid.has(f));
+  A(bad.length===0,'every data-face is a real markdown face; bad='+bad.join(','));
+  for(const f of ['markdown-header-face-1','markdown-bold-face','markdown-inline-code-face','markdown-blockquote-face','markdown-gfm-checkbox-face','markdown-table-face'])
+   A(used.includes(f),'preview includes '+f);
+ }
+ document.title='MDTEST '+(ok?'PASS':'FAIL');
+ const d=document.createElement('div');d.id='mdtest';d.textContent='MDTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);}
 // Box-cluster gate (open with #boxtest): the box control is a 2x2 cluster of
 // four radio buttons (none / line / pressed / raised); the color swatch shows
 // only while a box style is active.