@selemondev/shiki-transformer-copy-button NPM

!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

Dark mode support 🌑
Highly customisable 🎨
Duration 🕑
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`	If the display is set to `hover`, the copy button will be visible when the user interacts with the code block component. If set to `ready`, the copy button will always be visible!
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.

typescript shiki shiki-transformers shiki-transformer-copy-button

hastscript

@selemondev/svelte-marquee

0.0.2

12 months ago

0.0.1

12 months ago