Icons for external links

Installation

1. Install dependencies

   pnpm add rehype-external-links

2. Configure Astro

   astro.config.mjs

   import rehypeExternalLinks from "rehype-external-links";
   
   export default defineConfig({
     integrations: [
       starlight({
         customCss: ["./src/styles/custom.css"],
       }),
     ],
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             content: { type: "text", value: " ↗" }, // ⤴
             contentProperties: { "aria-hidden": true, class: "no-select" },
           },
         ],
       ],
     },
   });

3. Add CSS

   src/styles/custom.css

   .no-select {
     user-select: none;
   }

Based on: Astro recipes ↗

Example

example.md

https://example.com

https://example.com ↗

Further improvements

• Possible to impelement with pure CSS, something like a[rel=nofollow]:after {content: " ↗"}
• One more idea is to add favicon of the target instead of ↗.
  • 🤔 https://external-content.duckduckgo.com/ip3/example.com.ico