explainegy-nextjs/app/articles/[categoryName]/[articleName]/LoadMarkdown.tsx

"use client";
import React from "react";
import { useEffect } from "react";

import Prism from "prismjs";
import "../../../../styles/prism_themes/prism-one-dark.css";
//import "../../../styles/prism_themes/prism-one-light.css";

export default function LoadMarkdown() {
	useEffect(() => {
		document.querySelectorAll("pre").forEach((pre) => {
			if (pre.classList.length < 1) {
				pre.classList.add("language-");
			}
		});

		document.querySelectorAll("code").forEach((c) => {
			if (c.classList.length < 1) {
				c.classList.add("language-");
			}
		});

		document.querySelectorAll("blockquote").forEach((bq) => {
			bq.classList.add("blockquote");
		});

		document.querySelectorAll("li").forEach((li) => {
			let paragraphText = "";
			li.querySelectorAll("p").forEach((p) => {
				paragraphText = p.innerHTML;
			});

			if (paragraphText != "") {
				li.innerHTML = paragraphText;
			}
		});

		Prism.highlightAll();
	}, []);
	return <div></div>;
}