https://github.com/arve0/markdown-it-implicit-figures

Render images occurring by itself in a paragraph as `<figure>< img ...></figure>`, similar to pandoc's implicit_figures
https://github.com/arve0/markdown-it-implicit-figures

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/arve0/markdown-it-implicit-figures
• Owner: arve0
• License: mit
• Created: 2015-11-23T21:28:38.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2024-06-16T11:12:28.000Z (over 1 year ago)
• Last Synced: 2025-06-28T04:35:47.606Z (5 months ago)
• Language: JavaScript
• Size: 78.1 KB
• Stars: 56
• Watchers: 3
• Forks: 17
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# markdown-it-implicit-figures [![Build Status](https://github.com/arve0/markdown-it-implicit-figures/actions/workflows/test.yml/badge.svg)](https://github.com/arve0/markdown-it-implicit-figures/actions/workflows/test.yml) [![npm version](https://badge.fury.io/js/markdown-it-implicit-figures.svg)](http://badge.fury.io/js/markdown-it-implicit-figures)

Render images occurring by itself in a paragraph as ``, similar to [pandoc's implicit figures](http://pandoc.org/README.html#images).

Example input:

```md

text with ![](img.png)

![](fig.png)

works with links too:

[![](fig.png)](page.html)

```

Output:

```html

text with 



works with links too:



```


## Install

```

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

```

## Usage

```js

const md = require('markdown-it')();

const implicitFigures = require('markdown-it-implicit-figures');

md.use(implicitFigures, {

  dataType: false,  // , default: false

  figcaption: false,  // alternative text, default: false

  keepAlt: false // alt text, default: false

  lazyLoading: false, // , default: false

  link: false // , default: false

  tabindex: false, // ..., default: false

});

const src = 'text with ![](img.png)\n\n![](fig.png)\n\nanother paragraph';

const res = md.render(src);

console.log(res);

```

[demo in RunKit](https://runkit.com/embed/k48mqe5q6p56)

### Options

- `dataType`: Set `dataType` to `true` to declare the data-type being wrapped,

  e.g.: ``. 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 ``-block after the image. E.g.: `![text](img.png)` renders to

  ```html

  

    

    text

  

  ```

  - Set `figcaption` to `title` to put the title text in a ``-block

    after the image. E.g.: `![text](img.png "title")` renders to

    ```html

    

      

      title

    

    ```

- `keepAlt`: Set `keepAlt` to `true` to prevent it from being cleared when turned

  into a `figcaption`, E.g.: `![text](img.png)` renders to

  ```html

  

    

    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](https://css-tricks.com/expanding-images-html5/),

  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](http://arve0.github.io/)