Numerous Pulsating Martians
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

markdown-it-implicit-figures

0.9.0 • Public • Published

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
  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);
 
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.

  • 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

install

npm i markdown-it-implicit-figures

Downloadsweekly downloads

165

version

0.9.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability