画像の属性を埋め込む

rehype-image-salt は <img> タグのwidth height 属性等を alt や block へ埋め込む機能があります。

通常はあまり利用しませんが、HTML を Markdown へ変換するときに画像の属性を保護することに利用できます。

unified

HTML から Markdown へ変換するときにプラグインとして利用している例です。

import { unified } from 'unified'
import rehypeParse from 'rehype-parse'
import rehypeToRemark from 'rehype-remark'
import stringify from 'remark-stringify'
import imageSalt from '@hankei6km/rehype-image-salt'

const embed = async (source: string) => {
  const markdown = await unified()
    .use(rehypeParse, { fragment: true })
    .use(imageSalt, { command: 'embed', embed: { embedTo: 'block' } })
    .use(rehypeToRemark)
    .use(remarkStringify)
    .freeze()
    .process(source)
  return String(markdown)
}

console.log(
  await embed(
    '<p><img src="/path/to/image.jpg" alt="river" width="600" height="400"></p>'
  )
) // ![river](/path/to/image.jpg){width="600" height="400"}

HTML へ戻すときに画像の再構築を行えば属性が設定された状態に戻ります。

オプション

以下のオブジェクトでオプションを指定します。配列にすることで複数のオプションを適用できます(内部的には埋め込みが複数回実行されます)。

`command`

Type:rebuild | embed
Default: rebuild

プラグインとして稼働するときのモードを指定。埋め込む時にはembed を指定する。

`baseURL`

Type:string
Default: none

属性を埋め込む画像の URL を指定。

`embed.embedTo`

Type:alt | block
Default: alt

属性を埋め込む先を指定。block を指定すると画像ノードの直後に {...} block を追加。

`embed.pickAttrs`

Type: string[]
Default: ['width', 'height']

埋め込む属性の名前を指定。