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

[cm-igarashi-ryosuke]

📑 Summary

markdown-itで変換したimgタグだけにスタイルを適用するため、 class="md-img" を追加します。
また、 loading="lazy" も追加します。

これら２つの属性は、現在 backend (※private repo) で行っている処理と同じです。
backend 処理ではプレビュー時に反映されない問題があるため、zenn-markdown-htmlに移行します。

⚠️ [Breaking Change] これまでzenn-markdown-htmlで変換されたHTMLには、imgにclass属性が設定されていないので、zenn-content-cssのimgのスタイルが効かなくなります。zenn-markdown-htmlで再変換する必要があります。

📋 Tasks

プルリクエストを作成いただく際、お手数ですが以下の内容についてご確認をお願いします。

• 📖 Contribution Guide を読んだ
• 👩‍💻 canary ブランチに対するプルリクエストである
• zenn-cli で実行して正しく動作しているか確認する
• 不要なコードが含まれていないか( コメントやログの消し忘れに注意 )
• XSS になるようなコードが含まれていないか
• モバイル端末での表示が考慮されているか
• Pull Request の内容は妥当か( 膨らみすぎてないか )

より詳しい内容は Pull Request Policy を参照してください。

[Copilot]

Pull Request Overview

Adds class="md-img" and loading="lazy" attributes to all images converted by markdown-it, updates CSS to target the new class, and refreshes tests and documentation examples.

• Introduces an mdImage plugin that injects the two attributes on image tokens.
• Hooks mdImage into the markdownToHtml pipeline.
• Updates style rules in _content.scss, test assertions, and HTML examples to reflect the new class/attribute.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/zenn-markdown-html/src/utils/md-image.ts	New plugin that sets class="md-img" and loading="lazy" on images.
packages/zenn-markdown-html/src/index.ts	Registers the mdImage plugin in the converter.
packages/zenn-markdown-html/tests/basic.test.ts	Adjusts expected HTML in the data-uri image test.
packages/zenn-content-css/test.html	Updates example <img> tags to include the md-img class (and sometimes loading).
packages/zenn-content-css/src/_content.scss	Changes selectors to target .md-img instead of generic img:not(.emoji).

Comments suppressed due to low confidence (2)

packages/zenn-markdown-html/tests/basic.test.ts:40

• [nitpick] The test name 'dataスキーマの画像は除外する' no longer matches the behavior being asserted. Please update the test description to reflect that lazy-loading and md-img class are now applied to data URI images.

    expect(html).toContain('<img alt class="md-img" loading="lazy" />');

packages/zenn-content-css/test.html:283

• [nitpick] This example image has the md-img class but is missing the loading="lazy" attribute, which might confuse readers. Consider adding loading="lazy" for consistency with other examples.

      <img src="https://storage.googleapis.com/zenn-user-upload-dev/05882bdcec20-20250626.webp" title="" alt="altテキスト" class="md-img" />

[cm-dyoshikawa]

LGTM！