Mandaris Moore

One thing that has been bothering me for a while is the fact that most of the websites that I was going to and the system that I was using to generate my blog were wrapping stand alone images into <p> tags.

For example:

![Alt message](url/to/image)

would turn into:

<p><img alt="Alt message" src="url/to/image" /></p>

To me, this doesn't make sense that you would have an image in an unnessary container.

Sure, it wouldn't been seen by most people, but don't think it parses to well for screen readers and is probably a hastle for webdesigners who have to account for this with generated content.

What's the solution?

Well, pelican does offer a wide array of plugins, but I've already worked with plugins before and I didn't want whatever solution that I came accross to be specific to pelican.

Luckily, I didn't have to come up with something all by myself because @jdittrich created an extension that you can add to python-markdown.

This make the markdown:

![Alt message](url/to/image)

into the following:

<figure><img alt="Alt message" src="url/to/image"><figcaption>Alt message</figcaption>
</figure>

Adding the extension to pelican

The instructions on adding markdown extensions was a little difficult for me to follow during my first read. Which actually turned into a learning experience as I had to read over the code.

Ultimately, I had to add the following to pelicanconfig.py to get it working.

# Markdown Plugins
MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.codehilite': {'css_class': 'highlight'},
        'markdown.extensions.extra': {},
        'markdown.extensions.meta': {},
        'figureAltCaption':{},
    },
    'output_format': 'html5',
}

One last thing

When I was experimenting with this extension, I noticed that it didn't allow for the information found in references to be placed in the <figcaption> tag.

I made a little change and am waiting for my pull request to be merged.