code-block

1import {
2  Check,
3  Copy,
4  Download,
5  FileCode,
6  Maximize2,
7  Minimize2,
8  Terminal,
9  WrapText,
10} from "lucide-react";
11import { AnimatePresence, motion } from "motion/react";
12import { Highlight, type Language, themes } from "prism-react-renderer";
13import * as React from "react";
14import { cn } from "@/lib/utils";
15 
16type CodeBlockVariant =
17  | "default"
18  | "terminal"
19  | "minimal"
20  | "gradient"
21  | "glass";
22type AnimationType = "none" | "fadeIn" | "slideIn" | "typewriter" | "highlight";
23type ThemeType =
24  | "oneDark"
25  | "dracula"
26  | "github"
27  | "nightOwl"
28  | "oceanicNext"
29  | "palenight"
30  | "shadesOfPurple"
31  | "synthwave84"
32  | "vsDark"
33  | "vsLight";
34 
35// Theme mapping
36const themeMap: Record<ThemeType, typeof themes.oneDark> = {
37  oneDark: themes.oneDark,
38  dracula: themes.dracula,
39  github: themes.github,
40  nightOwl: themes.nightOwl,
41  oceanicNext: themes.oceanicNext,
42  palenight: themes.palenight,
43  shadesOfPurple: themes.shadesOfPurple,
44  synthwave84: themes.synthwave84,
45  vsDark: themes.vsDark,
46  vsLight: themes.vsLight,
47};
48 
49// Supported languages list
50const supportedLanguages = [
51  "javascript",
52  "typescript",
53  "jsx",
54  "tsx",
55  "python",
56  "bash",
57  "shell",
58  "css",
59  "scss",
60  "html",
61  "json",
62  "yaml",
63  "markdown",
64  "sql",
65  "graphql",
66  "rust",
67  "go",
68  "java",
69  "c",
70  "cpp",
71  "csharp",
72  "php",
73  "ruby",
74  "swift",
75  "kotlin",
76  "scala",
77  "r",
78  "lua",
79  "perl",
80  "haskell",
81  "elixir",
82  "clojure",
83  "dockerfile",
84  "toml",
85  "ini",
86  "xml",
87  "diff",
88  "makefile",
89  "regex",
90] as const;
91 
92interface CodeBlockProps {
93  code: string;
94  language?: Language | string;
95  title?: string;
96  showLineNumbers?: boolean;
97  highlightLines?: number[];
98  addedLines?: number[];
99  removedLines?: number[];
100  variant?: CodeBlockVariant;
101  animation?: AnimationType;
102  animationDelay?: number;
103  className?: string;
104  copyable?: boolean;
105  downloadable?: boolean;
106  downloadFileName?: string;
107  maxHeight?: string;
108  theme?: ThemeType;
109  wrapLongLines?: boolean;
110  showLanguage?: boolean;
111  collapsible?: boolean;
112  defaultCollapsed?: boolean;
113  startingLineNumber?: number;
114  caption?: string;
115}
116 
117// Copy button component
118const CopyButton = ({
119  code,
120  className,
121}: {
122  code: string;
123  className?: string;
124}) => {
125  const [copied, setCopied] = React.useState(false);
126 
127  const handleCopy = async () => {
128    try {
129      await navigator.clipboard.writeText(code);
130      setCopied(true);
131      setTimeout(() => setCopied(false), 2000);
132    } catch (err) {
133// … truncated