I am using Docusaurus and would like to open external links in new tabs.
I would prefer to use code for this rather than the solution of writing html code in my markdown document as per this answer.
I have tried this answer:
[link](url){:target="_blank"}
As well as this answer:
[Google](" target="_blank)
I think this post would probably do what I want, I tried adding the code to _index.js, but Docusaurus stopped building.
(function() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
links[i].target = '_blank';
}
}
})();
I uploaded the JavaScript code to GitHub and added it to siteConfig.js:
// Add custom scripts here that would be placed in <script> tags.
scripts: [
".js",
".github.io/open-link-new-tab.js"
],
The script seems to load, but doesn't work as expected.
I expect a link written in Markdown to open in a new browser tab:
[the rmarkdown website]()
Any ideas would be great - thanks
I am using Docusaurus and would like to open external links in new tabs.
I would prefer to use code for this rather than the solution of writing html code in my markdown document as per this answer.
I have tried this answer:
[link](url){:target="_blank"}
As well as this answer:
[Google](https://google." target="_blank)
I think this post would probably do what I want, I tried adding the code to _index.js, but Docusaurus stopped building.
(function() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
links[i].target = '_blank';
}
}
})();
I uploaded the JavaScript code to GitHub and added it to siteConfig.js:
// Add custom scripts here that would be placed in <script> tags.
scripts: [
"https://buttons.github.io/buttons.js",
"https://msdcanderson.github.io/docusaurus-open-link-new-tab.github.io/open-link-new-tab.js"
],
The script seems to load, but doesn't work as expected.
I expect a link written in Markdown to open in a new browser tab:
[the rmarkdown website](https://rmarkdown.rstudio.)
Any ideas would be great - thanks
Share Improve this question edited May 1, 2019 at 17:57 Yangshun Tay 53.3k33 gold badges123 silver badges150 bronze badges asked May 1, 2019 at 12:01 RedBeardRedBeard 1552 silver badges17 bronze badges 1- related issue: github./facebook/docusaurus/issues/3309 – Sebastien Lorber Commented Aug 20, 2020 at 18:09
1 Answer
Reset to default 7NOTE: This answer is for Docusaurus v1
Docusaurus maintainer here!
You're right that Docusaurus doesn't support this out of the box. The probable reason that your script above doesn't work is because Docusaurus injects the <script> tags are above the <body> and when the script runs, the <body> hasn't loaded and there are no <a> tags to operate on. Try wrapping your code in document.addEventListener('DOMContentLoaded', ...) like this:
document.addEventListener('DOMContentLoaded', function() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
links[i].target = '_blank';
}
}
});
However, I remend that you don't use that script and instead achieve the effect in a few other ways:
1. Remarkable Plugins
Customize this using Remarkable plugins. Remarkable is the Markdown engine that converts the Markdown to HTML.
This remarkable-extlink plugin seems to be what you need. Try adding it into your siteConfig! Refer to the siteConfig documentation here.
// siteConfig.js
const extlink = require('remarkable-extlink');
const siteConfig = {
...
markdownPlugins: [
function(md) {
extlink(md, {
host: 'yourhost.', // The hrefs that you DON'T want to be external
});
},
],
...
}
2. Remarkable Options
Remarkable supports making all links external by customizing the linkTarget option and Docusaurus exposes that in siteConfig (but isn't documented) and isn't working at the moment. I've submitted a PR to fix this, so look out for it in the next release. However, I wouldn't remend this approach since it makes All your links open in new tab, not just the external ones.
3. Use HTML in your Markdown
Personally I would just use this option as it's the fastest. Also there's nothing wrong/bad about doing this and I love that I can fallback on HTML.
4. Write your own Remarkable Plugin
Write your own plugin that understands such a [link](url){:target="_blank"} syntax and generates the HTML that you want. This could be the best option if you don't want to use HTML but it requires the most effort.