Mandaris Moore

In my last post, I left off with a list of things that I wanted to work on for the next release of the design of the blog. I'm still changing the header at the top of the page and I've been working on improving the contrast of the colors you see for links to make it easier to read. Something you can't spot just by looking is the fact that <h1> - <h3> tags don't correspond to the breakdown of the syntax of the rest of the site.

What do I see on the internet

I feel that a lot of the sites that are on the internet only use the <h1>, <h2>, <h3> tags and looking at some of the templates that I've come across for pelican use css classes to differentiate them in the design.

I don't have a problem with that, but I felt that it doesn't help those that might be using some kind of screen reader or parsing system¹.

Searching for a solution

Once again, I started looking for a place where this had already been fixed and quickly found one that would make sure that the html that python-markdown would give me would match what I was expecting to give to my template.

Christian Prieto had already come up with this handy solution in 2016 and had put some tests and an example of how to incorporate it into pelican.

But there are further complications

Unfortunately, pelican has changed since the original and I wasn't able to get the solution to work. The readme says to add the following:

MD_EXTENSIONS = ['downheader']

But the latest documentation found here, have the markdown default to be defined as a dictionary and not an array². The simplest way to get it to work is to change your pelicanconfig.py to have the following code.

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

For me, I had to specify a value because the title of my site is in a <h1> tag and the article headers are in <h2>.

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

I've since made a pull request so that others can get around this as well.

Conclusion

I'm happier and happier with the way that the site is coming together, but I'm afraid of the amount of technical debt that the site is accruing as I go along. I've to to make the readme a priority for those who come after me and want to make this design better.

I've also taken some time to just take the header and just make a standalone project that demonstrates how it works. I points to the simple theme that comes with pelican so people can just download it after installing pelican, python-markdown and the mdx_downheader package.