Basic Functionality Demo

This page demonstrates the basic functionality of rehype-smart-links. You can see how different types of links are processed and styled.

Internal Links

Internal links are automatically recognized and styled accordingly. For example:

Home - Link to the website homepage
About Page - Link to the about page
Non-existent Page - Link to a page that doesn’t exist (will be marked as a broken link)

Broken Links

The plugin automatically detects and marks links to non-existent pages:

Broken Link Example - This page doesn’t exist
Another Broken Link - This page doesn’t exist either

External Links

External links automatically get appropriate attributes, including target="_blank" and rel="noopener noreferrer":

GitHub↗ - Link to GitHub
MDN Web Docs↗ - Link to MDN
Astro Docs↗ - Link to Astro documentation

Configuration Example

To enable these features, simply add the following code to your configuration file:

// Astro configuration example (astro.config.mjs)
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';

export default defineConfig({
  markdown: {
    rehypePlugins: [[rehypeSmartLinks, {
      // Basic configuration options
      internalLinkClass: 'internal-link',
      brokenLinkClass: 'broken-link',
      externalLinkClass: 'external-link'
    }]]
  }
});

Next Steps

Explore more examples: