Fix/markdown table rendering (#3)

* env: install remark-gfm

* refactor: update markdown processing to include gfm

* style: add table style

Author: anonymousRecords

app/globals.css

@@ -84,3 +84,19 @@ h6 {
 .logo-image:hover {
   animation: shake 0.5s ease-in-out;
 }
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.prose th {
+  background-color: #f2f2f2;
+}

lib/mdx.ts

@@ -5,6 +5,7 @@ import path from "path";
 import matter from "gray-matter";
 import { remark } from "remark";
 import html from "remark-html";
+import gfm from "remark-gfm";
 import { getGroupOrder, GroupId } from "@/constants/group";
 
 const contentDirectory = path.join(process.cwd(), "content", "guide");
@@ -45,7 +46,7 @@ function getAllDocumentsRecursive(dir: string, lang: string): Document[] {
       const fileContents = fs.readFileSync(entryPath, "utf8");
       const { data, content } = matter(fileContents);
       const groupOrder = getGroupOrder(data.group as GroupId);
-      const processedContent = remark().use(html).processSync(content);
+      const processedContent = remark().use(gfm).use(html).processSync(content);
       const contentHtml = processedContent.toString();
 
       documents.push({

package-lock.json

@@ -21,6 +21,7 @@
     "rehype-highlight": "7.0.0",
     "rehype-raw": "7.0.0",
     "remark": "15.0.1",
+    "remark-gfm": "4.0.0",
     "remark-html": "16.0.1"
   },
   "devDependencies": {