Links Rendered by Marked.js Open in New Tab? (Markdown Previewer Project)

JavaScript
#1

Hi Coders!

Here’s the (optional) instruction from the Markdown Previewer Project that I’m grappling with:

When I click a link rendered by my markdown previewer, the link is opened up in a new tab (HINT: read the Marked.js docs for this one!).

The main Marked.js doc, their advanced configurations page, and their extensibility page all don’t have anything about “link,” “target,” or “tab” – search terms I used. And in Marked’s demo, when I click on a link, it opens in the same page.

Any advice for getting more out of these docs? Should I be looking out for more subtle clues?

If not, I’ll write my own function to take care of it. :stuck_out_tongue_closed_eyes:

Thanks!
-jan

2 Likes
#2

I think this might be an oversight, and should possibly have been removed from the challenge - see this issue:

Possibly @vipatron knows more about it

2 Likes
#3

Perfect! Thanks Dan. That answers it. That instruction should indeed be removed. Good to know :smile:

#4

It works in the sample site for that challenge.

#5

It seems like this optional instruction has been removed from the test, but in case someone may need this feature: it can be be done by

var renderer = new marked.Renderer();
renderer.link = function(href, title, text) {
    var link = marked.Renderer.prototype.link.call(this, href, title, text);
    return link.replace("<a","<a target='_blank' ");
};
marked.setOptions({
    renderer: renderer
});

See details in marked’s this PR

3 Likes
#6

Sorry to resurrect such an old post, but I’m working on this project right now and I have 2 questions:

1: In the example project this code is used:

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

The results seem the same; is one somehow better than the other?

2: The “new tab” feature seems to work even though I didn’t include the marked.setOptions for renderer:renderer. Is this a side-effect of using the above code?

1 Like
#7

I know this is kind of late, but I also did many google searches because of this problem, and I almost gave up because I could not seem to find the right answer until I finally came to know that if you use a base tag like this

<base target="_blank">

then you will see the link’s web page opens in a new tab.

Please be sure to place your <base> tag between the document’s <head> tags. Also, keep in mind that there must be no more than one base element per document.

I hope this will help you.

Thank you.

1 Like
#8

Thanks for referencing this github PR!

#9

Thanks so much for this solution! I was about ready to call it quits on the issue.

#10