+
+
+
+ {job.tenure}
+{job.title}
++ {job.summary} +
+{job.tenure}
-{job.title}
-- {job.summary} -
-)
+ const codeBlocks = containerRef.current.querySelectorAll("pre.shiki");
+
+ (codeBlocks as NodeListOf).forEach((block) => {
+ // Skip if already has a copy button
+ if (block.querySelector(".copy-code-btn")) return;
+
+ const button = document.createElement("button");
+ button.className = "copy-code-btn";
+ button.textContent = "Copy";
+ button.style.position = "absolute";
+ button.style.right = "8px";
+ button.style.top = "8px";
+ button.style.zIndex = "10";
+ button.style.background = "#333";
+ button.style.color = "#fff";
+ button.style.border = "none";
+ button.style.borderRadius = "4px";
+ button.style.padding = "4px 8px";
+ button.style.cursor = "pointer";
+ button.style.fontSize = "12px";
+
+ const codeElement = block.querySelector("code");
+ let language = codeElement?.getAttribute("data-language") || "text";
+
+ const fileType = document.createElement("div");
+ fileType.className = "filetype-code-btn";
+ fileType.textContent = language;
+ fileType.style.position = "absolute";
+ fileType.style.left = "8px";
+ fileType.style.top = "8px";
+ fileType.style.zIndex = "10";
+ fileType.style.background = "#333";
+ fileType.style.color = "#fff";
+ fileType.style.border = "none";
+ fileType.style.borderRadius = "4px";
+ fileType.style.padding = "4px 8px";
+ fileType.style.fontSize = "12px";
+
+ button.addEventListener("click", () => {
+ const code = block.querySelector("code")?.textContent || "";
+ navigator.clipboard.writeText(code).then(() => {
+ button.textContent = "Copied!";
+ setTimeout(() => {
+ button.textContent = "Copy";
+ }, 2000);
+ });
+ });
+
+ // Make the block relative so the absolute button works
+ block.style.position = "relative";
+ block.appendChild(button);
+ block.appendChild(fileType);
+ });
+ }, [html]);
+
+ return (
+ <>
+
+
+ );
+};
+
+export default MarkdownRenderer;
diff --git a/frontend/src/hooks/useMarkdownRenderer.ts b/frontend/src/hooks/useMarkdownRenderer.ts
new file mode 100644
index 0000000..73bee23
--- /dev/null
+++ b/frontend/src/hooks/useMarkdownRenderer.ts
@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Marked } from "marked";
+import markedShiki from "marked-shiki";
+import { createHighlighter, bundledLanguages } from "shiki";
+import DOMPurify from "dompurify";
+
+const darkTheme = "monokai";
+const lightTheme = "rose-pine-dawn";
+
+// You may want to parameterize theme/langs for your use case
+const highlighterPromise = createHighlighter({
+ // TODO: can be used to import highlighting for all languages, but it slows things down considerably
+ langs: [
+ "ts",
+ "tsx",
+ "md",
+ "python",
+ "js",
+ "jsx",
+ "bash",
+ "json",
+ "rust",
+ "go",
+ "cpp",
+ "sql",
+ "ruby",
+ "nix",
+ "html",
+ "css",
+ "markdown",
+ "docker",
+ "tf",
+ ],
+ themes: [lightTheme, darkTheme],
+});
+
+export function useMarkdownRenderer(
+ markdown: string,
+ theme: string | undefined,
+): string {
+ const [html, setHtml] = useState("");
+
+ useEffect(() => {
+ let isMounted = true;
+ async function renderMarkdown() {
+ const highlighter = await highlighterPromise;
+ const marked = new Marked().use(
+ markedShiki({
+ highlight(code, lang, props) {
+ return highlighter.codeToHtml(code, {
+ lang,
+ theme: theme === "dark" ? darkTheme : lightTheme,
+ meta: { __raw: props.join(" ") },
+ transformers: [
+ {
+ code(node) {
+ node.properties["data-language"] = lang;
+ },
+ },
+ ],
+ });
+ },
+ }),
+ );
+ const rawHtml = await marked.parse(markdown);
+ const cleanHtml = DOMPurify.sanitize(rawHtml);
+ if (isMounted) setHtml(cleanHtml);
+ }
+ renderMarkdown();
+ return () => {
+ isMounted = false;
+ };
+ }, [markdown, theme]);
+
+ return html;
+}