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.