markdown-captions 2.1.2

Turn markdown images into captioned images using <figure>

markdown-captions

Converts images with alt text to <figure> with <figcaption>.

Usage

pip install markdown-captions

md = markdown.Markdown(
    extensions=[
        'markdown_captions',
        'attr_list' # optional
    ]
)

Examples

simple example

![caption](img.jpg)
![caption2](img2.jpg)

<p>
  <figure><img src="img.jpg" /><figcaption>caption</figcaption></figure>
  <figure><img src="img2.jpg" /><figcaption>caption2</figcaption></figure>
</p>

image title and class (with attr_list extension)

![caption](img.jpg "title"){: .class1 }

<figure class="class1"><img src="img.jpg" title="title" /><figcaption>caption</figcaption></figure>

inline captioned images

<style>
    .inline {
        display: inline-block;
    }
</style>
![caption](img.jpg){: .inline }
![caption2](img2.jpg){: .inline }

<p>
  <figure class="inline"><img src="img.jpg" /><figcaption>caption</figcaption></figure>
  <figure class="inline"><img src="img2.jpg" /><figcaption>caption2</figcaption></figure>
</p>

images with no alt text are not captioned

![](img.jpg)

<img src="img.jpg" />

referenced images, and shorthand references are also supported

![caption][ref]
![caption2]

[ref]: img.jpg
[caption2]: img2.jpg

<p>
  <figure><img src="img.jpg" /><figcaption>caption</figcaption></figure>
  <figure><img src="img2.jpg" /><figcaption>caption2</figcaption></figure>
</p>