code-block-theme-demo

1"use client"
2 
3import { useState } from "react"
4import { PrismTheme } from "prism-react-renderer"
5 
6import { CodeBlock } from "@/components/ui/code-block"
7import { Switch } from "@/components/ui/switch"
8 
9// Custom C++ theme - Dark variant
10const cppTheme: PrismTheme = {
11  plain: {
12    color: "#e6e6fa",
13    backgroundColor: "#1a1a2e",
14  },
15  styles: [
16    {
17      types: ["comment"],
18      style: {
19        color: "#6a7b9a",
20        fontStyle: "italic",
21      },
22    },
23    {
24      types: ["keyword", "operator"],
25      style: {
26        color: "#bb86fc",
27        fontWeight: "bold",
28      },
29    },
30    {
31      types: ["string", "char"],
32      style: {
33        color: "#98d982",
34      },
35    },
36    {
37      types: ["number"],
38      style: {
39        color: "#f39c12",
40      },
41    },
42    {
43      types: ["function", "method"],
44      style: {
45        color: "#61dafb",
46      },
47    },
48    {
49      types: ["class-name", "type"],
50      style: {
51        color: "#ffd700",
52        fontWeight: "500",
53      },
54    },
55    {
56      types: ["punctuation", "symbol"],
57      style: {
58        color: "#c5c8c6",
59      },
60    },
61    {
62      types: ["preprocessor", "directive"],
63      style: {
64        color: "#ff79c6",
65      },
66    },
67    {
68      types: ["namespace", "scope"],
69      style: {
70        color: "#8be9fd",
71      },
72    },
73  ],
74}
75 
76// Light theme variant for C++
77const cppLightTheme: PrismTheme = {
78  plain: {
79    color: "#2d3748",
80    backgroundColor: "#f7fafc",
81  },
82  styles: [
83    {
84      types: ["comment"],
85      style: {
86        color: "#718096",
87        fontStyle: "italic",
88      },
89    },
90    {
91      types: ["keyword", "operator"],
92      style: {
93        color: "#805ad5",
94        fontWeight: "bold",
95      },
96    },
97    {
98      types: ["string", "char"],
99      style: {
100        color: "#38a169",
101      },
102    },
103    {
104      types: ["number"],
105      style: {
106        color: "#d69e2e",
107      },
108    },
109    {
110      types: ["function", "method"],
111      style: {
112        color: "#3182ce",
113      },
114    },
115    {
116      types: ["class-name", "type"],
117      style: {
118        color: "#b7791f",
119        fontWeight: "500",
120      },
121    },
122    {
123      types: ["punctuation", "symbol"],
124      style: {
125        color: "#4a5568",
126      },
127    },
128    {
129      types: ["preprocessor", "directive"],
130      style: {
131        color: "#e53e3e",
132      },
133    },
134    {
135      types: ["namespace", "scope"],
136      style: {
137        color: "#319795",
138      },
139    },
140  ],
141}
142 
143const goCode = `package main
144 
145import "fmt"
146 
147// … truncated