Async renderers would be very helpful! My use case is turning a markdown image responsive by fetching multiple srcsets as well as the image's width and height (to avoid layout shifts) from a CMS based on its href. Something like this:

import marked from 'marked'

const renderer = {
  async image(href, title, text) {
    if (href?.includes(`mycms.tld`) && !href.endsWith(`.svg`)) {
      const id = href.split(`myCmsId`)[1]
      const query = `{
        asset(id: "${id}") {
          width
          height
        }
      }`
      const { asset } = await fetchFromCms(query)
      const { width, height } = asset
      title = title ? `title="${title}"` : ``
      return `
      <picture>
        <source media="(min-width: 1000px)" type="image/webp" srcset="${href}?w=1000"&fm=webp"" />
        <source media="(min-width: 800px)" type="image/webp" srcset="${href}?w=800"&fm=webp"" />
        <source media="(min-width: 600px)" type="image/webp" srcset="${href}?w=600"&fm=webp"" />
        <source media="(min-width: 400px)" type="image/webp" srcset="${href}?w=400"&fm=webp"" />
        <img src="${href}?w=1000" alt="${text}" ${title} loading="lazy" width="${width}" height="${height}" style="width: 100%; height: auto;" />
      </picture>`
    }

    return false // delegate to default marked image renderer
  },
}

marked.use({ renderer })

async renderer support #458

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions