amp-img

〜ために marked.js の override を使用した。

const renderer = new marked.Renderer()

const sanitize = str => {
  return str.replace(/&<"/g, m => {
    if (m === '&') return '&amp;'
    if (m === '<') return '&lt;'
    return '&quot;'
  })
}

renderer.image = (src, title, alt) => {
  const exec = /=\s*(\d*)\s*x\s*(\d*)\s*$/.exec(src)
  let regExp
  if (exec && exec[0]) regExp = new RegExp(exec[0], 'g')
  const mySrc = src.replace(regExp, '')
  let res = `<amp-img src="${mySrc}" alt="${sanitize(alt)}`
  if (exec && exec[1]) res += `" width="${exec[1]}`
  if (exec && exec[2]) res += `" height="${exec[2]}`
  return `${res}" layout="responsive">`
}

---

marked(md, { renderer: renderer })

参照元: https://github.com/markedjs/marked/issues/339#issuecomment-172230403
この通りに スペース=100x100 の指定でしたかったが、仕様変更があったのかスペース含みだと <img> 用の第一引数 ( 上例だと src ) が取れなかったので、スペース無しで指定する処理を書いた。

![atama](-)

atama

<amp-img alt="atama"
  src="-"
  width="536"
  height="536"
  layout="responsive">
</amp-img>

2021年アップデート時に AMP をやめました