Add remark-gfm package for GitHub Flavored Markdown support

Author: arjunkomath

apps/page/components/post.tsx

@@ -8,6 +8,7 @@ import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
 import slugify from "slugify";
 import { IPostPublicData } from "../lib/data";
 import Reactions from "./reactions";
@@ -75,6 +76,7 @@ export default function Post({
               rehypeRaw,
               // @ts-ignore
               rehypeSanitize({ tagNames: ["div", "iframe"] }),
+              remarkGfm,
             ]}
             components={{
               img: (props) => {

apps/page/package.json

@@ -35,6 +35,7 @@
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
     "remark": "^14.0.2",
+    "remark-gfm": "^4.0.0",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
     "sharp": "^0.33.2",

apps/web/components/post/post.tsx

@@ -14,6 +14,7 @@ import { useCallback, useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
 import usePageUrl from "../../utils/hooks/usePageUrl";
 import { useUserData } from "../../utils/useUser";
 import { notifyError } from "../core/toast.component";
@@ -180,6 +181,7 @@ export function Post({
                   rehypeRaw,
                   // @ts-ignore
                   rehypeSanitize({ tagNames: ["div", "iframe"] }),
+                  remarkGfm,
                 ]}
               >
                 {post.content}

apps/web/package.json

@@ -55,6 +55,7 @@
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
     "remark": "^14.0.2",
+    "remark-gfm": "^4.0.0",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
     "sharp": "^0.33.2",