better markdown support, minor layout fixes

src/app/cv/_components/CvEntry.tsx

@@ -1,15 +1,16 @@
 import { trpc } from "~/app/_trpc/Client"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
 import { Skeleton } from "~/components/ui/skeleton"
-import type { Element } from "~/lib/utils"
+import { cn, type Element } from "~/lib/utils"
 import type { CategoryRouterOutputs } from "~/server/routers/cv/category"
 import type { EntryRouterOutputs } from "~/server/routers/cv/entry"
 import Markdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
 import { format } from 'date-fns'
-
+import rehypeHighlight from 'rehype-highlight'
+import rehypeRaw from 'rehype-raw'
 export default function CvEntry(params: {
 	initialData: EntryRouterOutputs['get'] | Element<Element<CategoryRouterOutputs['list']>['cvEntry']>
+	className?: string 
 }) {
 	const query = trpc.cv.entry.get.useQuery({ id: params.initialData?.id ? params.initialData.id : "" })
 	const { data } = query
@@ -18,7 +19,7 @@ export default function CvEntry(params: {
 			{
 				data ?
 					<>
-						<Card className="w-fit">
+						<Card className={params.className ?  cn("w-fit",params.className) : "w-fit"}>
 							{
 								data.title ?
 									<CardHeader>
@@ -28,9 +29,9 @@ export default function CvEntry(params: {
 							}
 							{
 								data.description ?
-									<CardContent>
+									<CardContent className="text-sm lg:text-base">
 										<div>
-											<Markdown rehypePlugins={[rehypeRaw]}>{data.description}</Markdown>
+											<Markdown rehypePlugins={[rehypeHighlight,rehypeRaw]}>{data.description}</Markdown>
 										</div>
 									</CardContent> :
 									<></>