Icons for external links

Arrows 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 ↗

Favicons 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: (x) => {
               const hostname = new URL(x.properties.href).hostname;
               return {
                 class: "external-icon",
                 style: `--icon: url(https://external-content.duckduckgo.com/ip3/${hostname}.ico)`,
               };
             },
           },
         ],
       ],
     },
   });

3. Add CSS

   src/styles/custom.css

   .external-icon {
     background-image: var(--icon);
     background-color: #fff;
     background-size: cover;
     color: transparent;
     padding-left: 1.2rem;
     border-radius: 0.2rem;
     margin-left: 0.2rem;
   }

Example

example.md

https://stereobooster.com

https://stereobooster.com