[markdown] open a link with a new tab

[inkyusa]

Hi, thanks for the great work.
I am new to mkdocs and markdown and just wondering how to open a link with a new tab.
I created a github page using mkdocs-material and tried to do that with [link](url){:target="_blank"} or [link](url){:target="\_blank"} but didn't work.

Only possible workaround for me is using HTML such that

<a href="http://google.com/" target="_blank">Hello, google!</a>

but this way somehow messed up context and I prefer to have a nice concise form: using [link] within a sentence and referencing with [link]: http://google.com.

It seems I missed something or mkdocs.yaml setup issue?
Best

[squidfunk]

You probably forgot to activate the Attribute Lists extension:
https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#attribute-lists

[inkyusa]

Thanks for your prompt reply.
Yes, I missed attr_list
More concretely, I needed to add the following into mkdocs.yml

markdown_extensions:
  - attr_list

and

[my-link]{:target="_blank"} within a sentence and [my-link]: http://google.com for referencing. (Note that there are two leading spaces).

Hope this helps someone who may face this kind of greeting.
Cheers,

[squidfunk]

The built-in privacy plugin now allows to automatically add target=_blank to all external links, so they open in new tabs.

[TheNickest]

*Reserved for insiders/sponsors..

[thomas-mc-work]

Couldn't find it mentioned in the linked docs. May it be that this feature has moved somewhere else?

[thomas-mc-work]

Found it: https://squidfunk.github.io/mkdocs-material/plugins/privacy/?h=external#config.links

[kamilkrzyskow]

Yes, @thomas-mc-work
it was removed from the Setup page, but the option is still available for sponsors and is mentioned in the plugin configuration

• https://squidfunk.github.io/mkdocs-material/plugins/privacy/#config.links_attr_map

[JakubAndrysek]

I have created the plugin to do that automatically. Plugin opens all outgoing links in a new tab.
Look at the plugin: mkdocs-open-in-new-tab.

Just install the plugin using pip from PyPI:

pip install mkdocs-open-in-new-tab

And add one line of code to your mkdocs.yml

plugins:
  - search
  - open-in-new-tab

Demo: https://newtab.kubaandrysek.cz.

[yebo29]

Thank you so much for this plugin. Did exactly what I needed very easily.

[quantfreedom]

best day ever!!!! thanks!

[nkudupudi]

More power to you mate ! Thank you.

[studentwiki]

SUPER! thank you!

[squidfunk]

Albeit I understand, that you all might be thankful for the plugin, I'm kindly referring to our policy to use reactions for this kind of feedback. Please remember: everybody in this discussion will get a notification when you post a comment.

Does your comment add value to the conversation? Is it constructive and respectful to our community and us maintainers? Could you just use a reaction instead?

Thus, if your comment doesn't add any value to the conversation, please just use 🚀👍🎉❤️. Thank you for your understanding ☺️

[TheJazzDev]

@JakubAndrysek Looks like this plugin you created only works for python correct?
I'm trying to integrate it into my NextJS app.

[JakubAndrysek]

Hi, I have designed this plugin for Mkdocs usage, but it is only a piece of javascript injected into the final webpage.
There is the js code - taken from jekyllcodex.org.

Look at the documentation for more details.

[TheJazzDev]

Thanks mate

[thesuperzapper]

Here is a MkDocs "hook" that injects a "Python-Markdown Extension" which makes all external links use "target="_blank" and rel="noopener":

from typing import List
from urllib.parse import urlparse

import markdown
from mkdocs.config.defaults import MkDocsConfig


class ExternalLinksTreeProcessor(markdown.treeprocessors.Treeprocessor):
    """
    Adds target="_blank" and rel="noopener" to external links.
    """

    def __init__(self, md, ignore_domains: List[str]):
        super().__init__(md)
        # convert to set for faster lookup
        self.ignore_domains = set(ignore_domains)

    def run(self, root):
        for element in root.iter():
            if element.tag == "a":
                href = element.get("href", "")

                # parse the href and check if it's an absolute URL with http or https scheme
                parsed_url = urlparse(href)

                if parsed_url.scheme in ["http", "https"]:
                    # remove port, if present
                    domain = parsed_url.netloc.split(":")[0]

                    # skip if the domain is in the ignore list
                    if domain in self.ignore_domains:
                        continue

                    element.set("target", "_blank")
                    element.set("rel", "noopener")


class ExternalLinksExtension(markdown.Extension):
    def __init__(self, **kwargs):
        self.config = {
            "ignore_domains": [[], "List of domains to ignore"],
        }
        super(ExternalLinksExtension, self).__init__(**kwargs)

    def extendMarkdown(self, md: markdown.Markdown):
        ignore_domains = self.getConfig("ignore_domains", [])
        if not isinstance(ignore_domains, list):
            raise ValueError("'ignore_domains' config must be a list")

        md.treeprocessors.register(
            ExternalLinksTreeProcessor(md, ignore_domains), "external_links", -1000
        )


def on_config(config: MkDocsConfig, **kwargs):
    # a list of domains to ignore
    # WARNING: requires re-running `mkdocs serve` when changed
    IGNORE_DOMAINS = ["example.com"]

    # inject the markdown extension
    config.markdown_extensions.append(
        ExternalLinksExtension(ignore_domains=IGNORE_DOMAINS)
    )
    return config

You can exclude specific domains by updating the IGNORE_DOMAINS variable.

All you need to do is put this file in your MkDocs repo, and reference it under hooks your mkdocs.yml, for example:

hooks:
  - path/to/external_links_md_extension.py

[squidfunk]

Thanks for sharing! Note that this will only influence links that are part of Markdown — other links, like for example those in the footer or navigation will be left untouched. The privacy plugin's external links feature allows to catch all of them.