feat: 마크다운 이미지 토큰 외 html img element 도 picture 태그로 처리하도록 변경

Author: toothlessdev

.vitepress/plugins/markdown-picture.ts

@@ -42,6 +42,70 @@ function fileExists(relativePath: string, markdownFilePath: string): boolean {
     }
 }
 
+/**
+ * img 태그를 picture 태그로 변환하는 헬퍼 함수
+ */
+function convertImgToPicture(src: string, alt: string, markdownPath: string): string {
+    // 외부 URL이거나 svg, gif는 picture 태그로 변환하지 않음
+    if (src.startsWith("http") || src.endsWith(".svg") || src.endsWith(".gif")) {
+        return `<img src="${src}" alt="${alt}" loading="lazy" />`;
+    }
+
+    // 이미지 포맷별 경로 생성
+    const srcWebp = changeExtension(src, "webp");
+    const srcAvif = changeExtension(src, "avif");
+    const srcJpeg = changeExtension(src, "jpeg");
+
+    // 실제로 존재하는 파일만 source로 추가
+    const sources: string[] = [];
+
+    // AVIF (최우선)
+    if (fileExists(srcAvif, markdownPath)) {
+        sources.push(`<source srcset="${srcAvif}" type="image/avif" />`);
+    }
+    // WebP (차선)
+    if (fileExists(srcWebp, markdownPath)) {
+        sources.push(`<source srcset="${srcWebp}" type="image/webp" />`);
+    }
+    // JPEG (폴백)
+    if (fileExists(srcJpeg, markdownPath)) {
+        sources.push(`<source srcset="${srcJpeg}" type="image/jpeg" />`);
+    }
+
+    // 변환된 이미지가 없으면 원본만 사용
+    if (sources.length === 0) {
+        return `<img src="${src}" alt="${alt}" loading="lazy" />`;
+    }
+
+    // picture 태그 생성 (원본을 최종 fallback으로 사용)
+    return `<picture>
+    ${sources.join("\n    ")}
+    <img src="${src}" alt="${alt}" loading="lazy" />
+</picture>`;
+}
+
+/**
+ * HTML 문자열에서 img 태그를 찾아서 picture 태그로 변환
+ */
+function processHtmlImages(html: string, markdownPath: string): string {
+    // <img> 태그를 찾는 정규식 (src와 alt 속성 추출)
+    const imgRegex = /<img\s+([^>]*?)\/?>/gi;
+
+    return html.replace(imgRegex, (match, attrs) => {
+        // src 속성 추출
+        const srcMatch = /src=["']([^"']+)["']/i.exec(attrs);
+        if (!srcMatch) return match;
+
+        const src = srcMatch[1];
+
+        // alt 속성 추출
+        const altMatch = /alt=["']([^"']*)["']/i.exec(attrs);
+        const alt = altMatch ? altMatch[1] : "";
+
+        return convertImgToPicture(src, alt, markdownPath);
+    });
+}
+
 /**
  * 마크다운의 이미지를 picture 태그로 변환하는 플러그인
  */
@@ -52,6 +116,7 @@ export function markdownPicturePlugin(md: MarkdownIt) {
             return self.renderToken(tokens, idx, options);
         });
 
+    // 1. markdown 이미지 (![](src)) 처리
     md.renderer.rules.image = (tokens, idx, options, env, self) => {
         const token = tokens[idx];
         const srcIndex = token.attrIndex("src");
@@ -62,52 +127,40 @@ export function markdownPicturePlugin(md: MarkdownIt) {
 
         const src = token.attrs![srcIndex][1];
         const alt = token.content;
+        const markdownPath = env.path || "";
 
-        // 외부 URL이거나 svg, gif는 picture 태그로 변환하지 않음
-        if (src.startsWith("http") || src.endsWith(".svg") || src.endsWith(".gif")) {
-            return defaultRender(tokens, idx, options, env, self);
-        }
-
-        // 이미지 포맷별 경로 생성
-        const srcWebp = changeExtension(src, "webp");
-        const srcAvif = changeExtension(src, "avif");
-        const srcJpeg = changeExtension(src, "jpeg");
+        return convertImgToPicture(src, alt, markdownPath);
+    };
 
-        // 실제로 존재하는 파일만 source로 추가
-        const sources: string[] = [];
+    // 2. HTML inline 이미지 (<img>) 처리
+    const defaultHtmlInline =
+        md.renderer.rules.html_inline || md.renderer.renderToken.bind(md.renderer);
+    md.renderer.rules.html_inline = (tokens, idx, options, env, self) => {
+        const token = tokens[idx];
+        const content = token.content;
         const markdownPath = env.path || "";
 
-        console.log(`\n🔍 이미지 처리 중:`);
-        console.log(`  - 원본: ${src}`);
-        console.log(`  - MD 파일: ${markdownPath}`);
-        console.log(`  - WebP: ${srcWebp} (존재: ${fileExists(srcWebp, markdownPath)})`);
-        console.log(`  - AVIF: ${srcAvif} (존재: ${fileExists(srcAvif, markdownPath)})`);
-        console.log(`  - JPEG: ${srcJpeg} (존재: ${fileExists(srcJpeg, markdownPath)})`);
-
-        // AVIF (최우선)
-        if (fileExists(srcAvif, markdownPath)) {
-            sources.push(`<source srcset="${srcAvif}" type="image/avif" />`);
-        }
-        // WebP (차선)
-        if (fileExists(srcWebp, markdownPath)) {
-            sources.push(`<source srcset="${srcWebp}" type="image/webp" />`);
-        }
-        // JPEG (폴백)
-        if (fileExists(srcJpeg, markdownPath)) {
-            sources.push(`<source srcset="${srcJpeg}" type="image/jpeg" />`);
+        // img 태그가 있는 경우에만 처리
+        if (content.includes("<img")) {
+            return processHtmlImages(content, markdownPath);
         }
 
-        console.log(`  - Sources 개수: ${sources.length}`);
+        return defaultHtmlInline(tokens, idx, options, env, self);
+    };
+
+    // 3. HTML block 이미지 처리
+    const defaultHtmlBlock =
+        md.renderer.rules.html_block || md.renderer.renderToken.bind(md.renderer);
+    md.renderer.rules.html_block = (tokens, idx, options, env, self) => {
+        const token = tokens[idx];
+        const content = token.content;
+        const markdownPath = env.path || "";
 
-        // 변환된 이미지가 없으면 원본만 사용
-        if (sources.length === 0) {
-            return `<img src="${src}" alt="${alt}" loading="lazy" />`;
+        // img 태그가 있는 경우에만 처리
+        if (content.includes("<img")) {
+            return processHtmlImages(content, markdownPath);
         }
 
-        // picture 태그 생성 (원본을 최종 fallback으로 사용)
-        return `<picture>
-    ${sources.join("\n    ")}
-    <img src="${src}" alt="${alt}" loading="lazy" />
-</picture>`;
+        return defaultHtmlBlock(tokens, idx, options, env, self);
     };
 }