unified

Project: josestg/rehype-figure

Package: rehype-figure@1.0.1

  1. Dependents: 0

    rehype-figure

    Build Status license release npm

    rehype plugins to support figure and caption!

    Install

    npm install rehype-figure
    
    or
    
    yarn add rehype-figure
    

    Use

    Markdown:

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

    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:

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