mkdocs-pandoc icon indicating copy to clipboard operation
mkdocs-pandoc copied to clipboard

Additional html <img> tags filter for pandoc(1) flavoured markdown conversion

Open ghost opened this issue 9 years ago • 2 comments

Problem: MkDocs only shows resized pictures if they are written in html tags. The pandoc conversion from markdown to pdf will simply cut out all html inliners since the extension raw_html would be ignored. The conversion from markdown to html and finally to pdf will drop any alignment information in tables which would be available in conversion from markdown to pdf.

Idea: The conversion triggered by mkdocs2pandoc > docs.pd could already check for html tags and change them to markdown inliners. /mkdocs_pandoc/filters/ contains filters like the images.py. A suggestion for a new filter would be html_images.py.

Suggested solution: In /mkdocs_pandoc/pandoc_converter.py add

import mkdocs_pandoc.filters.html_images

and below def init(self, **kwargs):

        self.filter_html_img = True

Above lines_tmp = f_headlevel.run(lines_tmp) add

            if self.filter_html_img:
                lines_tmp = f_html_image.run(lines_tmp)

html_images.py:

import re

class ImageFilter(object):
    def run(self, lines):
        ret = []
        for line in lines:
            done = {}
            while True:
                src = ''
                alt = ''
                title = ''
                width_height = ''
                matchImg = re.search(r'<img ([^>]*)>([^<]*</img>)?', line)

                # image in html style?
                if matchImg:
                    if matchImg.group(0) in done:
                        break
                    allInfoElems = matchImg.group(1)
                    srcMatch = re.search(r'src=\"([^>\"]*)\"', allInfoElems)
                    src=srcMatch.group(1)
                    altMatch = re.search(r'alt=\"([^>\"]*)\"', allInfoElems)
                    if altMatch:
                        alt=altMatch.group(1)
                    titleMatch = re.search(r'title=\"([^>\"]*)\"', allInfoElems)
                    if titleMatch:
                        title=" \""+titleMatch.group(1)+"\""
                    widthMatch = re.search(r'width=\"([^>\"]*)\"', allInfoElems)
                    if widthMatch:
                        width="width="+widthMatch.group(1)+"px "
                    heightMatch = re.search(r'height=\"([^>\"]*)\"', allInfoElems)
                    if heightMatch:
                        height="height="+heightMatch.group(1)+"px "
                    if width != "" or height != "":
                        width_height="{ "+width+height+"}"
                else:
                    break
                line = re.sub(r'<img [^>]*>([^<]*</img>)?',
                    '![%s](%s%s)%s' % (alt, src, title, width_height), line)
                done[matchImg.group(0)] = True
            ret.append(line)
        return ret

ghost avatar Feb 24 '16 14:02 ghost

Provided pandoc can handle images with height/width, this looks like a good idea, yes. Can you turn this into a pull request (I presume you've got the modified code anyway) and provide a test case so I can try it out?

I'm a bit busy right now (which is why I haven't even gotten around to properly testing and merging the fix for https://github.com/jgrassler/mkdocs-pandoc/issues/9 ) but I'll try to get around to it soonish and cut a new release with the patches from both #9 and #10.

jgrassler avatar Feb 24 '16 17:02 jgrassler

This would be a wonderful addition and very useful to my small site http://cudmore.github.io/treadmill

cudmore avatar Apr 15 '16 21:04 cudmore