markdown-it-implicit-figures

Render images occurring by itself in a paragraph as <figure><img ...></figure>, similar to pandoc's implicit figures.

Example input:

1text with ![](img.png)
2
3![](fig.png)
4
5works with links too:
6
7[![](fig.png)](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>

Install

$ npm install --save markdown-it-implicit-figures

Usage

1var md = require('markdown-it')();
2var implicitFigures = require('markdown-it-implicit-figures');
3
4md.use(implicitFigures, {
5  dataType: false,  // <figure data-type="image">, default: false
6  figcaption: false,  // <figcaption>alternative text</figcaption>, default: false
7  keepAlt: false // <img alt="alt text" .../><figcaption>alt text</figcaption>, default: false
8  lazyLoading: false, // <img loading="lazy" ...>, default: false
9  link: false // <a href="img.png"><img src="img.png"></a>, default: false
10  tabindex: false, // <figure tabindex="1+n">..., default: false
11});
12
13var src = 'text with ![](img.png)\n\n![](fig.png)\n\nanother paragraph';
14var res = md.render(src);
15
16console.log(res);

demo as jsfiddle

Options

• dataType: Set dataType to true to declare the data-type being wrapped, e.g.: <figure data-type="image">. This can be useful for applying special styling for different kind of figures.

• figcaption: Set figcaption to true or alt to put the alternative text in a <figcaption>-block after the image. E.g.: ![text](img.png) renders to

  1<figure>
  2  <img src="img.png" alt="">
  3  <figcaption>text</figcaption>
  4</figure>

  • Set figcaption to title to put the title text in a <figcaption>-block after the image. E.g.: ![text](img.png "title") renders to

    1<figure>
    2  <img src="img.png" alt="text">
    3  <figcaption>title</figcaption>
    4</figure>

• keepAlt: Set keepAlt to true to prevent it from being cleared when turned into a figcaption, E.g.: ![text](img.png) renders to

  1<figure>
  2  <img src="img.png" alt="text">
  3  <figcaption>text</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.

• lazyLoading: Set lazyLoading to true to add loading="lazy" to image element.

• link: Put a link around the image if there is none yet.

• copyAttrs: Copy attributes matching (RegExp or string) copyAttrs to figure element.

License

MIT © Arve Seljebu