Skip to content

Add icons to external links

This content is not available in your language yet.

Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site.

Prerequisites

Section titled Prerequisites
  • An Astro project using Markdown for content pages.

Recipe

Section titled Recipe

  1. Install the rehype-external-links plugin.

    Terminal window
    npm install rehype-external-links

  2. Import the plugin into your astro.config.mjs file.

    Pass rehypeExternalLinks to the rehypePlugins array, along with an options object that includes a content property. Set this property’s type to text if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property type to raw.

    // ...
    import rehypeExternalLinks from 'rehype-external-links';
    

    export default defineConfig({
      // ...
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: 'text', value: ' 🔗' }
            }
          ],
        ]
      },
    });

Resources

Section titled Resources