Question

我希望降价链接在转换后的链接中包含一个favicon。

https://www.google.com/s2/favicons?domain=http://cnn.com - 将从任何域返回favicon。

标记（https://github.com/chjj/marked） - 将我的代码中的所有链接转换为href的

http://cnn.com 变 <a href="http://cnn.com">http://cnn.com</a>

那么，我如何修改marked.js呢 - http://cnn.com

将成为 <a href="http://cnn.com"><img src="https://www.google.com/s2/favicons?domain=http://cnn.com">http://cnn.com</a>

我确实看到这行452标记为.js autolink: /^<([^ >]+(@|:\/)[^ >]+)>/, 参考： https://github.com/chjj/marked/blob/master/lib/marked.js

我正在使用expressjs和NodeJS

由于罗布

Answer 1

您不必弄乱标记的源代码。

这个简单的正则表达式可以解决这个问题：

const markedOutput = '<a href="http://cnn.com">http://cnn.com</a>';
const withFavIcons = markedOutput.replace(/(<a[^>]+>)(https?:\/\/[^<]+)(<\/a>)/gi, (m, open, url, close) => {
    const favicon = '<img src="https://www.google.com/s2/favicons?domain=' + url + '">';
    const truncated = url.length > 50 ? url.slice(0, 47) + '...' : url;
    return open + favicon + truncated + close;
});

Answer 2

你可以override a renderer method。

标记分为两步：（1）它将Markdown解析为一堆标记;（2）它将这些标记呈现为HTML。由于您不想更改Markdown解析（它已经正确识别链接），但您确实想要更改HTML输出，因此您希望覆盖链接的渲染器。

var renderer = new marked.Renderer();

get_favicon = function (text) {
    // return replacement text here...
    var out = '<img src="https://www.google.com/s2/favicons?domain='
    out += text + '">' + text + '</a>'
    return out
}

renderer.link = function (href, title, text) {
  if (this.options.sanitize) {
    try {
      var prot = decodeURIComponent(unescape(href))
        .replace(/[^\w:]/g, '')
        .toLowerCase();
    } catch (e) {
      return '';
    }
    if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
      return '';
    }
  }
  var out = '<a href="' + href + '"';
  if (title) {
    out += ' title="' + title + '"';
  }
  out += '>' + get_favicon(text) + '</a>';
  return out;
};
}

// Pass the custom renderer to marked with the input.
markdown(input, renderer=renderer)

请注意，我刚刚使用了default link method并对其进行了轻微修改，以便通过text函数传递get_favicon。 get_favicon函数接受文本字符串并返回替换文本（在本例中为图像）。它可能会得到改进，因为并非所有链接都只有一个域作为其文本内容。如果文本包含更多的域（路径，片段，查询字符串等），那么只使用域作为favicon链接。或者，如果文本根本不包含链接（因为相同的渲染器用于所有链接，而不仅仅是自动链接），则应该不加改变地返回文本。我将这些改进作为练习留给读者。

如何使用Google S2 Converter将markdown（）中的链接转换为与favicon链接？

2 个答案: