Skip to content
astro-smart-linksastro-smart-links

Basic Demo

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

Section titled “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)
Section titled “Broken Links”

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

Section titled “External Links”

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

Configuration Example

Section titled “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 'astro-smart-links';


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

Next Steps

Section titled “Next Steps”

Explore more examples: