How to add custom image tag to pagedown?

Question

I'm attempting to duplicate the original img tag's functionality in custom img tag that will be added to the pagedown converter.

e.g I'm copy the original behavior:

![image_url][1] [1]: http://lolink.com gives <img src="http://lolink.com">

into a custom one:

?[image_url][1] [1]: http://lolink.com gives <img class="lol" src="http://lolink.com">

Looking at the docs the only way to do this is through using the preblockgamut hook and then adding another "block level structure." I attempted doing this and got an Uncaught Error: Recursive call to converter.makeHtml

here's the code of me messing around with it:

    converter.hooks.chain("preBlockGamut", function (text, dosomething) {
        return text.replace(/(\?\[(.*?)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g, function (whole, inner) {
            return "<img src=" + dosomething(inner) + ">";
        });
    });

I'm not very experienced with hooks and everything so what would I do to fix it? Thanks.

UPDATE: found out that _DoImages runs after prespangamut, will use that instead of preblockgamut

Answer 1

Figured it out! The solution is very clunky and involves editing the source code because I am very bad at regex and the _DoImage() function uses a lot of internal functions only in the source.

solution:

All edits will be made to the markdown.converter file.

do a ctrl+f for the _DoImage function, you will find that it is named in two places, one in the RunSpanGamut and one defining the function. The solution is simple, copy over the DoImage function and related stuff to a new one in order to mimic the original function and edit it to taste.

next to DoImage function add:

function _DoPotatoImages(text) {
    text = text.replace(/(\?\[(.*?)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g, writePotatoImageTag);
    text = text.replace(/(\?\[(.*?)\]\s?\([ \t]*()<?(\S+?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g, writePotatoImageTag);
    return text;
}

function writePotatoImageTag(wholeMatch, m1, m2, m3, m4, m5, m6, m7) {
    var whole_match = m1;
    var alt_text = m2;
    var link_id = m3.toLowerCase();
    var url = m4;
    var title = m7;

    if (!title) title = "";

    if (url == "") {
        if (link_id == "") {
            link_id = alt_text.toLowerCase().replace(/ ?\n/g, " ");
        }
        url = "#" + link_id;

        if (g_urls.get(link_id) != undefined) {
            url = g_urls.get(link_id);
            if (g_titles.get(link_id) != undefined) {
                title = g_titles.get(link_id);
            }
        }
        else {
            return whole_match;
        }
    }

    alt_text = escapeCharacters(attributeEncode(alt_text), "*_[]()");
    url = escapeCharacters(url, "*_");
    var result = "<img src=\"" + url + "\" alt=\"" + alt_text + "\"";

    title = attributeEncode(title);
    title = escapeCharacters(title, "*_");
    result += " title=\"" + title + "\"";

    result += " class=\"p\" />";

    return result;
}   

if you look at the difference between the new _DoPotatoImages() function and the original _DoImages(), you will notice I edited the regex to have an escaped question mark \? instead of the normal exclamation mark !

Also notice how the writePotatoImageTag calls g_urls and g_titles which are some of the internal functions that are called.

After that, add your text = _DoPotatoImages(text); to runSpanGamut function (MAKE SURE YOU ADD IT BEFORE THE text = _DoAnchors(text); LINE BECAUSE THAT FUNCTION WILL OVERRIDE IMAGE TAGS) and now you should be able to write ?[image desc](url) along with ![image desc](url)

done.

Answer 2

Thanks for the edit to the main post.

I see what you mean now.

It is a bit weird how it uses empty capture groups to specify tags, but if it works, it works.

It looks like you would need to add on an extra () onto the regex string, then specify m8 as a new extra variable to be passed into the function, and then specify it as class = m8; like the other variables at the top of the function.

Then where it says var result =, instead of class =\"p\" you would just put class + title=\"" + .......

Answer 3

The full line (not only the regex) in Markdown.Converter.js goes like this:

text = text.replace(/(!\[(.*?)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g, writeImageTag);

so check the function writeImageTag. There you can see how the regex matching text is replaced with a full img tag.

You can change the almost-last line before its return from

 result += " />";

to

 result += ' class="lol" />';