Mandaris Moore


An example diagram created with PlantUML.
An example diagram created with PlantUML.

I'm going to be changing the pelican posts that I have that use the PlantUML plugin to be in the draft status.

I really enjoy having a way to put my words into a diagram, but I honestly haven't had a need to and having my computer pause for a second as it starts up java to render the diagrams everytime has gotten a little annoying.

Going forward, I'll use an application to create the diagrams and then just add them to my images directory.


A stone statue of a woman standing by herself.
A stone statue of a woman standing by herself.

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.