tkhquang / gridsome-remark-figure-caption

A gridsome remark plugin to transform markdown image to figure with caption element.

gridsome-remark-figure-caption

Simple plugin for @gridsome/transformer-remark to transform ![Some Text](path-to-image.jpg) into:

<figure>
  <img src="path-to-image.jpg" />
  <figcaption>Some Text</figcaption>
</figure>

Install

npm install -s gridsome-remark-figure-caption

Setup

module.exports = {
  siteName: "Gridsome",
  plugins: [
    // ...
  ],
  templates: {
    // ...
  },
  transformers: {
    // Add markdown support to all file-system sources
    remark: {
      plugins: [
        [
          "gridsome-remark-figure-caption",
          {
            // All the options here are optional
            figureClassName: "md-figure-block",
            imageClassName: "md-figure-image",
            captionClassName: "md-figure-caption",
          },
        ],
      ],
    },
  },
};

Configuration options

Name	Description
figureClassName	class for the wrapped figure element
imageClassName	class for the wrapped img element
captionClassName	class for the wrapped figcaption element

Omit any of the options will create the tag with no specified class names.

PRs are welcome