Image captions

[futuresoup]

We need a way for images to have a nice caption formatting so writers can put in image captions using markdown syntax.

We'll be using @bl912 's design. The one with the right alignment

In HTML this is accomplished using the following syntax:

<figure>
    <img src="image-url.jpg" alt="Alt text" />
    <figcaption>This is the image caption</figcaption>
</figure>

However, this is cumbersome. It would be better if we supported a simple Markdown syntax that replicate's Pandoc's format, which I believe is:

![alt text](image-url.jpg "This is the image caption")

According to phind.com this is the method:

1. Create a Custom Remark Plugin

You'll need to create a custom Remark plugin that recognizes your image caption syntax and transforms it into the

and

HTML structure. This involves parsing the Markdown content to find instances of your syntax and then replacing them with the desired HTML.

2. Register the Plugin with Docusaurus

Once your plugin is created, you'll need to register it with Docusaurus so that it's used during the Markdown processing. This can be done by adding the plugin to the remarkPlugins array in your docusaurus.config.js file.

Example Plugin Implementation:

// customImageCaptionPlugin.js
const visit = require('unist-util-visit');

module.exports = function customImageCaptionPlugin() {
 return (tree) => {
    visit(tree, 'image', (node) => {
      // Check if the node has a title (caption)
      if (node.title) {
        // Create a new figure node
        const figure = {
          type: 'figure',
          children: [
            node, // The original image node
            {
              type: 'figcaption',
              children: [{ type: 'text', value: node.title }],
            },
          ],
        };

        // Replace the image node with the figure node
        node.type = 'figure';
        node.children = [figure];
      }
    });
 };
};

Below is a simplified example of what the plugin might look like. This example assumes you're familiar with creating Remark plugins and might need adjustments based on your specific requirements.

// docusaurus.config.js
module.exports = {
 presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [require('./path/to/customImageCaptionPlugin')],
        },
      },
    ],
 ],
};

[MyBaBB]

I believe that I have the component correct, I would like to collaborate with @Sugam Goel to see if we can iron this out in the docusaurus.config file

[MyBaBB]

We are trying to do this.

• ![That Image](/img/.jpg "figcaption here")

While this is what is achieved naturally here.

• ![That Image](/img/.jpg "A Tooltip is Created")

[Sugamgoel28]

Is this relevant? https://github.com/facebook/docusaurus/discussions/4633

[futuresoup]

@Sugamgoel28 @MyBaBB - yes it looks like the right direction. Do you understand what they're saying about passing remark/rehype plugins so we can invent our own syntax?

The implementation example provided from @cmdcolin seems relevant.

The only issue with the way he did it is that:

A) it requires importing the component on each page which is cumbersome and not good for writers. I also don't know if it will be work out of the box with our Decap CMS system

B) The syntax does not look like markdown, it looks like jsx. That's more of a minor thing, but it is easy to forget the syntax the way he has it and perhaps incompatible with migrating to different systems if we decide to move away from Docusaurus.

That said, you're welcome to try his implementation as a backup if we can't make an official plugin that does this the proper way.