Skip to content
rehype-gfm-components

All-the-Things Demo

This page tests every GFM convention. On GitHub this renders as plain, readable Markdown. In Starlight it upgrades to rich interactive components.

Steps

Section titled “Steps”
  1. Install the package
    Terminal window
    pnpm add rehype-gfm-components
  2. Add the Starlight plugin to your config
  3. Write Markdown using GFM conventions
  4. Deploy — components render automatically

Package Managers

Section titled “Package Managers”
Terminal window
npm install rehype-gfm-components

Project Structure

Section titled “Project Structure”
  • rehype-gfm-components/
    • index.js
    • transforms/
      • steps.js
      • badge.js
      • icon.js
      • tabs.js
      • filetree.js
      • card.js
      • linkcard.js
      • linkbutton.js
    • adapters/
      • starlight.js Starlight plugin wrapper
    • scripts/
      • tabs.js client-side tab switching
    • lib/
      • parse-comment.js
      • parse-tree-text.js
      • collect-ranges.js
    • test/
      • …
    • package.json

Feature Cards

Section titled “Feature Cards”

Zero MDX Required

Write standard GFM Markdown. No imports, no components, no framework lock-in.

GitHub Compatible

Every page renders cleanly on GitHub. HTML comments are invisible, details/summary is native.

Full Starlight Integration

Tabs, cards, steps, file trees — all using Starlight’s own CSS. No extra stylesheets needed.

Standalone Card

Section titled “Standalone Card”

How It Works

HTML comments (<!-- steps -->) act as invisible markers around standard GFM constructs. A rehype plugin transforms the HTML output into Starlight-compatible rich components during the build.

Section titled “Quick Links”
API ReferenceComplete API documentation
Getting StartedSet up your first project
Section titled “Single Link Card”
Configuration ReferenceAll configuration options explained

Badges

Section titled “Badges”

This feature is New and ready for production.

The API is Stable with full backwards compatibility.

Authentication is Beta — expect changes.

Section titled “Link Button”
Get Started View on GitHub

Tooltips

Section titled “Tooltips”

GFM footnotes become inline hover tooltips. Hover or focus the underlined word to see the definition.

This plugin is built on AstroAstro is a modern web framework for content-driven sites. and integrates with StarlightStarlight is Astro’s official documentation theme. for documentation sites. It uses rehyperehype is an HTML processor powered by plugins, part of the unified ecosystem. under the hood.

Accordion Group

Section titled “Accordion Group”

Group related <details> with <!-- accordiongroup --> for a unified card with dividers.

What formats are supported?

Markdown, MDX, and plain HTML all work. The plugin operates at the rehype (HTML) level, so any input that produces valid HAST is supported.

Do I need to install extra CSS?

No. The Starlight adapter injects all necessary styles automatically. Standalone users can import rehype-gfm-components/styles/starlight.css.

Is this compatible with GitHub rendering?

Yes. Footnotes render as standard GFM footnotes on GitHub, and <details> / <summary> is natively supported in GitHub Markdown.

Standalone Accordion

Section titled “Standalone Accordion”

A single unwrapped <details> still gets basic styling.

Click to expand

This is a standalone accordion without the group wrapper.