Comment transformer un lien dans markdown() pour le lier à favicon en utilisant Google S2 Converter?

Question

Je voudrais que les liens markdown aient un favicon dans le lien transformé.

https://www.google.com/s2/favicons?domain=http://cnn.com - retournera le favicon de n'importe quel domaine.

Marqué (https://github.com/chjj/marked) - tournera tous les liens dans mon code à un href de

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

Alors, comment pourrais-je modifier marked.js de sorte que - http://cnn.com

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

Je vois cette ligne 452 marked.js autolink: /^<([^ >]+(@|:\/)[^ >]+)>/, Ref:https://github.com/chjj/marked/blob/master/lib/marked.js

J'utilise express.js et NodeJS

Merci Rob

Answer 1

Vous pouvez override a renderer method. Marqué fonctionne en deux étapes: (1) il analyse Markdown dans un groupe de jetons et (2) il rend ces jetons au format HTML. Comme vous ne voulez pas modifier l'analyse de Markdown (il identifie déjà correctement les liens), mais vous voulez modifier la sortie HTML, vous voulez remplacer le moteur de rendu pour les liens.

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) 

Notez que je viens de prendre la default link method et changeai légèrement pour passer text par la fonction get_favicon. La fonction get_favicon accepte une chaîne de texte et renvoie le texte de remplacement (une image dans ce cas). Il pourrait probablement être amélioré car tous les liens n'auront qu'un domaine comme contenu textuel. Si le texte contenait plus que le domaine (chemin, fragment, chaîne de requête, etc.), utilisez uniquement le domaine pour le lien favicon. Ou si le texte ne contient pas du tout de lien (puisque le même rendu est utilisé pour tous les liens, pas seulement pour les liens automatiques), le texte doit être retourné sans être modifié. Je vais laisser ces améliorations comme un exercice pour le lecteur.

Answer 2

Vous n'avez pas pour jouer avec le code source marqué.

Cette simple expression régulière devrait faire l'affaire:

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