attempt to extract markdown + add syntax highlighting

apps/ui/package.json

@@ -46,6 +46,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
     "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.0",
     "sanitize-html": "^2.13.0",
     "set-cookie-parser": "^2.6.0",
     "sonner": "^1.5.0",

apps/ui/src/app/(app)/bookmarks/[id]/page.tsx

@@ -4,11 +4,10 @@ import ActionBar from './_components/ActionBar'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getLink } from '@/lib/api/calls/getLink'
-import { cn } from '@/lib/utils'
 import { formatRelative } from 'date-fns'
 import { ArrowBigLeft } from 'lucide-react'
 import Link from 'next/link'
-import Markdown from 'react-markdown'
+import { Markdown } from '@/components/Markdown'
 
 export default async function BookmarkDetails({
   params: { id },
@@ -47,15 +46,7 @@ export default async function BookmarkDetails({
       </section>
 
       <section className="grid grid-cols-12 relative">
-        <Markdown
-          className={cn(
-            'col-span-8 prose prose-invert prose-gray max-w-none prose-p:text-foreground/80',
-            'border-r border-muted pl-4 pt-6 pr-6 pb-10',
-            'zwj-hide',
-          )}
-        >
-          {cleaned}
-        </Markdown>
+        <Markdown>{cleaned}</Markdown>
 
         <div className="col-span-4 flex flex-col gap-4 relative px-2 pt-6">
           <div className="pr-4">

apps/ui/src/components/Markdown/Markdown.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils'
+import BaseMarkdown from 'react-markdown'
+
+import rehypeHighlight from 'rehype-highlight'
+
+export function Markdown({
+  children,
+}: {
+  children: string
+  components?: Record<string, React.ComponentType>
+}) {
+  return (
+    <BaseMarkdown
+      className={cn(
+        'col-span-8 prose dark:prose-invert prose-purple max-w-none',
+        'border-r border-muted pl-4 pt-6 pr-6 pb-10',
+        'zwj-hide',
+      )}
+      // components={{ code }}
+      skipHtml={true}
+      rehypePlugins={[rehypeHighlight]}
+    >
+      {children}
+    </BaseMarkdown>
+  )
+}

apps/ui/src/components/Markdown/index.ts

@@ -0,0 +1 @@
+export * from './Markdown'

package.json

@@ -2,15 +2,15 @@
   "name": "readitlater",
   "author": "Rohan Nair <[email protected]>",
   "license": "AGPL-3.0-only",
-  "workspaces": [
-    "packages/*",
-    "apps/*"
-  ],
+  "packageManager": "[email protected]",
   "scripts": {
     "dev": "bun --filter '*' dev"
   },
   "trustedDependencies": [
     "@tensorflow/tfjs-node"
   ],
-  "packageManager": "[email protected]"
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ]
 }