Getting Started

A Starlight plugin to easily add badges to your Markdown and MDX headings that are also visible in the table of contents. Check out the demo for a preview of the plugin in action.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. Starlight Heading Badges is a Starlight plugin that you can install using your favorite package manager:

   npm

   npm i starlight-heading-badges

   pnpm

   pnpm add starlight-heading-badges

   yarn

   yarn add starlight-heading-badges

   ni

   ni starlight-heading-badges

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightHeadingBadges from 'starlight-heading-badges'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightHeadingBadges()],
         title: 'My Docs',
       }),
     ],
   })

3. Add a badge to a heading in one of your Markdown or MDX files:

   src/content/docs/example.md

   ---
   title: My docs
   ---
   
   ## Hello :badge[New]
   
   Welcome to my project!

4. Start the development server to see the plugin in action.

Check out the “Usage” guide to learn more about how to use the plugin.