Markdown IT Image Figures

![CI](https://github.com/Antonio-Laguna/markdown-it-image-figures/actions/workflows/ci.yml)

Render images occurring by itself in a paragraph as

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.

Example input:
``md text with ![](img.png)

![](fig.png)

works with links too:

![](page.html)`

Output:`html

text with



works with links too:



Install

`$ npm i markdown-it-image-figures`

`Usage`

`js const md = require('markdown-it')(); const implicitFigures = require('markdown-it-image-figures');

md.use(implicitFigures);

const src = 'text with ![](img.png)\n\n![](fig.png)\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-typebeing wrapped, e.g.:

`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`.`
`Code like` !alt `renders to:`
```html`
``
`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:`
``js md.use(implicitFigures, { lazy: true, removeSrc: true, async: true, classes: 'lazy' });`
`const src = '!alt'; const res = md.render(src);`
`console.log(res); /*`
`*/``
`Then you need to load something like Lozad.js and some script like this. You might want to customise the class on the attribute` classes `which get added to the` img` (for easy selector).

`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`.`
`Code like` !alt `renders to:`
```html`
``
`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:`
``js md.use(implicitFigures, { lazy: true, removeSrc: true, async: true, classes: 'lazy' });`
`const src = '!alt'; const res = md.render(src);`
`console.log(res); /*`
`*/``
`Then you need to load something like Lozad.js and some script like this. You might want to customise the class on the attribute` classes `which get added to the` img` (for easy selector).

Markdown IT Image Figures

![CI](https://github.com/Antonio-Laguna/markdown-it-image-figures/actions/workflows/ci.yml)

Render images occurring by itself in a paragraph as

, similar to pandoc's implicit figures.

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.

Example input:
``md text with ![](img.png)

![](fig.png)

works with links too:

![](page.html)`

Output:`html

text with



works with links too:



Install

`$ npm i markdown-it-image-figures`

`Usage`

`js const md = require('markdown-it')(); const implicitFigures = require('markdown-it-image-figures');

md.use(implicitFigures);

const src = 'text with ![](img.png)\n\n![](fig.png)\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-typebeing wrapped, e.g.:

`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`.`
`Code like` !alt `renders to:`
```html`
``
`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:`
``js md.use(implicitFigures, { lazy: true, removeSrc: true, async: true, classes: 'lazy' });`
`const src = '!alt'; const res = md.render(src);`
`console.log(res); /*`
`*/``
`Then you need to load something like Lozad.js and some script like this. You might want to customise the class on the attribute` classes `which get added to the` img` (for easy selector).

markdown-it-image-figures

Markdown IT Image Figures

Install

`Usage`

$3

`Web performance recommended settings`

markdown-it-image-figures

Markdown IT Image Figures

Install

`Usage`

$3

`Web performance recommended settings`