Saltearse al contenido

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.

    Terminal window
    npm install 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: ' 🔗' }
            }
          ],
        ]
      },
    });

Recursos

Sección titulada Recursos