Description

Currently, the caption prefix (both surrounding text and the auto-incremented number) is output together in a single <span.caption-prefix>. This makes it difficult to individually style, extract, or manipulate the number separate from the surrounding text.

The incremented number should be wrapped in its own nested tag (for example: <span.caption-index>) inside the <span.caption-prefix>. This would allow for more precise control and customization.

Benefits

• Styling: Easily target just the index with CSS
• Extraction: Simpler parsing for generating a Table of Figures (ToF)
• Post-processing: Enables easier DOM manipulation via JavaScript or Python

Solution Idea

Given this configuration:

extenconfigs = {
    "pymdownx.blocks.caption": {
        "types": [
            'caption',
            {
                'name': 'test-caption',
                'prefix': 'Test {} -',
                'classes': 'figure-test'
            }
        ]
    }
}

And Markdown content:

This is a test

/// test-caption
This is a caption
///

The expected HTML output would be:

<figure class="figure-test">
    <p>This is a test</p>
    <figcaption>
        <p><span class="caption-prefix">Test <span class="caption-index">1</span> -</span> This is a caption</p>
    </figcaption>
</figure>