@limcpf/everything-is-a-markdown 0.6.1 → 0.6.3

package/README.ko.md

@@ -191,7 +191,10 @@ flowchart LR
 ```
 ````
 
-문서 전환 시에도 해당 블록을 다시 렌더링합니다. 설정에서 Mermaid를 비활성화하면 소스 코드 블록 그대로 표시됩니다.
+문서 전환 시에도 해당 블록을 다시 렌더링합니다.
+Mermaid fence는 일반 코드 블록 UI와 분리된 전용 컨테이너(`.mermaid-block`)에서 렌더링되므로 코드 헤더/파일명/복사 버튼이 표시되지 않습니다.
+렌더된 SVG는 데스크톱/모바일 모두에서 컨테이너 기준으로 중앙 정렬되고 폭이 자동 보정됩니다.
+설정에서 Mermaid를 비활성화하거나 CDN 로드가 실패하면, 같은 컨테이너 안에서 소스 코드 텍스트를 유지하고 하단에 경고 메시지를 표시합니다.
 
 `blog.config.ts`에서 설정:
 

package/README.md

@@ -191,7 +191,10 @@ flowchart LR
 ```
 ````
 
-Rendering happens in the browser on first load and when navigating to another document. If Mermaid is disabled in config or CDN loading fails, the source block is shown as-is and a warning message appears.
+Rendering happens in the browser on first load and when navigating to another document.
+Mermaid fences are rendered inside a dedicated diagram container (`.mermaid-block`) instead of the regular code block UI, so they do not show code headers, filenames, or copy buttons.
+Rendered SVG output is centered and constrained to the container width on both desktop and mobile.
+If Mermaid is disabled in config or CDN loading fails, the source block is shown as-is in the same container and a warning message appears below it.
 
 Configuration options (`blog.config.ts`):
 

package/package.json

@@ -1,42 +1,42 @@
 {
-  "name": "@limcpf/everything-is-a-markdown",
-  "version": "0.6.1",
-  "license": "MIT",
-  "private": false,
-  "type": "module",
-  "bin": {
-    "eiam": "src/cli.ts"
-  },
-  "files": [
-    "src",
-    "README.md",
-    "bun.lock",
-    "tsconfig.json"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "blog": "bun run src/cli.ts",
-    "build": "bun run src/cli.ts build",
-    "dev": "bun run src/cli.ts dev",
-    "clean": "bun run src/cli.ts clean",
-    "lint:md:publish": "bun run scripts/lint-published-markdown.ts",
-    "test:e2e": "playwright test",
-    "test:e2e:focus-trap": "playwright test tests/e2e/mobile-sidebar-focus-trap.spec.ts"
-  },
-  "dependencies": {
-    "chokidar": "^4.0.3",
-    "gray-matter": "^4.0.3",
-    "markdown-it": "^14.1.0",
-    "picomatch": "^4.0.2",
-    "shiki": "^3.2.1"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.58.2",
-    "@types/markdown-it": "^14.1.2",
-    "@types/picomatch": "^4.0.2",
-    "bun-types": "^1.3.8",
-    "markdownlint": "^0.40.0"
-  }
+	"name": "@limcpf/everything-is-a-markdown",
+	"version": "0.6.3",
+	"license": "MIT",
+	"private": false,
+	"type": "module",
+	"bin": {
+		"eiam": "src/cli.ts"
+	},
+	"files": [
+		"src",
+		"README.md",
+		"bun.lock",
+		"tsconfig.json"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"blog": "bun run src/cli.ts",
+		"build": "bun run src/cli.ts build",
+		"dev": "bun run src/cli.ts dev",
+		"clean": "bun run src/cli.ts clean",
+		"lint:md:publish": "bun run scripts/lint-published-markdown.ts",
+		"test:e2e": "playwright test",
+		"test:e2e:focus-trap": "playwright test tests/e2e/mobile-sidebar-focus-trap.spec.ts"
+	},
+	"dependencies": {
+		"chokidar": "^4.0.3",
+		"gray-matter": "^4.0.3",
+		"markdown-it": "^14.1.0",
+		"picomatch": "^4.0.2",
+		"shiki": "^3.2.1"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.58.2",
+		"@types/markdown-it": "^14.1.2",
+		"@types/picomatch": "^4.0.2",
+		"bun-types": "^1.3.8",
+		"markdownlint": "^0.40.0"
+	}
 }

package/src/markdown.ts

@@ -167,21 +167,9 @@ function createMarkdownIt<L extends string, T extends string>(
 
     if (lang === MERMAID_LANG) {
       const source = escapeHtmlText(token.content);
-      const filename = fileName ? escapeHtmlAttr(fileName) : MERMAID_LANG;
-      return `<div class="code-block mermaid-block">
-        <div class="code-header">
-          <div class="code-dots">
-            <span class="dot dot-red"></span>
-            <span class="dot dot-yellow"></span>
-            <span class="dot dot-green"></span>
-          </div>
-          <span class="code-filename">${filename}</span>
-          <button class="code-copy" title="Copy code" data-code="${escapeHtmlAttr(token.content)}">
-            <span class="material-symbols-outlined">content_copy</span>
-          </button>
-        </div>
+      return `<figure class="mermaid-block">
         <pre class="mermaid">${source}</pre>
-      </div>`;
+      </figure>`;
     }
 
     let codeHtml: string;

package/src/runtime/app.css

@@ -1098,29 +1098,54 @@ body.mobile-toggle-left .mobile-menu-toggle {
   tab-size: 2;
 }
 
-.viewer-content .code-block pre.mermaid {
+.viewer-content .mermaid-block {
+  margin: 1.5rem 0;
+  padding: 16px 18px;
+  border-radius: 12px;
+  border: 1px solid var(--latte-surface0);
+  background: linear-gradient(180deg, var(--latte-base), var(--latte-mantle));
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
+}
+
+.viewer-content .mermaid-block pre.mermaid {
   margin: 0;
+  padding: 0;
   border: none;
   border-radius: 0;
-  padding: 0;
+  box-shadow: none;
   background: transparent !important;
-  color: inherit;
+  color: var(--latte-subtext1);
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9rem;
+  line-height: 1.6;
   white-space: pre-wrap;
   word-break: break-word;
+  overflow-wrap: anywhere;
+  overflow: visible;
+}
+
+.viewer-content .mermaid-block pre.mermaid[data-mermaid-rendered="true"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: inherit;
+  font-family: inherit;
+  white-space: normal;
 }
 
-.viewer-content .code-block pre.mermaid svg {
+.viewer-content .mermaid-block pre.mermaid[data-mermaid-rendered="true"] svg {
+  display: block;
   width: 100%;
+  max-width: 100%;
   height: auto;
-  display: block;
+  margin: 0 auto;
 }
 
-.viewer-content .mermaid-render-error {
-  margin: 0;
-  padding: 10px 16px;
+.viewer-content .mermaid-block .mermaid-render-error {
+  margin: 12px 0 0;
+  padding: 10px 12px;
   border: 1px solid rgba(244, 63, 94, 0.35);
-  border-radius: 0 0 8px 8px;
-  border-top: none;
+  border-radius: 8px;
   color: var(--latte-red);
   background: rgba(244, 63, 94, 0.08);
   font-size: 0.84rem;

package/src/runtime/app.js

@@ -103,6 +103,46 @@ function showMermaidError(preview, message) {
   preview.parentElement.appendChild(createMermaidLoadError(message));
 }
 
+function parseSvgSize(value) {
+  const normalized = typeof value === "string" ? value.trim() : "";
+  if (!normalized) {
+    return null;
+  }
+  if (normalized.endsWith("%")) {
+    return null;
+  }
+
+  const match = normalized.match(/^(\d+(?:\.\d+)?)/);
+  if (!match) {
+    return null;
+  }
+
+  const parsed = Number(match[1]);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return null;
+  }
+
+  return parsed;
+}
+
+function normalizeRenderedMermaidSvg(block) {
+  if (!(block instanceof HTMLElement)) {
+    return;
+  }
+
+  const svg = block.querySelector("svg");
+  if (!(svg instanceof SVGElement)) {
+    return;
+  }
+
+  const intrinsicWidth = parseSvgSize(svg.getAttribute("width"));
+  svg.style.display = "block";
+  svg.style.width = "100%";
+  svg.style.height = "auto";
+  svg.style.margin = "0 auto";
+  svg.style.maxWidth = intrinsicWidth ? `${intrinsicWidth}px` : "100%";
+}
+
 function parseMermaidNodes() {
   const contentEl = document.getElementById("viewer-content");
   if (!(contentEl instanceof HTMLElement)) {
@@ -226,15 +266,25 @@ async function renderMermaidBlocks(config) {
       }
       return;
     }
-    if (typeof mermaid.run === "function") {
-      await mermaid.run({ nodes: blocks });
-      return;
-    }
-    if (typeof mermaid.init === "function") {
-      await mermaid.init({ startOnLoad: false }, blocks);
-      return;
+
+    for (const block of blocks) {
+      try {
+        if (typeof mermaid.run === "function") {
+          await mermaid.run({ nodes: [block] });
+          normalizeRenderedMermaidSvg(block);
+          continue;
+        }
+        if (typeof mermaid.init === "function") {
+          await mermaid.init({ startOnLoad: false }, [block]);
+          normalizeRenderedMermaidSvg(block);
+          continue;
+        }
+        throw new Error("Mermaid 렌더러 API가 존재하지 않습니다.");
+      } catch (error) {
+        const message = `Mermaid 렌더링 실패: ${error instanceof Error ? error.message : String(error)}`;
+        showMermaidError(block, message);
+      }
     }
-    throw new Error("Mermaid 렌더러 API가 존재하지 않습니다.");
   } catch (error) {
     const message = `Mermaid 렌더링 실패: ${error instanceof Error ? error.message : String(error)}`;
     for (const block of blocks) {