fix: render hr/blockquote as div to survive host blog skins

Author: zooo-code

js/app.js

@@ -12,6 +12,7 @@ async function render() {
   tmp.innerHTML = marked.parse(md);
   inlineStyle(tmp);          // bake inline styles onto every element
   applyCallouts(tmp);        // turn `[!NOTE]` etc. blockquotes into callout boxes
+  deSemanticize(tmp);        // hr/blockquote → div so host skins can't re-decorate them
   await renderMermaid(tmp);  // turn mermaid blocks into inline SVG
 
   const html = tmp.innerHTML;

js/convert.js

@@ -99,3 +99,19 @@ function applyCallouts(container) {
   });
   return container;
 }
+
+/* Replace <hr> and <blockquote> with plain <div>s that keep the same inline style.
+   Host blog skins (e.g. some Tistory themes) decorate these semantic tags with
+   their own CSS pseudo-elements — dotted dividers, giant quote marks — that inline
+   styles can't override. Rendering them as <div> escapes that styling entirely.
+   Call last, after inlineStyle and applyCallouts have set the styles. */
+function deSemanticize(container) {
+  const toDiv = el => {
+    const div = document.createElement('div');
+    if (el.hasAttribute('style')) div.setAttribute('style', el.getAttribute('style'));
+    while (el.firstChild) div.appendChild(el.firstChild);
+    el.replaceWith(div);
+  };
+  container.querySelectorAll('hr, blockquote').forEach(toDiv);
+  return container;
+}

js/theme.js

@@ -38,7 +38,9 @@ const STYLE = {
 
   a: 'color: #1971c2; text-decoration: underline;',
   img: 'max-width: 100%; height: auto; border-radius: 6px;',
-  hr: 'border: none; border-top: 1px solid #eaeaea; margin: 2em 0;',
+  // Divider — rendered as a <div> (not <hr>) so host skins can't decorate it with
+  // dotted/image styles. Translucent gray shows on both dark and light backgrounds.
+  hr: 'height: 0; border: 0; border-top: 1px solid rgba(128,128,128,0.4); margin: 2em 0;',
   strong: 'font-weight: 700;',
   em: 'font-style: italic;',
   del: 'text-decoration: line-through; color: #888;',