First I created the website using npx create-next-app (with all default options)
then installed marked by running npm install marked in the project directory
then added a README.md file inside public folder
(I tried keeping the readme file in other locations but it didn't worked even after writing the correct path)
The code for rendering the md file:
"use client"
import React, { useState, useEffect } from "react";
import { marked } from 'marked';
import '@/app/Bookmarks/styles.css'
const Bookmarks = () => {
const [readmeContent, setReadmeContent] = useState("");
useEffect(() => {
const fetchReadme = async () => {
try {
const response = await fetch("/README.md");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const textContent = await response.text();
const parsedContent = marked(textContent);
setReadmeContent(parsedContent);
} catch (error) {
console.error("Error fetching README.md:", error);
}
};
fetchReadme();
}, []);
return (
<>
<div className="mx-auto py-16">
<p className="text-start text-5xl px-11">Read / Watch Laters</p>
</div>
<div className="px-11 mb-10">
<hr className="px-10 w-3/3 mb-10 "></hr>
{/* Render the parsed Markdown content with styling */}
<div
dangerouslySetInnerHTML={{ __html: readmeContent }}
className="markdown"></div>
</div>
</>
);
};
export default Bookmarks;
since I created a separate CSS file for this page, I linked it by writing import '@/app/Bookmarks/styles.css'
but if you are writing the CSS in globals.css file, which is inside app folder, then the path will be import '@/app/globals.css'
CSS for styling the links, headings, text etc.:
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: black;
color: white;
}
.markdown {
@apply space-y-4; /* Add vertical space between elements */
}
/* headings */
.markdown h1 {
@apply text-5xl font-bold;
}
.markdown h2 {
@apply text-3xl font-semibold;
}
.markdown h3 {
@apply text-2xl font-semibold;
}
.markdown h4 {
@apply text-xl font-semibold;
}
/* links */
.markdown a {
@apply text-blue-500;
}
/* paragraphs */
.markdown p {
@apply leading-relaxed;
}
/* blockquotes */
.markdown blockquote {
@apply bg-gray-100 border-l-4 border-blue-500 px-4 py-3 my-4;
}
/* code blocks */
.markdown pre {
@apply bg-gray-800 text-gray-200 p-6 rounded-md;
}
/* horizontal rules */
.markdown hr {
@apply border-t-2 border-gray-300 my-8;
}
/* tables */
.markdown table {
@apply table-auto border-collapse border border-gray-300;
}
/* table headers */
.markdown th {
@apply p-4 border border-gray-300 bg-gray-200 font-semibold;
}
there are better ways to do styling of markdown content using tailwind but I'm going with this method for now.
do let me know in the comments if there are simpler and efficient methods for it.
Top comments (0)