Как добавить пользовательский тег изображения в pagedown?

Question

Я пытаюсь скопировать оригинал img функциональность тега в обычай img тег, который будет добавлен в конвертер pagedown.

например, я копирую оригинальное поведение:

![image_url][1] [1]: http://lolink.com дает <img src="http://lolink.com">

в пользовательский:

?[image_url][1] [1]: http://lolink.com дает <img class="lol" src="http://lolink.com">

Глядя на документы, единственный способ сделать это через использование preblockgamut подключить и затем добавить еще одну "структуру уровня блока". Я попытался сделать это и получил Uncaught Error: Recursive call to converter.makeHtml

вот код моего возни с этим:

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

Я не очень опытен с крючками и всем прочим, что бы я сделал, чтобы это исправить? Благодарю.

ОБНОВЛЕНИЕ: обнаружил, что _DoImages работает после prespangamut, будет использовать это вместо preblockgamut

Answer 1

Догадаться! Решение очень неуклюжее и включает редактирование исходного кода, потому что я очень плохо разбираюсь в регулярных выражениях и _DoImage() Функция использует множество внутренних функций только в источнике.

решение:

Все изменения будут внесены в markdown.converter файл.

сделать ctrl+f для _DoImage функция, вы найдете, что она названа в двух местах, один в RunSpanGamut и один, определяющий функцию. Решение простое, скопируйте поверх DoImage функции и связанные вещи к новому, чтобы имитировать оригинальную функцию и редактировать ее по вкусу.

рядом с DoImage функция добавить:

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

если вы посмотрите на разницу между новым _DoPotatoImages() функция и оригинал _DoImages(), вы заметите, что я отредактировал регулярное выражение, чтобы иметь экранированный знак вопроса \? вместо нормального восклицательного знака !

Также обратите внимание, как writePotatoImageTag звонки g_urls а также g_titles которые являются некоторыми из внутренних функций, которые вызываются.

После этого добавьте свой text = _DoPotatoImages(text); в runSpanGamut (убедитесь, что вы добавили его до text = _DoAnchors(text); ЛИНИЯ, ПОТОМУ ЧТО ЭТА ФУНКЦИЯ ПЕРЕИГРЫВАЕТ ПОВТОРЫ ИЗОБРАЖЕНИЯ) ?[image desc](url) вместе с ![image desc](url)

сделанный.

Answer 2

Спасибо за редактирование к основному посту.

Теперь я понимаю, что вы имеете в виду.

Немного странно, как он использует пустые группы захвата для указания тегов, но если он работает, он работает.

Похоже, вам нужно будет добавить на () на строку регулярного выражения, затем укажите m8 в качестве новой дополнительной переменной для передачи в функцию, а затем укажите ее как class = m8; как и другие переменные в верхней части функции.

Тогда где это говорит var result =, вместо class =\"p\" ты бы просто положил class + title=\"" + .......

Answer 3

Полная строка (не только регулярное выражение) в Markdown.Converter.js выглядит так:

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

так что проверьте function writeImageTag, Там вы можете увидеть, как текст, соответствующий регулярному выражению, заменяется на полный img тег.

Вы можете изменить почти последнюю строку перед ее возвратом из

 result += " />";

в

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