画像#

Copy as MarkdownView Markdown

Markdown の画像は、オプトインするまで既定のレンダラのままです。images をオンにすると、遅延読み込みを付け、title をキャプションにし、安全な width / height 属性を受け付けます。

import { oxContent } from "@ox-content/vite-plugin";

export default {
  plugins: [
    oxContent({
      images: true,
    }),
  ],
};

true と {} はどちらも既定でオンです。追加のつまみは lazy だけです（既定 true）。

oxContent({
  images: { lazy: false },
});

遅延読み込み#

title のない Markdown 画像は、loading="lazy" 付きの <img> になります。

![Diagram](/architecture.png)

キャプション#

title がキャプションです。画像は <figure class="ox-figure"> で包み、title はエスケープして <figcaption> に入れます。

![Diagram](/architecture.png "The transform pipeline")

寸法#

任意の末尾 {width=N height=M} はこの機能が消費します。attrs は不要です。符号なし整数だけを受け付け、それ以外は捨てます。

![Diagram](/architecture.png){width=320 height=180}

安全性#

代替テキスト、キャプション、src は HTML エスケープされます。javascript:、data:、vbscript:、またはプロトコル相対の // を使う行き先では、その値を持つ <img src> を出しません。フェンスコード、インデントコード、インラインコードの中の画像はそのままです。

関連#

• 構文拡張
• 組み込み機能の一覧