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

License: MIT

Language: JavaScript

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)


works with links too:



<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>


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


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
  tabindex: false, // <figure tabindex="1+n">..., default: false
  link: false // <a href="img.png"><img src="img.png"></a>, default: false

var src = 'text with ![](img.png)\n\n![](fig.png)\n\nanother paragraph';
var res = md.render(src);


demo as jsfiddle


  • 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

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


MIT © Arve Seljebu

Project Statistics

Sourcerank 8
Repository Size 33.2 KB
Stars 23
Forks 10
Watchers 2
Open issues 0
Dependencies 35
Contributors 6
Tags 15
Last updated
Last pushed

Top Contributors See all

Arve Seljebu Daniel Gerber Qihuan Piao Mayo Jordanov Michael Shick _

Packages Referencing this Repo

Render images occurring by itself in a paragraph as `<figure><img ...></figure>`, similar to pand...
Latest release 0.3.2-1 - Published - 23 stars
Render images occurring by itself in a paragraph as `<figure><img ...></figure>`, similar to pand...
Latest release 0.9.0 - Updated - 23 stars

Recent Tags See all

v0.9.0 June 12, 2018
v0.8.0 June 12, 2018
v0.7.1 April 25, 2018
v0.7.0 April 04, 2018
v0.6.0 May 19, 2017
v0.5.0 December 05, 2016
v0.4.0 December 04, 2016
v0.3.2 June 01, 2016
v0.3.1 May 31, 2016
v0.3.0 May 30, 2016
v0.2.3 December 21, 2015
v0.2.2 December 21, 2015
v0.2.1 December 21, 2015
v0.2.0 December 09, 2015
v0.1.0 December 08, 2015

Something wrong with this page? Make a suggestion

Last synced: 2018-06-22 19:40:16 UTC

Login to resync this repository