Gathering detailed insights and metrics for markdown-it-image-figures
markdown-it-implicit-figures
Render images occurring by itself in a paragraph as `<figure><img ...></figure>`, similar to pandoc's implicit_figures
@ruanyf/markdown-it-implicit-figures
Render images occurring by itself in a paragraph as `<figure><img ...></figure>`, similar to pandoc's implicit_figures
npm install markdown-it-image-figuresTypescript
Module System
Min. Node Version
Node Version
NPM Version
86.6
Supply Chain
100
Quality
75.5
Maintenance
100
Vulnerability
99.6
License
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
675,475
Last Day
1,573
Last Week
8,604
Last Month
42,846
Last Year
438,039
21 Stars
40 Commits
5 Forks
2 Watching
1 Branches
2 Contributors
Minified
Minified + Gzipped
Latest Version
2.1.1
Package Id
markdown-it-image-figures@2.1.1
Unpacked Size
22.14 kB
Size
5.94 kB
File Count
8
NPM Version
8.11.0
Node Version
16.15.1
Cumulative downloads
Total Downloads
Last day
-20.6%
1,573
Compared to previous day
Last week
-20.4%
8,604
Compared to previous week
Last month
2.3%
42,846
Compared to previous month
Last year
109.1%
438,039
Compared to previous year
1
Render images occurring by itself in a paragraph as <figure><img ...></figure>, 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:
1text with  2 3 4 5works with links too: 6 7[](page.html)
Output:
1<p>text with <img src="img.png" alt=""></p> 2<figure><img src="fig.png" alt=""></figure> 3<p>works with links too:</p> 4<figure><a href="page.html"><img src="fig.png" alt=""></a></figure>
$ npm i markdown-it-image-figures
1const md = require('markdown-it')(); 2const implicitFigures = require('markdown-it-image-figures'); 3 4md.use(implicitFigures); 5 6const src = 'text with \n\n\n\nanother paragraph'; 7const res = md.render(src); 8 9console.log(res); 10 11/* 12<p>text with <img src="img.png" alt=""></p> 13<figure><img src="fig.png" alt=""></figure> 14<p>another paragraph</p> 15*/
dataType: Set dataType to true to declare the data-type being wrapped,
e.g.: <figure data-type="image">. 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 <figcaption> block after the image; set figcaption to "alt" to use the alt text as a <figcaption>. E.g.:  renders to
1<figure> 2 <img src="fig.png" alt="This is an alt"> 3 <figcaption>This is a title</figcaption> 4</figure>
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  renders to:
1<figure> 2 <img alt="alt" src="fig.png" loading="lazy"> 3</figure>
You can override it for a single image with something like {loading=eager} which will generate the following markup:
1<figure> 2 <img alt="alt" src="fig.png" loading="eager"> 3</figure>
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 {decoding=auto}
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:
1md.use(implicitFigures, { 2 lazy: true, 3 removeSrc: true, 4 async: true, 5 classes: 'lazy' 6}); 7 8const src = ''; 9const res = md.render(src); 10 11console.log(res); 12/* 13<figure> 14 <img alt="alt" data-src="fig.png" class="lazy" loading="lazy" decoding="async"> 15</figure> 16*/
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).
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
Reason
9 existing vulnerabilities detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 1/25 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More