Agregar iconos a los enlaces externos

Usando un plugin de rehype, puedes identificar y modificar los enlaces en tus archivos Markdown que apuntan a sitios externos. Este ejemplo agrega iconos al final de cada enlace externo, para que los visitantes sepan que están saliendo de tu sitio.

Prerrequesitos

Sección titulada Prerrequesitos

• Un proyecto de Astro que utiliza Markdown para las páginas de contenido.

Receta

Sección titulada Receta

1. Instala el plugin rehype-external-links.

   npm

   npm install rehype-external-links

   pnpm

   pnpm add rehype-external-links

   Yarn

   yarn add rehype-external-links

2. Importa el plugin en tu archivo astro.config.mjs.

   Pasa rehypeExternalLinks al array rehypePlugins, junto con un objeto de opciones que incluya una propiedad content. Si deseas agregar texto sin formato al final del enlace, establece el type de esta propiedad como text. Para agregar HTML en lugar de texto al final del enlace, establece el type de la propiedad como raw.

   // ...
   import rehypeExternalLinks from 'rehype-external-links';
   
   export default defineConfig({
     // ...
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             content: { type: 'text', value: ' 🔗' }
           }
         ],
       ]
     },
   });

Nota

El valor de la propiedad content no se representa en el árbol de accesibilidad. Por lo tanto, es mejor dejar claro que el enlace es externo en el contenido que lo rodea en lugar de depender únicamente del icono.

Recursos

Sección titulada Recursos

• rehype-external-links