如何将自定义图像标记添加到pagedown？ [英] How to add custom image tag to pagedown?

问题描述

我正在尝试在自定义 img 标记中复制原始 img 标记的功能，该标记将添加到pagedown converter。

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

例如我复制原始行为：

！[ image_url] [1] [1]：http：//lolink.com 给出< img src =http://lolink.com>

自定义：

？[image_url] [1 ] [1]：http：//lolink.com 给出< img class =lolsrc =http://lolink.com>

查看 docs 执行此操作的唯一方法是使用 preblockgamut 挂钩，然后添加另一个块级结构。我尝试这样做并获得未捕获错误：递归调用converter.makeHtml

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 ：发现_DoImages在 prespangamut 之后运行，将使用而不是 preblockgamut

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

推荐答案

想出来！该解决方案非常笨重，涉及编辑源代码，因为我在正则表达式上非常糟糕， _DoImage（）函数仅在源代码中使用了许多内部函数。

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.

解决方案：

所有修改都将对进行markdown.converter file。

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

为<$ c执行 ctrl + f $ c> _DoImage 函数，你会发现它在两个地方命名，一个在 RunSpanGamut 中，一个定义了这个函数。解决方案很简单，将 DoImage 函数及相关内容复制到新函数中，以模仿原始函数并编辑它。

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.

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（），你会注意到我编辑了正则表达式有一个转义问号 \\ \\？而不是正常的感叹号！

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 !

另请注意 writePotatoImageTag 调用 g_urls 和 g_titles 这是一些内部函数被叫。

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

之后，将 text = _DoPotatoImages（text）; 添加到 runSpanGamut 功能（确认你在 text = _DoAnchors（文本）之前添加; 由于功能将超过图像标记而排除）现在你应该能够写？[image desc]（url）以及！[image desc]（url）

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)

完成。

这篇关于如何将自定义图像标记添加到pagedown？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！