the f*ck rants about stuff

How to create your own markdown syntax with python-markdown

Rationale

Markdown (and I use Pelican with md) is not very good at handling images. I want an easy way in md for the image to fill the column but to link to the full size image automatically

I want to turn:

!![alt text](path/image.png title text)

into:

<a href="path/image.png"><img width=100% title="title text" alt="alt text" src="path/image.png"></a>
Code
aimg/__init__.py:

#!/usr/bin/python
# mardown extension. Wraps <a> tags around img and adds width=100%
#
# This makes easier to link to big images by making them fit the column
# and linking to the big image
#
# run the module to check that it works :)

from markdown.extensions import Extension
from markdown.inlinepatterns import Pattern
from markdown.util import etree

class Aimg(Extension):
    def extendMarkdown(self, md, md_globals):
        md.inlinePatterns.add('aimg', AimgPattern('^!!\[(.+)\]\((\S+) (.+)\)$'), '_begin')


class AimgPattern(Pattern):
    def handleMatch(self, m):
        a = etree.Element('a', {'href':m.group(3)})
        img = etree.Element('img', {
            'width': '100%',
            'src': m.group(3),
            'alt': m.group(2),
            'title': m.group(4)
        })
        a.append(img)
        return a

if __name__ == '__main__':
    import markdown
    print(markdown.markdown('!![alt text](/images/image.png title text)', extensions=[Aimg()]))

In your pelicanconf.py:

import aimg
MD_EXTENSIONS = ['codehilite(css_class=highlight)', 'extra', aimg.Aimg()]
Bonus
alternative solutions without an extension

Yes, you can insert raw HTML in a markdown file

<a href="path/image.png"><img width=100% title="title text" alt="alt text" src="path/image.png"></a>

Yes, you can have them mixed. You cant add attributes tho

[<img width=100% title="title text" alt="alt text" src="path/image.png">](path/image.png)

Yes, with the extra extension you can have classes and modify them via CSS

![alt text](path/image.png title text){.classnamewith100%width}
My version
!![alt text](path/image.png title text)
comments?

If you liked this, I think you might be interested in some of these related articles:

¡ En Español !