code-block-python-demo

1import type { PrismTheme } from "prism-react-renderer"
2 
3import { CodeBlock } from "@/components/ui/code-block"
4 
5const draculaLight: PrismTheme = {
6  plain: {
7    color: "#282a36",
8    backgroundColor: "#f8f8f2",
9  },
10  styles: [
11    {
12      types: ["comment", "prolog", "doctype", "cdata"],
13      style: {
14        color: "#6272a4",
15        fontStyle: "italic",
16      },
17    },
18    {
19      types: ["punctuation"],
20      style: {
21        color: "#282a36",
22      },
23    },
24    {
25      types: ["property", "tag", "constant", "symbol", "deleted"],
26      style: {
27        color: "#d6336c",
28      },
29    },
30    {
31      types: ["boolean", "number"],
32      style: {
33        color: "#7c3aed",
34      },
35    },
36    {
37      types: ["selector", "attr-name", "string", "char", "builtin", "inserted"],
38      style: {
39        color: "#0d9488",
40      },
41    },
42    {
43      types: ["operator", "entity", "url", "variable"],
44      style: {
45        color: "#282a36",
46      },
47    },
48    {
49      types: ["atrule", "attr-value", "function", "class-name"],
50      style: {
51        color: "#ca8a04",
52      },
53    },
54    {
55      types: ["keyword"],
56      style: {
57        color: "#d6336c",
58      },
59    },
60    {
61      types: ["regex", "important"],
62      style: {
63        color: "#ea580c",
64      },
65    },
66  ],
67}
68 
69const draculaDark: PrismTheme = {
70  plain: {
71    color: "#f8f8f2",
72    backgroundColor: "#282a36",
73  },
74  styles: [
75    {
76      types: ["comment", "prolog", "doctype", "cdata"],
77      style: {
78        color: "#6272a4",
79        fontStyle: "italic",
80      },
81    },
82    {
83      types: ["punctuation"],
84      style: {
85        color: "#f8f8f2",
86      },
87    },
88    {
89      types: ["property", "tag", "constant", "symbol", "deleted"],
90      style: {
91        color: "#ff79c6",
92      },
93    },
94    {
95      types: ["boolean", "number"],
96      style: {
97        color: "#bd93f9",
98      },
99    },
100    {
101      types: ["selector", "attr-name", "string", "char", "builtin", "inserted"],
102      style: {
103        color: "#50fa7b",
104      },
105    },
106    {
107      types: ["operator", "entity", "url", "variable"],
108      style: {
109        color: "#f8f8f2",
110      },
111    },
112    {
113      types: ["atrule", "attr-value", "function", "class-name"],
114      style: {
115        color: "#f1fa8c",
116      },
117    },
118    {
119      types: ["keyword"],
120      style: {
121        color: "#ff79c6",
122      },
123    },
124    {
125      types: ["regex", "important"],
126      style: {
127        color: "#ffb86c",
128      },
129    },
130  ],
131}
132// … truncated