gridsome-remark-figure-caption

A gridsome remark plugin to transform markdown image to figure with caption element
20,984 3
Install
npm install gridsome-remark-figure-caption
Latest Version:1.2.2
License:MIT
Last Updated:Jul 21, 2023
Links: GitHub  ·  npm
Maintainer: tkhquang

gridsome-remark-figure-caption

Simple plugin for @gridsome/transformer-remark to transform ![Some Text](https://raw.githubusercontent.com/tkhquang/gridsome-remark-figure-caption/HEAD/path-to-image.jpg) into:

<figure>
  <img src="https://raw.githubusercontent.com/tkhquang/gridsome-remark-figure-caption/HEAD/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

Related Packages

@gridsome/vue-remark

Use Vue Components in Markdown

21,482 8,460
gridsome-plugin-remark-prismjs-all

Gridsome plugin prism syntax highlighting

2,996 10
gridsome-plugin-remark-youtube

Gridsome Remark plugin to embed YouTube videos

557 2
gridsome-plugin-sentry

Sentry error tracking for Gridsome project

5,813 2

Version History

Version Released License
1.2.2 MIT
1.2.1 MIT
1.2.0 MIT
1.1.3 MIT
1.1.2 MIT