Update readme.md

README.md

@@ -1 +1,94 @@
-# rehype-figure
+# 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>
+```