A markdown-it plugin for responsive images. This plugin overloads original image renderer of markdown-it.
var md =html: truelinkify: truetypography: true; // <-- this use(package_name) is required
How to specify options?
The notation to specify responsive sizes is as follows.
// There are two ways to structure responsive image filenames:// - by suffix eg: header-sample.jpg, sets setsrc files to// header-sample-small.jpg// header-sample-medium.jpg// - by using netlify large media transformation querystrings eg: header-sample.jpg sets setsrc files to// header-sample.jpg?nf_resize=fix?w=320// header-sample.jpg?nf_resize=fix?w=640// - in either case the src filename is unchanged. This is problematic with automatically resized files such as// netlify transformations because usually the default file is huge. The problem could be solved if netlify// supported quality transformations, but they don't.// BEWARE of overlapping wildcard patterns eg "example-*" and "example-1-*"// The FIRST matching rule is used
With the options above, a markdown
is rendered as