Wie kann man den Link in Markdown() umwandeln, um mit Favicon mit Google S2 Converter zu verknüpfen?

Question

Ich möchte, dass Markdown-Links ein Favicon innerhalb des umgewandelten Links haben.

https://www.google.com/s2/favicons?domain=http://cnn.com - gibt das Favicon aus einer beliebigen Domäne zurück.

bezeich (https://github.com/chjj/marked) - wird

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

So alle Links in meinem Code a href an der Reihe, Wie würde ich marked.js ändern, so dass - http://cnn.com

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

Ich sehe tun, um diese Linie 452 marked.js autolink: /^<([^ >]+(@|:\/)[^ >]+)>/, Ref:https://github.com/chjj/marked/blob/master/lib/marked.js

Ich verwende Express.js und NodeJS

Dank Rob

Answer 1

Sie override a renderer method können.

Markiert funktioniert in zwei Schritten: (1) es analysiert die Markdown in eine Reihe von Tokens und (2) es rendert diese Token in HTML. Da Sie das Markdown-Parsing nicht ändern möchten (es identifiziert Links bereits richtig), aber Sie möchten die HTML-Ausgabe ändern, möchten Sie den Renderer für Links überschreiben.

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) 

Bitte beachte, dass ich nahm nur die default link method und es leicht verändert text durch die get_favicon Funktion zu übergeben. Die Funktion get_favicon akzeptiert eine Textzeichenfolge und gibt den Ersatztext (in diesem Fall ein Bild) zurück. Es könnte wahrscheinlich verbessert werden, da nicht alle Links nur eine Domain als Textinhalt haben. Wenn der Text mehr als die Domäne enthält (Pfad, Fragment, Abfragezeichenfolge usw.), verwenden Sie nur die Domäne für die Favicon-Verknüpfung. Oder wenn der Text überhaupt keinen Link enthält (da derselbe Renderer für alle Links verwendet wird, nicht nur für automatische Links), sollte der Text unverändert zurückgegeben werden. Ich werde diese Verbesserungen als Übung für den Leser hinterlassen.

Answer 2

Sie haben noch sich mit dem markierten Quellcode anlegen.

sollte diese einfache regexp den Trick:

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