# rehype-figure

> [![Build Status](https://travis-ci.com/josestg/rehype-figure.svg?token=1ZtvVXXQrZXVL8domfez&branch=master)](https://travis-ci.com/josestg/rehype-figure)

Latest version **1.0.1** (published 2020-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install rehype-figure
pnpm add rehype-figure
yarn add rehype-figure
bun add rehype-figure
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-08-23 |
| First published | 2020-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Jose Alfredo Sitanggang |
| Maintainers | josestg |

## Links

- npm: https://www.npmjs.com/package/rehype-figure
- Repository: git@github.com:josestg/rehype-figure
- npm.io page: https://npm.io/package/rehype-figure

## Dependencies (2)

- [hastscript](https://npm.io/package/hastscript.md) ^6.0.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3

## Recent versions

- 1.0.1 (latest) — 2020-08-23
- 1.0.0 — 2020-08-23

## README

# rehype-figure

[![Build Status](https://travis-ci.com/josestg/rehype-figure.svg?token=1ZtvVXXQrZXVL8domfez&branch=master)](https://travis-ci.com/josestg/rehype-figure)

[rehype](https://github.com/rehypejs/rehype) plugins to support figure and caption!

## Install

```shell
npm install rehype-figure

or

yarn add rehype-figure
```

## Use

**Markdown:**

```md
# Images

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

![This is a caption and image alt property](https://img.id/dog.png)
![These two images will be children 'rehype-container'](https://img.id/cat.png)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

![These two images will be children 'rehype-container'](https://img.id/cat.png)
```

**rehype-figure:**

```js
const unified = require("unified")
const remark = require("remark-parse")
const remark2rehype = require("remark-rehype")
const stringify = require("rehype-stringify")
const assert = require("assert")
const vfile = require("to-vfile")

const rehypeFigure = require("rehype-figure")

function compile(filename) {
  return unified()
    .use(remark)
    .use(remark2rehype)
    .use(rehypeFigure, { className: "my-figure" })
    .use(stringify)
    .processSync(vfile.readSync("./__example__/" + filename))
    .toString()
}
```

**Yields:**

```html
<h1>Images</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua
</p>
<div class="my-figure-container">
  <figure class="my-figure">
    <img
      src="https://img.id/dog.png"
      alt="This is a caption and image alt property"
    />
    <figcaption>This is a caption and image alt property</figcaption>
  </figure>
  <figure class="my-figure">
    <img
      src="https://img.id/cat.png"
      alt="These two images will be children &#x27;rehype-container&#x27;"
    />
    <figcaption>
      These two images will be children 'rehype-container'
    </figcaption>
  </figure>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua
</p>
<figure class="my-figure">
  <img
    src="https://img.id/cat.png"
    alt="These two images will be children &#x27;rehype-container&#x27;"
  />
  <figcaption>These two images will be children 'rehype-container'</figcaption>
</figure>
```

---
_Source: https://npm.io/package/rehype-figure · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._