diff --git a/src/app/styles/custom.css b/src/app/styles/custom.css
new file mode 100644
index 0000000..1df6069
--- /dev/null
+++ b/src/app/styles/custom.css
@@ -0,0 +1,9 @@
+.markdown-body ul,
+.markdown-body ol {
+ list-style: initial; /* Ensures bullets or numbers are displayed */
+ margin-left: 1.5em; /* Adds proper indentation */
+}
+
+.markdown-body li {
+ margin-bottom: 0.5em; /* Adds spacing between list items */
+}
\ No newline at end of file
diff --git a/src/components/MarkdownRenderer.tsx b/src/components/MarkdownRenderer.tsx
new file mode 100644
index 0000000..649eaac
--- /dev/null
+++ b/src/components/MarkdownRenderer.tsx
@@ -0,0 +1,78 @@
+import { useEffect } from "react";
+import "github-markdown-css/github-markdown.css";
+
+interface MarkdownRendererProps {
+ markdownContent: string;
+}
+
+export function MarkdownRenderer({ markdownContent }: MarkdownRendererProps) {
+ useEffect(() => {
+ if (markdownContent) {
+ const markdownContainer = document.querySelector("#markdown-preview");
+ if (!markdownContainer) return;
+
+ const codeBlocks = markdownContainer.querySelectorAll("code");
+
+ codeBlocks.forEach((block) => {
+ // Check if the block is already wrapped
+ if (block.parentElement?.classList.contains("code-wrapper")) return;
+
+ // Check if the code block is multiline
+ const isMultiline = block.textContent?.includes("\n");
+ if (!isMultiline) return;
+
+ // Create a wrapper only if it doesn't already exist
+ const wrapper = document.createElement("div");
+ wrapper.className = "code-wrapper"; // Add a class to identify the wrapper
+ wrapper.style.display = "flex";
+ wrapper.style.alignItems = "flex-start";
+ wrapper.style.justifyContent = "space-between";
+ wrapper.style.gap = "8px";
+ wrapper.style.width = "100%";
+ wrapper.style.position = "relative";
+
+ const codeContainer = document.createElement("div");
+ codeContainer.style.flex = "1";
+ codeContainer.appendChild(block.cloneNode(true));
+
+ const button = document.createElement("button");
+ button.innerHTML = `
+
+ `;
+ button.className =
+ "copy-button inline-flex items-center justify-center bg-gray-200 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 transition";
+ button.style.marginLeft = "8px";
+ button.style.width = "1.5rem";
+ button.style.height = "1.5rem";
+
+ button.addEventListener("click", () => {
+ navigator.clipboard.writeText(block.textContent || "").then(() => {
+ button.innerHTML = `
+
+ `;
+ setTimeout(() => {
+ button.innerHTML = `
+
+ `;
+ }, 2000);
+ });
+ });
+
+ wrapper.appendChild(codeContainer);
+ wrapper.appendChild(button);
+
+ // Replace the original block with the wrapper
+ block.replaceWith(wrapper);
+ });
+ }
+ }, [markdownContent]);
+
+ return (
+
+ );
+}
+