node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

markdown-it-implicit-figures

markdown-it-implicit-figures Build Status npm version

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

Example input:

text with ![](img.png)
 
![](fig.png)
 
works with links too:
 
[![](fig.png)](page.html)

Output:

<p>text with <img src="img.png" alt=""></p>
<figure><img src="fig.png" alt=""></figure>
<p>works with links too:</p>
<figure><a href="page.html"><img src="fig.png" alt=""></a></figure>

Install

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

Usage

var md = require('markdown-it')();
var implicitFigures = require('markdown-it-implicit-figures');
 
md.use(implicitFigures, {
  dataType: false,  // <figure data-type="image">, default: false 
  figcaption: false  // <figcaption>alternative text</figcaption>, default: false 
});
 
var src = 'text with ![](img.png)\n\n![](fig.png)\n\nanother paragraph';
var res = md.render(src);
 
console.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 to put the alternative text in a <figcaption>-block after the image. E.g.: ![text](img.png) renders to

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

License

MIT © Arve Seljebu