code-block-interactive-demo

1"use client"
2 
3import { useEffect, useState } from "react"
4import { PrismTheme } from "prism-react-renderer"
5 
6import { CodeBlock } from "@/components/ui/code-block"
7 
8// 5 Popular Prism Themes
9const atomDarkTheme: PrismTheme = {
10  plain: {
11    color: "#c5c8c6",
12    backgroundColor: "#1d1f21",
13  },
14  styles: [
15    {
16      types: ["comment", "prolog", "doctype", "cdata"],
17      style: {
18        color: "#7C7C7C",
19      },
20    },
21    {
22      types: ["namespace"],
23      style: {
24        opacity: 0.7,
25      },
26    },
27    {
28      types: ["string", "attr-value"],
29      style: {
30        color: "#A8FF60",
31      },
32    },
33    {
34      types: ["punctuation", "operator"],
35      style: {
36        color: "#6C6C6C",
37      },
38    },
39    {
40      types: [
41        "entity",
42        "url",
43        "symbol",
44        "number",
45        "boolean",
46        "variable",
47        "constant",
48        "property",
49        "regex",
50        "inserted",
51      ],
52      style: {
53        color: "#AE81FF",
54      },
55    },
56    {
57      types: ["atrule", "keyword", "attr-name", "selector"],
58      style: {
59        color: "#FF6C6B",
60      },
61    },
62    {
63      types: ["function", "deleted", "tag"],
64      style: {
65        color: "#A8FF60",
66      },
67    },
68    {
69      types: ["function-variable"],
70      style: {
71        color: "#6196CC",
72      },
73    },
74    {
75      types: ["tag", "selector", "keyword"],
76      style: {
77        color: "#FF6C6B",
78      },
79    },
80  ],
81}
82 
83const draculaTheme: PrismTheme = {
84  plain: {
85    color: "#F8F8F2",
86    backgroundColor: "#282A36",
87  },
88  styles: [
89    {
90      types: ["comment", "prolog", "doctype", "cdata"],
91      style: {
92        color: "#6272A4",
93      },
94    },
95    {
96      types: ["namespace"],
97      style: {
98        opacity: 0.7,
99      },
100    },
101    {
102      types: ["string", "attr-value"],
103      style: {
104        color: "#F1FA8C",
105      },
106    },
107    {
108      types: ["punctuation", "operator"],
109      style: {
110        color: "#F8F8F2",
111      },
112    },
113    {
114      types: [
115        "entity",
116        "url",
117        "symbol",
118        "number",
119        "boolean",
120        "variable",
121        "constant",
122        "property",
123        "regex",
124        "inserted",
125      ],
126      style: {
127        color: "#BD93F9",
128      },
129    },
130    {
131      types: ["atrule", "keyword", "attr-name", "selector"],
132      style: {
133        color: "#FF79C6",
134      },
135    },
136    {
137      types: ["function", "deleted", "tag"],
138      style: {
139        color: "#50FA7B",
140      },
141    },
142    {
143// … truncated