Fix markdown rendering

app/packages/[group]/[name]/_components/pack.tsx

@@ -1,6 +1,5 @@
 import { Chip, Code, Divider, Link } from "@nextui-org/react";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 import { format } from "timeago.js";
 import { GetPackageByNameAndVersionQuery } from "~/graphql";
 
@@ -78,7 +77,7 @@ export function Pack({
             </div>
             <Divider />
             {pack.readme ? (
-                <ReactMarkdown remarkPlugins={[remarkGfm]} skipHtml>
+                <ReactMarkdown className="prose dark:prose-invert lg:prose-xl">
                     {pack.readme}
                 </ReactMarkdown>
             ) : (

package.json

@@ -25,8 +25,7 @@
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-markdown": "^8.0.7",
-    "remark-gfm": "^4.0.0",
+    "react-markdown": "^9.0.1",
     "semver": "^7.5.4",
     "timeago.js": "^4.0.2"
   },
@@ -36,6 +35,7 @@
     "@graphql-codegen/introspection": "^4.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.1.0",
     "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "20.10.2",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",

tailwind.config.ts

@@ -1,4 +1,5 @@
 import { nextui } from "@nextui-org/react";
+import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
@@ -12,7 +13,7 @@ const config: Config = {
         extend: {},
     },
     darkMode: "class",
-    plugins: [nextui()],
+    plugins: [nextui(), typography],
 };
 
 export default config;