Merge pull request #539 from zenn-dev/fix-image-attr

[Breaking Change] markdown-itで変換したimgタグにclassとlazyを追加します

Author: cm-igarashi-ryosuke

.gitignore

@@ -5,4 +5,5 @@ yarn-error.log
 lerna-debug.log
 .node-version
 .idea
-.turbo
+.turbo
+.claude/settings.local.json

packages/zenn-cli/articles/100-example-markdown-guide.md

@@ -104,6 +104,8 @@ Markdownエディタでは、テキストを範囲選択した状態でURLをペ
 [![](画像のURL)](リンクのURL)
 ```
 
+[![](https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43 =250x)](https://zenn.dev)
+
 ## テーブル
 
 ```

packages/zenn-content-css/src/_content.scss

@@ -250,19 +250,19 @@ pre {
 .code-block-filename-container + pre {
   border-top-left-radius: 0;
 }
-img:not(.emoji) {
+img.md-img {
   margin: 1.5rem auto;
   display: table;
   max-width: 100%;
   height: auto;
   background: var(--c-bg-image);
 }
-img + br {
+img.md-img + br {
   display: none;
 }
 // ![](path_to_image)
 // *caption*
-img ~ em {
+img.md-img ~ em {
   display: block;
   margin: -1rem auto 0;
   line-height: 1.3;
@@ -271,7 +271,7 @@ img ~ em {
   font-size: 0.92em;
 }
 // リンクの中に画像がある場合、リンクの範囲を画像の大きさと合わせる
-a:has(img) {
+a:has(img.md-img) {
   display: table;
   margin: 0 auto;
 }

packages/zenn-content-css/test.html

@@ -48,7 +48,7 @@ <h2 id="埋め込み">埋め込み</h2>
     <p>
       👇このようなモーダルが開きます。<br />
       <img src="https://storage.googleapis.com/zenn-user-upload/3eczstjiajdxbqujkloer616mj6r" width="400" alt=""
-        loading="lazy" /><br />
+        class="md-img" loading="lazy" /><br />
       ツイートやYouTube、CodePen、SpeakerDeckなどを挿入できます。
     </p>
     <h2 id="その他のショートカット">その他のショートカット</h2>
@@ -280,7 +280,7 @@ <h2 id="画像の挿入">画像の挿入</h2>
       <pre class="highlight plaintext"><code>![altテキスト](https://画像のURL)</code></pre>
     </div>
     <p>
-      <img src="https://storage.googleapis.com/zenn-user-upload-dev/05882bdcec20-20250626.webp" title="" alt="altテキスト" />
+      <img src="https://storage.googleapis.com/zenn-user-upload-dev/05882bdcec20-20250626.webp" title="" alt="altテキスト" class="md-img" />
       <em>Captionテキスト</em>
     </p>
     <h3 id="画像の横幅を指定する">画像の横幅を指定する</h3>
@@ -289,7 +289,7 @@ <h3 id="画像の横幅を指定する">画像の横幅を指定する</h3>
     </div>
     <p>
       <img src="https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43" width="250" alt="altテキスト"
-        loading="lazy" /><br />
+        class="md-img" loading="lazy" /><br />
       画像の表示が大きすぎる場合は、URLの後に半角スペースを空けて<code>=○○x</code>と記述すると、画像の幅を指定できます。
     </p>
     <h3 id="画像をリンクにする">画像をリンクにする</h3>
@@ -299,7 +299,7 @@ <h3 id="画像をリンクにする">画像をリンクにする</h3>
     <p>
       <a href="https://zenn.dev">
         <img src="https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43" width="250"
-          alt="altテキスト" loading="lazy" />
+          alt="altテキスト" class="md-img" loading="lazy" />
       </a>
       直後にテキストがある場合もスタイルの影響は受けません。
     </p>

packages/zenn-markdown-html/__tests__/basic.test.ts

@@ -37,6 +37,6 @@ describe('MarkdownからHTMLへの変換テスト', () => {
 
   test('dataスキーマの画像は除外する', () => {
     const html = markdownToHtml(`![](data:image/png;base64,xxxx)`);
-    expect(html).toContain('<img alt />');
+    expect(html).toContain('<img alt class="md-img" loading="lazy" />');
   });
 });

packages/zenn-markdown-html/src/index.ts

@@ -14,6 +14,7 @@ import { mdLinkAttributes } from './utils/md-link-attributes';
 import { mdSourceMap } from './utils/md-source-map';
 import { mdLinkifyToCard } from './utils/md-linkify-to-card';
 import { mdRendererFence } from './utils/md-renderer-fence';
+import { mdImage } from './utils/md-image';
 import {
   containerDetailsOptions,
   containerMessageOptions,
@@ -61,7 +62,8 @@ const markdownToHtml = (text: string, options?: MarkdownOptions): string => {
       }),
       tabIndex: false,
     })
-    .use(mdSourceMap);
+    .use(mdSourceMap)
+    .use(mdImage);
 
   // custom footnote
   md.renderer.rules.footnote_block_open = () =>

packages/zenn-markdown-html/src/utils/md-image.ts

@@ -0,0 +1,15 @@
+import MarkdownIt from 'markdown-it';
+import { RenderRule } from 'markdown-it/lib/renderer';
+
+export const mdImage = (md: MarkdownIt): void => {
+  const originalImageRenderRule = md.renderer.rules['image'] as RenderRule;
+
+  md.renderer.rules.image = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx];
+
+    token.attrJoin('class', 'md-img');
+    token.attrSet('loading', 'lazy');
+
+    return originalImageRenderRule(tokens, idx, options, env, slf);
+  };
+};