Open links in a new window

[viharm]

Firstly, I love marked. As an amateur/hobbyist developer, I can't believe how easy it is to use with minimal configuration. It is also well-documented. Thanks so much.

My question relates to linkification as part of an 11ty project. I simply love how it automatically linkifies URLs. However is it possible configure it to open links in new windows? (target="_blank")?

I am aware that marked's extensibility means this can be done by adding some code. I also believe that LinkifyIt could possibly used. But I'm trying to find an efficient way without adding too many dependencies.

I tried to search for similar solutions, but couldn't find anything similar. Surely someone must have had this same question?

(PS: I'm aware that 11ty uses mardown-it for parsing Markdown, but the latter does not offer in-line parsing (meaning custom filters to remove the <p>...</p> tags. And then the complexity of customizing linkified HTML... uggh. Hence I much prefer marked)

[UziTech]

Thanks for loving marked! 💖

You can override the link renderer to add whatever attributes you want.

const renderer = {
  link(href, title, text) {
    const link = marked.Renderer.prototype.link.call(this, href, title, text);
    return link.replace("<a","<a target='_blank' rel='noreferrer' ");
  }
};

marked.use({
    renderer
});

[romatou]

Could you also provide renderer for replacing links with React Router Link like this: <Link to="link">title</Link>?

[UziTech]

@romatou you can try marked-react

[romatou]

It is a good alternative, but it doesn't solve my problem: on link click with openLinksInNewTab={false} redirect happens and the state is reloaded. If I go back all data must be fetched again. React Router Link secures that.

[UziTech]

Marked renderer returns a string for html. You will have to create an issue on marked-react if you want it to create a react component.

[romatou]

Ok, thanks

[viharm]

Thanks so much for your prompt response (and apologies for the delay in mine :-P ).

I've resorted to a little bit of a compromise - since I use marked within 11th as a "filter", I've used the replace method directly to marked's output within the 11ty filter.

However I feel that applying this directly to marked's rendered will have significant advantages. However I will try that later. Thanks again.