https://github.com/josestg/rehype-figure

rehype plugins to support figure and caption
https://github.com/josestg/rehype-figure

html-figcaption html-figure rehype rehype-plugin remark remark-plugin unifiedjs

Last synced: 5 months ago
JSON representation

rehype plugins to support figure and caption

• Host: GitHub
• URL: https://github.com/josestg/rehype-figure
• Owner: josestg
• License: mit
• Created: 2020-08-22T23:02:05.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-23T12:47:19.000Z (over 4 years ago)
• Last Synced: 2024-11-01T14:40:12.258Z (6 months ago)
• Topics: html-figcaption, html-figure, rehype, rehype-plugin, remark, remark-plugin, unifiedjs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/rehype-figure
• Size: 46.9 KB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rehype-figure

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

![license](https://badgen.net/github/license/josestg/rehype-figure)

![release](https://badgen.net/github/release/josestg/rehype-figure)

![npm](https://badgen.net/npm/v/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

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

  

  

    

    

      These two images will be children 'rehype-container'

    

  





  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'

```