javascript - 如何将自定义图像标签添加到 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">

查看 docs唯一的方法是使用 preblockgamut Hook 然后添加另一个“ block 级结构”。我尝试这样做并得到一个 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) + ">";
        });
    });

我对钩子(Hook)和所有东西都不是很有经验，所以我该怎么做才能修复它？谢谢。

更新:发现_DoImages 在prespangamut 之后运行, 将使用它代替 preblockgamut

Answer 1

想通了!该解决方案非常笨拙，并且涉及编辑源代码，因为我对正则表达式非常糟糕，而且 _DoImage() 函数仅在源代码中使用了很多内部函数。

解决方法:

将对 markdown.converter 文件进行所有编辑。

对_DoImage函数做一个ctrl+f，你会发现它在两个地方被命名，一个在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); 之前添加它) LINE BECAUSE THAT FUNCTION WILL OVERRIDE IMAGE TAGS) 现在你应该可以写 ?[image desc](url) 和 ![image desc](url)

完成。