<file_sep># Markdown Image caption.

Inspired by the probably un-maintained package [mdx_figcap](ttps://github.com/mkszk/mdx_figcap)

## Usage:

Make sure you have [markdown](https://pypi.org/project/Markdown/) installed. 

Define an image with caption in your markdown.

```markdown
![alttext](http://example.com/image.png "caption")
```

This will be converted to:

```html

<span class="img_container center" style="display: block;">
    <img alt="test" src="http://example.com/image.png" style="display:block; margin-left: auto; margin-right: auto;" title="caption" />
    <span class="img_caption" style="display: block; text-align: center;">caption</span>
</span>
```

Why no figure tag implementation ?

The figure tag is a block level element. The image element is an inline element. This difference breaks the attribute extension.
So `![alttext](http://example.com/image.png "caption"){: .center}` would not work if a figure was used.

## Installation

```bash
pip install markdown-image-caption
```

add the plugin to your markdown

```python
import markdown

parser = markdown.Markdown(extensions=["markdown_image_caption.plugin"])
```<file_sep>import markdown
import pytest

from markdown_image_caption.plugin import FigureCaptionExtension
import markdown.extensions.attr_list

input1 = "![test](imgs/img.png)"
output1 = '<p><img alt="test" src="imgs/img.png" /></p>'

input2 = '![test](imgs/img.png "figure caption")'
output2 = '<p><span class="img_container" style="display: block;"><img alt="test" src="imgs/img.png" style="display:block; margin-left: auto; margin-right: auto;" title="figure caption" /><span class="img_caption" style="display: block; text-align: center;">figure caption</span></span></p>'

input3 = "no image here"
output3 = "<p>no image here</p>"

input4 = "![test](imgs/img.png){: .center}"
output4 = '<p><img alt="test" class="center" src="imgs/img.png" /></p>'

input5 = '![test](imgs/img.png "figure caption"){: .center}'
output5 = '<p><span class="img_container center" style="display: block;"><img alt="test" src="imgs/img.png" style="display:block; margin-left: auto; margin-right: auto;" title="figure caption" /><span class="img_caption" style="display: block; text-align: center;">figure caption</span></span></p>'


@pytest.fixture
def parser():
    return markdown.Markdown(
        extensions=[FigureCaptionExtension(), "markdown.extensions.attr_list"]
    )


def test_image(parser):
    txt = parser.convert(input1)
    print(txt)
    assert txt == output1


def test_figure(parser):
    txt = parser.convert(input2)
    print(txt)

    assert txt == output2


def test_no_image(parser):
    txt = parser.convert(input3)
    assert txt == output3


def test_image_with_attr_list(parser):
    txt = parser.convert(input4)
    print(txt)
    assert txt == output4


def test_figure_with_attr_list(parser):
    txt = parser.convert(input5)
    print(txt)
    assert txt == output5
<file_sep>"""
Image Caption Extension for Python-Markdown
==================================
Converts \![alttext](http://example.com/image.png "caption")
to the image with a caption.
Its syntax is same as embedding images.
License: [BSD](http://www.opensource.org/licenses/bsd-license.php)
"""


from markdown.extensions import Extension
from markdown.inlinepatterns import IMAGE_LINK_RE
from markdown.util import etree
from markdown.inlinepatterns import ImageInlineProcessor


class FigureCaptionExtension(Extension):
    def extendMarkdown(self, md):
        # append to inline patterns
        md.inlinePatterns["image_link"] = FigureCaptionPattern(
            IMAGE_LINK_RE, md
        )


class FigureCaptionPattern(ImageInlineProcessor):
    def handleMatch(self, m, data):
        image, start, index = super().handleMatch(m, data)
        if image is None:
            return image, start, index
        title = image.get("title")
        if title:
            image.set(
                "style",
                "display:block; margin-left: auto; margin-right: auto;",
            )

            container = etree.Element(
                "span",
                attrib={"style": "display: block;", "class": "img_container"},
            )

            container.append(image)
            etree.SubElement(
                container,
                "span",
                attrib={
                    "class": "img_caption",
                    "style": "display: block; text-align: center;",
                },
            ).text = title
            return container, start, index
        else:
            return image, start, index


def makeExtension(*args, **kwargs):
    return FigureCaptionExtension(*args, **kwargs)
