Marked: What would be the preferred method to add target="_blank" to links?

[julmot]

[julmot]

@chjj

[drmuey]

lol, I missed this issue wehn searching. I have apull request in that does this: See #657

[julmot]

:+1: When will it be available @chjj?

[julmot]

Push!? @chjj @drmuey

[adam-lynch]

@julmot in the meantime, just use a custom renderer with your own link method.

[romanpitak]

Render links to external hosts with target="_blank": https://github.com/romanpitak/pfm

Just a suggestion...

[julmot]

@adam-lynch Could you please describe how?

@romanpitak A URL to a different subdomain would be also a different host but should be handled like an internal link. The same for a different top-level-domain like domain.es and domain.de.

[romanpitak]

@julmot you are right and that's why it was just a suggestion. I wrote the extension just to suite my own needs.

[hardware]

@julmot :

var marked   = require('marked');
var renderer = new marked.Renderer();

marked.setOptions({
  ...
});

renderer.link = function( href, title, text ) {
  return '<a target="_blank" href="'+ href +'" title="' + title + '">' + text + '</a>';
}

marked(message, { renderer:renderer });

[AndrewRayCode]

And for the es6-y (and lazy):

const renderer = new marked.Renderer();
renderer.link = ( href, title, text ) => `<a target="_blank" href="${ href }" title="${ title }">${ text }</a>`;

[julmot]

I just want to suggest the following: {:target="_blank"} at the end of the link in markdown (Reference)

[KingScooty]

+1 for the @julmot is suggesting!
I'm surprised {:target="_blank"} doesn't already work!

[joshbruce]

984

[csytan]

I would be careful when overriding the renderer.link() method. There's some sanitization and encoding in the original method which is useful in preventing XSS attacks.

Here's an alternative method which modifies the HTML produced from the existing method:

const renderer = new marked.Renderer();
const linkRenderer = renderer.link;
renderer.link = (href, title, text) => {
    const html = linkRenderer.call(renderer, href, title, text);
    return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ');
};
const html = marked(markdown, { renderer });

[andreasvirkus]

Same thing as @csytan's method, but with a small tweak to only modify the anchor element when we're linking to an external host :3

const renderer = new marked.Renderer();
const linkRenderer = renderer.link;
renderer.link = (href, title, text) => {
  const localLink = href.startsWith(`${location.protocol}//${location.hostname}`);
  const html = linkRenderer.call(renderer, href, title, text);
  return localLink ? html : html.replace(/^<a /, `<a target="_blank" rel="noreferrer noopener nofollow" `);
};
const html = marked(markdown, { renderer });