How To Add Custom Image Tag To Pagedown?

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]

Solution 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;
}

functionwritePotatoImageTag(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.

Solution 2:

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" />';

Solution 3:

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=\"" + .......