This module is a fork from markdown-it-implicit-figures in which I wanted to introduce new features and make sure this was up to what the standard is today.
const src = 'text with \n\n\n\nanother paragraph'; const res = md.render(src);
console.log(res);
/*
text with
another paragraph
*/ `
$3
-
dataType: Set dataType to true to declare the data-type being wrapped, e.g.: . This can be useful for applying a special styling for different kind of figures.
-
figcaption: Set figcaption to true or "title" to use the title as a block after the image; set figcaption to "alt" to use the alt text as a . E.g.: !This is an alt renders to`html This is a title
`
-
tabindex: Set tabindex to true to add a tabindex property to each figure, beginning at tabindex="1" and incrementing for each figure encountered. Could be used with this css-trick, which expands figures upon mouse-over.
-
link: Put a link around the image if there is none yet.
-
copyAttrs: Copy attributes matching (RegExp or string) copyAttrs to figure element.
-
lazy: Applies the loading attribute as lazy.
-
removeSrc: Removes the source from the image and saves it on data-src.
You can override it for a single image with something like
!alt{loading=eager} which will generate the following markup:``html
``
-
classes: Adds the classes to the list of classes the image might have.
-
async: Adds the attribute decoding="async" to all images. As with lazy you should be able to undo this for singular images !alt{decoding=auto}
Web performance recommended settings
Recommended settings for web performance is as follows
` { lazy: true, async: true } `
Which will add
loading="lazy" and decoding="async" to all images. This can be changed per image as explained above so you can opt out for a image at the top if you'd like. This will work great for the majority of the browsers.
However, if you need to broad your browser support and ensure that old browsers get lazy loaded images, you should probably use this setting: