diff --git a/package.json b/package.json
index b40f654..586090c 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,9 @@
"next": "14.0.4",
"react": "^18",
"react-dom": "^18",
+ "react-markdown": "^9.0.1",
"remark": "^15.0.1",
+ "remark-gfm": "^4.0.0",
"remark-html": "^16.0.1",
"tailwind-merge": "^2.2.0",
"tailwindcss-animate": "^1.0.7"
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index 896697f..4b860ba 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -1,5 +1,5 @@
+import MarkdownContent from "@/components/RenderMarkdown";
import { getAllPosts, getPostBySlug } from "@/lib/api";
-import { markdownToHtml } from "@/lib/utils";
import { formatDateString } from "@/utils";
import { Metadata } from "next";
import Link from "next/link";
@@ -53,12 +53,7 @@ export default async function Post({ params }: { params: { slug: string } }) {
{formatDateString(date)}
-
-
+
JSX.Element;
+
+// Define the renderers with basic types
+const renderers: { [nodeType: string]: RendererFunction } = {
+ a: ({ href, children }) => {
+ return href.startsWith("https://") ? (
+
+ {children}
+
+ ) : (
+ {children}
+ );
+ },
+};
+
+type MarkdownContentProps = {
+ content: string;
+};
+
+const MarkdownContent: React.FC = ({ content }) => (
+
+ {content}
+
+);
+
+export default MarkdownContent;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 28df24e..365058c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,16 +1,6 @@
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
-import { remark } from "remark";
-import html from "remark-html";
-
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
-
-export async function markdownToHtml(markdown: string) {
- const result = await remark()
- .use(html, { sanitize: false })
- .process(markdown);
- return result.toString();
-}