4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 50:T1338,"use client" import { useState } from "react" import { PrismTheme } from "prism-react-renderer" import { CodeBlock } from "@/components/ui/code-block" import { Switch } from "@/components/ui/switch" // Custom C++ theme - Dark variant const cppTheme: PrismTheme = { plain: { color: "#e6e6fa", backgroundColor: "#1a1a2e", }, styles: [ { types: ["comment"], style: { color: "#6a7b9a", fontStyle: "italic", }, }, { types: ["keyword", "operator"], style: { color: "#bb86fc", fontWeight: "bold", }, }, { types: ["string", "char"], style: { color: "#98d982", }, }, { types: ["number"], style: { color: "#f39c12", }, }, { types: ["function", "method"], style: { color: "#61dafb", }, }, { types: ["class-name", "type"], style: { color: "#ffd700", fontWeight: "500", }, }, { types: ["punctuation", "symbol"], style: { color: "#c5c8c6", }, }, { types: ["preprocessor", "directive"], style: { color: "#ff79c6", }, }, { types: ["namespace", "scope"], style: { color: "#8be9fd", }, }, ], } // Light theme variant for C++ const cppLightTheme: PrismTheme = { plain: { color: "#2d3748", backgroundColor: "#f7fafc", }, styles: [ { types: ["comment"], style: { color: "#718096", fontStyle: "italic", }, }, { types: ["keyword", "operator"], style: { color: "#805ad5", fontWeight: "bold", }, }, { types: ["string", "char"], style: { color: "#38a169", }, }, { types: ["number"], style: { color: "#d69e2e", }, }, { types: ["function", "method"], style: { color: "#3182ce", }, }, { types: ["class-name", "type"], style: { color: "#b7791f", fontWeight: "500", }, }, { types: ["punctuation", "symbol"], style: { color: "#4a5568", }, }, { types: ["preprocessor", "directive"], style: { color: "#e53e3e", }, }, { types: ["namespace", "scope"], style: { color: "#319795", }, }, ], } const goCode = `package main import "fmt" func main() { fmt.Println("Hello, World!") }` export default function CodeBlockThemeDemo() { const [options, setOptions] = useState(["line-numbers"]) const showLineNumbers = options.includes("line-numbers") const showHeader = options.includes("header") const useThemeBackground = options.includes("theme-background") const useCustomStyling = options.includes("custom-styling") const customClassName = useCustomStyling ? "text-lg border-none rounded-[1rem]" : "" const toggleOption = (option: string) => { setOptions((prev) => prev.includes(option) ? prev.filter((o) => o !== option) : [...prev, option] ) } return (

toggleOption("line-numbers")} /> Line Numbers toggleOption("header")} /> Header toggleOption("theme-background")} /> Theme Background toggleOption("custom-styling")} /> Custom Styling

) } 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4d",null,{"registryDependencies":["toggle-group","@delta/code-block"]}]]}],["$","$L4e",null,{"sourceUrl":"https://deltacomponents.dev/r/code-block-theme-demo.json","proxyUrl":"https://shadcnregistry.com/r/delta/code-block-theme-demo","itemId":"@delta/code-block-theme-demo"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"examples/code-block-theme-demo.tsx","content":"$50","type":"registry:example"}]}]]}],"$L51"]}]

Code Block Theme Demo

Installation

Files

components

Styles