Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What would be the preferred method to add target="_blank" to links? #655

Closed
julkue opened this issue Sep 3, 2015 · 18 comments
Closed

What would be the preferred method to add target="_blank" to links? #655

julkue opened this issue Sep 3, 2015 · 18 comments

Comments

@julkue
Copy link

julkue commented Sep 3, 2015

No description provided.

@julkue
Copy link
Author

julkue commented Sep 8, 2015

@chjj

@drmuey
Copy link

drmuey commented Sep 8, 2015

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

@julkue
Copy link
Author

julkue commented Sep 11, 2015

👍 When will it be available @chjj?

@julkue
Copy link
Author

julkue commented Sep 17, 2015

Push!? @chjj @drmuey

@adam-lynch
Copy link

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

@romanpitak
Copy link

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

Just a suggestion...

@julkue
Copy link
Author

julkue commented Sep 23, 2015

@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
Copy link

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

@hardware
Copy link

@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
Copy link

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>`;

@julkue
Copy link
Author

julkue commented Apr 28, 2016

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

@KingScooty
Copy link

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

@joshbruce
Copy link
Member

#984

@csytan
Copy link

csytan commented Apr 20, 2018

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
Copy link

andreasvirkus commented Oct 19, 2020

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

@curran
Copy link

curran commented Jun 24, 2021

Related #144

@adrianbienias
Copy link

Big thanks, @csytan!

@qertis
Copy link

qertis commented Jun 4, 2023

Please support the attribute

{:target="_blank"}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests