CopyMarkup

v1.1.0

Displays code snippets with syntax highlighting, line numbers, and a one-click copy button.

Examples

Basic usage

install.tsx

import { CopyMarkup } from "@/components/copy-markup";

export function InstallGuide() {
  return (
    <CopyMarkup
      code="npm install framer-motion"
      language="bash"
    />
  );
}

With line numbers

fib.ts

123456
function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

Shell commands

bash

12345678
# Install dependencies
npm install framer-motion class-variance-authority clsx tailwind-merge

# Dev dependencies
npm install -D tailwindcss @tailwindcss/postcss

# Start dev server
npm run dev

Variants

modern

bash

echo "Variant: modern"

minimal

bash

echo "Variant: minimal"

solid

bash

echo "Variant: solid"

glass

bash

echo "Variant: glass"

macos

bash

echo "Variant: macos"

API

All available props for the CopyMarkup component.

Property	Type	Default	Description
code	string	required	The source code to display and copy.
language	string	"bash"	Language identifier used for syntax highlighting.
showLineNumbers	boolean	false	Shows line numbers in the left gutter.
fileName	string	—	Optional file name shown in the header bar.
variant	"modern" \| "minimal" \| "solid" \| "glass" \| "macos"	"modern"	Visual style variant for the code block wrapper.
theme	PrismTheme	vsDark	Prism theme object for syntax highlighting colors.

PreviousToggle Count Component Next PIN Input Component