https://github.com/tkhquang/gridsome-remark-figure-caption

A gridsome remark plugin to transform markdown image to figure with caption element.
https://github.com/tkhquang/gridsome-remark-figure-caption

gridsome gridsome-plugin

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tkhquang/gridsome-remark-figure-caption
• Owner: tkhquang
• Created: 2020-06-13T21:29:14.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-21T09:50:18.000Z (over 1 year ago)
• Last Synced: 2024-11-08T13:05:18.312Z (about 2 months ago)
• Topics: gridsome, gridsome-plugin
• Language: JavaScript
• Size: 19.5 KB
• Stars: 3
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gridsome-remark-figure-caption

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

```html

  

  Some Text

```

## Install

```

npm install -s gridsome-remark-figure-caption

```

## Setup

```js

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