rehype-smart-links

Add smart navigation and styling to your Markdown links, easily distinguishing between internal links, broken links, and external links.

View Demo

Learn More

GitHub

Key Features

Smart Link Classification

Automatically identifies and distinguishes between internal links, broken links, and external links for improved navigation experience.

Broken Link Detection

Automatically detects broken links within your site, preventing users from visiting non-existent pages and improving user experience.

Custom Styling

Apply custom styles to different types of links to enhance user experience and make your documentation more accessible and visually appealing.

Quick Installation

Install using your favorite package manager:

# Using npm
npm install rehype-smart-links

# Using yarn
yarn add rehype-smart-links

# Using pnpm
pnpm add rehype-smart-links

Using with Astro

Add the plugin to your `astro.config.mjs` file:

import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';

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

Compatible Frameworks

rehype-smart-links can be used with any framework that processes Markdown using rehype:

Next.js

Works seamlessly with Next.js applications using MDX

Gatsby

Integrates with Gatsby’s markdown processing pipeline

Docusaurus

Perfect for documentation sites built with Docusaurus

Want to learn more?

Check out the About page to learn more about how to use and configure the plugin.