added syntex hightling with rehype

Author: ariflogs

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
-  "cSpell.words": ["clsx"],
+  "cSpell.words": [
+    "clsx",
+    "rehype"
+  ],
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]

components/ComponentShowcase.tsx

@@ -21,7 +21,7 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
 
       <div>
         <H5>Code</H5>
-        <div className="relative rounded  overflow-auto">{Code}</div>
+        <div className="relative rounded overflow-auto">{Code}</div>
       </div>
     </div>
   );

components/MDX.tsx

@@ -2,8 +2,7 @@ import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
-import dynamic from "next/dynamic";
-const Code = dynamic(() => import("bright").then(mod => mod.Code));
+import { cn } from "@/lib/utils";
 
 const components = {
   h1: H1,
@@ -14,8 +13,37 @@ const components = {
   h4: H4,
   h5: H5,
   h6: H6,
-  pre: Code,
-  ComponentShowcase
+  pre: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLElement>) => (
+    <pre
+      className={cn(
+        "overflow-x-auto rounded bg-[#282A36] mt-3 mb-6 p-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </pre>
+  ),
+  code: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLElement>) => (
+    <code
+      className={cn(
+        "relative rounded bg-[#282A36] py-1 px-2 text-primary-500 text-sm",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </code>
+  ),
+  ComponentShowcase,
 };
 
 export default function MDX({ code }: { code: string }) {

content/docs/index.mdx

@@ -1,22 +1,29 @@
 ---
 title: Getting Started
 description: This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
-lastUpdated: 29 Sep, 2024
+lastUpdated: 08 Oct, 2024
 ---
 
 ### 1. Add the fonts
-We are useing `Archivo Black` for headings and `Share Tech` for everything else.
+
+<br />
+
+We are using `Archivo Black` for headings and `Share Tech` for everything else.
 
 Installation form Google Fonts:
-```
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap" rel="stylesheet">    
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap"
+  rel="stylesheet"
+/>
 ```
 
 Save the fonts in `global.css`:
 
-```
+```css
 :root {
   --font-head: "Archivo Black", sans-serif;
   --font-sans: "Share Tech", sans-serif;
@@ -27,7 +34,7 @@ Save the fonts in `global.css`:
 
 ### 2. Add the theme to your tailwind.config.js file.
 
-```
+```ts
 import type { Config } from "tailwindcss";
 
 const config = {
@@ -38,8 +45,8 @@ const config = {
         sans: ["var(--font-sans)"],
       },
       boxShadow: {
-        "xs": "1px 1px 0 0 #000",
-        "md": "3px 3px 0 0 #000",
+        xs: "1px 1px 0 0 #000",
+        md: "3px 3px 0 0 #000",
         "3xl": "10px 10px 0 0 #000",
       },
       colors: {
@@ -63,5 +70,4 @@ export default config;
 ```
 
 <br />
-    
-### 3. Now start copy-pasting the components!
+### 3. Now start copy-pasting the components!

contentlayer.config.ts

@@ -2,6 +2,8 @@ import path from "path";
 import fs from "fs";
 import { defineDocumentType, makeSource } from "contentlayer/source-files";
 import { visit } from "unist-util-visit";
+import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
 import { u } from "unist-builder";
 import { UnistNode } from "./types/unist";
 import { componentConfig } from "./config";
@@ -25,6 +27,7 @@ export const Doc = defineDocumentType(() => ({
 
 export default makeSource({
   mdx: {
+    remarkPlugins: [],
     rehypePlugins: [
       () => (tree) => {
         visit(tree, (node: UnistNode) => {
@@ -75,6 +78,13 @@ export default makeSource({
         });
         return null;
       },
+      rehypeSlug,
+      [
+        rehypePrettyCode as any,
+        {
+          theme: "dracula-soft",
+        },
+      ],
     ],
   },
   contentDirPath: "./content",

package.json

@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "bright": "^0.8.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "contentlayer": "^0.3.4",
@@ -19,6 +18,8 @@
     "next-contentlayer": "^0.3.4",
     "react": "^18",
     "react-dom": "^18",
+    "rehype-pretty-code": "^0.14.0",
+    "rehype-slug": "^6.0.0",
     "tailwind-merge": "^2.5.3",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0"