@selemondev/shiki-transformer-copy-button

Shiki Copy Button Transformer ✨

[!NOTE] This project draws inspiration from two amazing projects: shiki-transformer-copy-button and rehype-pretty-code. Its goal is to combine the strengths of both while introducing additional features to support more advanced use cases.

Shiki Copy Button Transformer is a Shiki based transformer that adds a copy button. It is highly customizable and supports dark mode.

Installation

npm install @selemondev/shiki-transformer-copy-button

Usage

Import the transformerCopyButton transformer as shown below:

import { transformerCopyButton } from '@selemondev/shiki-transformer-copy-button'

const installationCode = `npm install @selemondev/shiki-transformer-copy-button"`

const html = await codeToHtml(installationCode, {
  lang: 'bash',
  theme: 'vitesse-light',
  transformers: [
    transformerCopyButton({
      duration: 3000,
      display: 'ready',
      successIcon: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E`,
      copyIcon: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E`,
    })
  ]
})

Features

1. Dark mode support 🌑

2. Highly customisable 🎨

3. Duration 🕑

4. Display mode 👀

Props

name	type	default	description
duration	Number	3000	The time it takes for the copy icon to revert to its default state after the copy button is triggered.
display	ready	hover	ready
cssVariables	string	Check them out here	To customise both the copy button and icons.
copyIcon	string	data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E	The default copy svg icon.
successIcon	string	data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E	The default success svg icon that is display after the copy button is triggered.

Credits go to these amazing projects

• shiki-transformer-copy-button by Josh Nuss.

• rehype-pretty-code by rehype-pretty.