Prismjs Support with Client & MDX examples

apps/website/content-collections.ts

@@ -144,12 +144,27 @@ const sugarHighDocs = defineCollection({
   },
 });
 
+const prismjsDocs = defineCollection({
+  name: "prismjs",
+  directory: "src/docs/prismjs",
+  include: "**/*.mdx",
+  schema: docSchema,
+  transform: (document, context) =>
+    docTransform({ folder: "prismjs", document, context }),
+  onSuccess: (docs) => {
+    console.log(
+      `|- (content-collections) ✅ prismjs Collection - Successfully processed ${docs.length} documents.`,
+    );
+  },
+});
+
 export default defineConfig({
   content: [
     generalDocs,
     gstartedDocs,
     reactDocs,
     shikiDocs,
     sugarHighDocs,
+    prismjsDocs,
   ],
 });

apps/website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-blocks/website",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,28 +16,29 @@
   },
   "dependencies": {
     "@base-ui/react": "1.5.0",
-    "@react-symbols/icons": "1.3.1",
+    "@react-symbols/icons": "1.4.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "lucide-react": "1.16.0",
-    "motion": "12.39.0",
-    "next": "16.2.6",
+    "lucide-react": "1.17.0",
+    "motion": "12.40.0",
+    "next": "16.2.7",
     "next-themes": "0.4.6",
-    "react": "19.2.6",
-    "react-dom": "19.2.6",
+    "prismjs": "1.30.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "react-hotkeys-hook": "5.3.2",
-    "shadcn": "4.7.0",
+    "shadcn": "4.10.0",
     "swr": "2.4.1",
     "tailwind-merge": "3.6.0",
     "zod": "4.4.3",
-    "zustand": "5.0.13"
+    "zustand": "5.0.14"
   },
   "devDependencies": {
     "@code-blocks/eslint": "workspace:*",
     "@code-blocks/registry": "workspace:*",
     "@content-collections/cli": "0.1.9",
-    "@content-collections/core": "0.15.0",
+    "@content-collections/core": "0.15.1",
     "@content-collections/mdx": "0.2.2",
     "@content-collections/next": "0.2.11",
     "@shikijs/langs": "4.1.0",
@@ -48,7 +49,8 @@
     "@tailwindcss/typography": "0.5.19",
     "@types/mdx": "2.0.13",
     "@types/node": "24.12.4",
-    "@types/react": "19.2.14",
+    "@types/prismjs": "1.26.6",
+    "@types/react": "19.2.16",
     "@types/react-dom": "19.2.3",
     "chalk": "5.6.2",
     "eslint": "9.39.4",
@@ -58,9 +60,9 @@
     "rehype-slug": "6.0.0",
     "remark-gfm": "4.0.1",
     "shiki": "4.1.0",
-    "sugar-high": "1.2.0",
+    "sugar-high": "1.2.1",
     "tailwindcss": "4.3.0",
-    "tsx": "4.22.3",
+    "tsx": "4.22.4",
     "tw-animate-css": "1.4.0",
     "typescript": "5.9.3",
     "unist-builder": "4.0.0",

apps/website/src/app/layout.tsx

@@ -3,8 +3,11 @@ import type { ReactNode } from "react";
 
 // Styles:
 import "@/styles/globals.css";
+
+// Syntax Highlighting Styles:
 import "@/styles/shiki.css";
 import "@/styles/sugar-high.css";
+import "@/styles/prismjs.css";
 
 import Script from "next/script";
 import { cn } from "@/utils/cn";

apps/website/src/components/code-block/client/prismjs.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "@/utils/cn";
+import { highlight, type Languages } from "@/utils/prismjs/highlight";
+
+interface CodeBlockPrismjsProps extends ComponentProps<"pre"> {
+  code: string;
+  language?: Languages;
+  lineNumbers?: boolean;
+}
+
+const CodeBlockPrismjs = ({
+  code,
+  language = "typescript",
+  className,
+  lineNumbers = false,
+  ...props
+}: CodeBlockPrismjsProps) => {
+  const highlightedHtml = highlight({ code, language });
+
+  return (
+    <pre
+      className={cn(
+        "w-full overflow-x-auto font-mono",
+        "p-3",
+        lineNumbers && "prism-line-numbers",
+        className,
+      )}
+      {...props}
+    >
+      <code dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
+    </pre>
+  );
+};
+
+export { CodeBlockPrismjs };

apps/website/src/components/code-block/code-block.tsx

@@ -2,6 +2,7 @@ import type { ComponentProps } from "react";
 
 import { cn } from "@/utils/cn";
 import { FileIcon } from "@react-symbols/icons/utils";
+import { TypeScript } from "@react-symbols/icons/files";
 
 const CodeBlock = ({
   children,
@@ -59,6 +60,10 @@ const CodeBlockIcon = ({ language, className }: CodeBlockIconProps) => {
       fileName={`.${language ?? ""}`}
       autoAssign={true}
       className={cn(className)}
+      // For Prismjs, uses "typescript" as the language
+      editFileExtensionData={{
+        typescript: TypeScript,
+      }}
     />
   );
 };

apps/website/src/components/code-block/mdx/pre-prismjs.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps } from "react";
+import type { MDXComponents } from "mdx/types";
+
+import { reactToText } from "@/utils/react-to-text";
+import { highlight, type Languages } from "@/utils/prismjs/highlight";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+} from "@/components/code-block/code-block";
+import { CopyButton } from "@/components/code-block/copy-button";
+
+type PreProps = ComponentProps<"pre"> & {
+  ["data-language"]?: string;
+};
+
+const PrePrismComponent: MDXComponents = {
+  pre: ({ children, ...props }: PreProps) => {
+    const content = reactToText(children);
+    const language = props["data-language"] as Languages;
+    const codeHTML = highlight({ code: content, language });
+    return (
+      <CodeBlock className="group/code-block">
+        <CodeBlockContent className="relative">
+          <CopyButton
+            content={content}
+            className="sticky top-3 right-3 z-50 float-right rounded-md text-neutral-950 opacity-0 transition-opacity group-hover/code-block:opacity-100 hover:opacity-70 dark:text-neutral-50"
+          />
+          <pre className="prism-pre">
+            <code dangerouslySetInnerHTML={{ __html: codeHTML }} />
+          </pre>
+        </CodeBlockContent>
+      </CodeBlock>
+    );
+  },
+};
+
+export { PrePrismComponent };

apps/website/src/components/docs/doc-card.tsx

@@ -1,7 +1,12 @@
 import { getDocument } from "@/utils/docs";
 
 import { ExternalLink } from "@/components/ui/external-link";
-import { FileIcon, ChevronRightIcon, CornerDownRightIcon } from "lucide-react";
+import {
+  FileIcon,
+  ChevronRightIcon,
+  CornerDownRightIcon,
+  ArrowUpRightIcon,
+} from "lucide-react";
 
 interface DocCardProps {
   document: string;
@@ -14,21 +19,21 @@ const DocCard = ({ document, folder, anchor }: DocCardProps) => {
   return (
     <ExternalLink
       href={`/docs/${folder}/${document}${anchor ? `#${anchor}` : ""}`}
-      className="not-prose"
+      className="not-prose relative"
     >
       <div className="rounded-lg border border-neutral-200 bg-neutral-200/40 p-3 transition-colors duration-200 ease-in-out hover:border-neutral-300 hover:bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-800/30 dark:hover:border-neutral-700 hover:dark:bg-neutral-800">
         <div className="flex items-center space-x-2">
           <FileIcon size={16} />
           <div className="flex items-center space-x-1 font-medium text-black dark:text-white">
-            <span className="text-neutral-600 dark:text-neutral-400">
+            <span className="hidden text-neutral-600 md:block dark:text-neutral-400">
               {documentData?.folder}
             </span>
-            <ChevronRightIcon size={12} />
-            <span>{documentData?.title}</span>
+            <ChevronRightIcon className="hidden shrink-0 md:block" size={12} />
+            <p className="max-w-72 truncate">{documentData?.title}</p>
             {anchor && (
               <>
                 <ChevronRightIcon size={12} />
-                <span className="text-sm text-neutral-500 dark:text-neutral-400">
+                <span className="hidden text-sm text-neutral-500 md:block dark:text-neutral-400">
                   #{anchor}
                 </span>
               </>
@@ -40,6 +45,11 @@ const DocCard = ({ document, folder, anchor }: DocCardProps) => {
           <p className="truncate">{documentData?.description}</p>
         </div>
       </div>
+      <ArrowUpRightIcon
+        size={16}
+        strokeWidth={1.5}
+        className="absolute top-2 right-2 text-neutral-600 dark:text-neutral-400"
+      />
     </ExternalLink>
   );
 };

apps/website/src/components/docs/show-categories.tsx

@@ -19,6 +19,7 @@ import {
   RadixUI,
   BaseUI,
   Motion,
+  Prismjs,
 } from "@/components/ui/svgs";
 
 import { cn } from "@/utils/cn";
@@ -80,6 +81,11 @@ const categorySvgs = [
     name: "Blocks",
     icon: BoxIcon,
   },
+  {
+    name: "Prismjs",
+    icon: Prismjs,
+    url: "https://prismjs.com/",
+  },
 ];
 
 interface ShowCategoriesProps extends ComponentProps<"div"> {

apps/website/src/components/docs/showcase.tsx

@@ -16,7 +16,7 @@ const Showcase = ({
   containerClassName,
 }: ShowcaseProps) => {
   return (
-    <div className="not-prose overflow-hidden rounded-lg border border-dashed border-neutral-200 dark:border-neutral-800">
+    <div className="not-prose overflow-hidden rounded-lg border border-dashed border-neutral-300 dark:border-neutral-800">
       <div className="flex items-center space-x-2 border-b border-neutral-200 bg-neutral-200/30 p-2 text-neutral-600 dark:border-neutral-800 dark:bg-neutral-800/30 dark:text-neutral-400">
         <SquareDashedMousePointerIcon size={16} />
         <p className="text-sm tracking-tight">{title ?? "Preview"}</p>

apps/website/src/components/docs/sidebar-data.ts

@@ -14,6 +14,7 @@ import {
   TagsIcon,
   TextQuoteIcon,
   TextWrapIcon,
+  TriangleIcon,
   WholeWordIcon,
   WrenchIcon,
   type LucideIcon,
@@ -72,6 +73,10 @@ export const ReactComponentsData: SidebarGroupData = {
           title: "Sugar High",
           href: "/docs/react/code-block-mdx-sugar-high",
         },
+        {
+          title: "Prismjs",
+          href: "/docs/react/code-block-mdx-prismjs",
+        },
       ],
     },
     {
@@ -86,6 +91,10 @@ export const ReactComponentsData: SidebarGroupData = {
           title: "Sugar High",
           href: "/docs/react/code-block-client-sugar-high",
         },
+        {
+          title: "Prismjs",
+          href: "/docs/react/code-block-client-prismjs",
+        },
       ],
     },
     {
@@ -187,3 +196,19 @@ export const SugarHighData: SidebarGroupData = {
     },
   ],
 };
+
+export const PrismjsData: SidebarGroupData = {
+  groupTitle: "Prismjs",
+  items: [
+    {
+      title: "Highlighter",
+      icon: TriangleIcon,
+      href: "/docs/prismjs/highlighter",
+    },
+    {
+      title: "Line Numbers",
+      icon: ListOrderedIcon,
+      href: "/docs/prismjs/line-numbers",
+    },
+  ],
+};

apps/website/src/components/docs/sidebar-link-item.tsx

@@ -22,7 +22,7 @@ const SidebarLinkItem = ({ isActive, ...props }: SidebarLinkItemProps) => {
         "hover:bg-neutral-200/40 dark:hover:bg-neutral-800/40",
         "hover:text-neutral-950 dark:hover:text-neutral-50",
         isActive &&
-          "bg-neutral-200/60 font-medium text-neutral-950 dark:bg-neutral-800/60 dark:text-neutral-50",
+          "bg-neutral-200/70 text-neutral-950 dark:bg-neutral-800/70 dark:text-neutral-50",
       )}
     >
       {props.children}

apps/website/src/components/docs/sidebar-links.tsx

@@ -7,6 +7,7 @@ import {
   ReactComponentsData,
   ShikiData,
   SugarHighData,
+  PrismjsData,
   type SidebarGroupData,
 } from "@/components/docs/sidebar-data";
 
@@ -67,6 +68,7 @@ const SidebarLinks = () => {
       <SidebarSection data={ReactComponentsData} pathname={pathname} />
       <SidebarSection data={ShikiData} pathname={pathname} />
       <SidebarSection data={SugarHighData} pathname={pathname} />
+      <SidebarSection data={PrismjsData} pathname={pathname} />
     </nav>
   );
 };