How to add an icon to the TOC to indicate that it is an external link?

[eyllanesc]

In many sphinx themes an icon is placed to indicate that it is an external link to the documentation:

How can I do something similar in mkdocs?

[Stanzilla]

Hey! I use something like this in a custom javascript file:

function addListenerMulti(element, eventNames, listener) {
  const events = eventNames.split(" ")
  for (let i = 0, iLen = events.length; i < iLen; i++) {
    element.addEventListener(events[i], listener, false)
  }
}

addListenerMulti(document, "DOMContentLoaded DOMContentSwitch", (event) => {
  // Add an icon to all external links
  const links = document.querySelectorAll(".md-content a")
  for (let i = 0, length = links.length; i < length; i++) {
    if (
      links[i].hostname !== window.location.hostname &&
      links[i].hostname !== "" &&
      links[i].classList.contains("md-icon") !== true &&
      links[i].classList.contains("download-button") !== true
    ) {
      links[i].target = "_blank"
      links[i].classList.add("external")
      links[i].rel = "noopener"
    }
  }
})

[ssbarnea]

Using a custom JS file to implement such a feature looks like overkill to me, especially as I do remember that I implemented something like this in the past using pure CSS.

[northword]

@Stanzilla 's work is excellent, many thanks! Here is an example i based on him, it looks pretty good!

It is worth noting that when using this js, you have to disable the navigation.instant to ensure that the icon can be added in the newly entered page without refreshing. I am not sure if there is any callback function or solusion to solve this.

Results display

[z-aki]

created a plugin for this https://github.com/z-aki/mkdocs-plugin-open-external-links-in-new-tab