fixed markdown error

IET-NITK · Feb 27, 2024 · bbab3e7 · bbab3e7
1 parent 1695fa3
commit bbab3e7
Show file tree

Hide file tree

Showing 6 changed files with 191 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
         "react-paginate": "^8.2.0",
         "react-query": "^3.39.3",
         "react-responsive": "^9.0.2",
+        "remark-gfm": "^4.0.0",
         "tailwind": "^4.0.0",
         "tailwind-merge": "^2.2.1",
         "tailwindcss": "^3.4.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/blog/blogDetail.jsx b/src/components/blog/blogDetail.jsx
@@ -1,9 +1,8 @@
 "use client"
 
 import { useEffect, useState } from "react";
-import Navbar from "@/components/Navbar/Navbar";
-import Footer from "@/components/footer";
 import ReactMarkdown from "react-markdown";
+import gfm from 'remark-gfm'
 import './styleblog.css'
 // Import Tailwind CSS classes
 import 'tailwindcss/tailwind.css';
@@ -76,7 +75,7 @@ const BlogId = ({ params }) => {
                   </div>
                 </div>
               </section>
-              <ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{blogData.blog_body}</ReactMarkdown>
+              <ReactMarkdown remarkPlugins={[gfm]} className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{blogData.blog_body}</ReactMarkdown>
             </div>
           ) : (
             <p>Loading...</p>

diff --git a/src/components/event/eventDetail.jsx b/src/components/event/eventDetail.jsx
@@ -1,8 +1,7 @@
 // Import necessary modules
 "use client"
 import { useEffect, useState } from "react";
-import Navbar from "@/components/Navbar/Navbar";
-import Footer from "@/components/footer";
+import gfm from 'remark-gfm'
 import ReactMarkdown from "react-markdown";
 import './styleblog.css'
 // Import Tailwind CSS classes
@@ -73,7 +72,7 @@ const EventId = ({ params }) => {
                   </div>
                 </div>
               </section>
-              <ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{eventData.event_body}</ReactMarkdown>
+              <ReactMarkdown remarkPlugins={[gfm]} className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{eventData.event_body}</ReactMarkdown>
             </div>
           ) : (
             <p>Loading...</p>

diff --git a/src/components/project/projectDetail.jsx b/src/components/project/projectDetail.jsx
@@ -1,8 +1,7 @@
 // Import necessary modules
 "use client"
 import { useEffect, useState } from "react";
-import Navbar from "@/components/Navbar/Navbar";
-import Footer from "@/components/footer";
+import gfm from 'remark-gfm'
 import ReactMarkdown from "react-markdown";
 import './styleblog.css'
 // Import Tailwind CSS classes
@@ -67,7 +66,7 @@ const ProjectId = ({ params }) => {
                   </div>
                 </div>
               </section>
-              <ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{projectData.project_body}</ReactMarkdown>
+              <ReactMarkdown remarkPlugins={[gfm]} className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{projectData.project_body}</ReactMarkdown>
             </div>
           ) : (
             <p>Loading...</p>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -43,5 +43,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require('@tailwindcss/typography')],
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,5 +43,5 @@ module.exports = { @@
           },
         },
       },
-      plugins: [require("tailwindcss-animate")],
+      plugins: [require("tailwindcss-animate"), require('@tailwindcss/typography')],
     }