starlight-copy-inline-code

A Starlight plugin that adds copy buttons to inline code elements.

Features

• Adds a copy button to inline code (`code`) elements
• Copy button appears on hover
• Visual feedback on successful copy
• Configurable labels and behavior
• Works with Astro page transitions

Installation

npm install starlight-copy-inline-code

Usage

Add the plugin to your Starlight configuration in astro.config.mjs:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightCopyInlineCode from 'starlight-copy-inline-code';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      plugins: [starlightCopyInlineCode()],
    }),
  ],
});

Configuration

You can customize the plugin behavior:

starlightCopyInlineCode({
  // Show copy button only on hover (default: true)
  showOnHover: true,

  // Tooltip text for copy button (default: 'Copy')
  copyLabel: 'Copy',

  // Tooltip text after successful copy (default: 'Copied!')
  copiedLabel: 'Copied!',

  // CSS selector for inline code elements (default: ':not(pre) > code')
  selector: ':not(pre) > code',
})

Example

In your markdown:

Use the delivery ID `d_test_formative_01` to test the API.

The inline code d_test_formative_01 will have a copy button that appears on hover.

License

MIT