55:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 56:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 57:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 5a:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollArea"] 5b:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollBar"] 4e:["$","span",null,{"className":"text-xs font-medium","children":"react-syntax-highlighter"}] 4f:["$","li","@types/react-syntax-highlighter",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Freact-syntax-highlighter","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@types/react-syntax-highlighter"}]]}]}] 50:["$","li","katex",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/katex","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"katex"}]]}]}] 51:["$","$L55",null,{"registryDependencies":[]}] 52:["$","$L56",null,{"sourceUrl":"https://nteract-elements.vercel.app/r/markdown-output.json","proxyUrl":"https://shadcnregistry.com/r/nteract/markdown-output","itemId":"@nteract/markdown-output"}] 58:T2873,"use client"; import { Check, Copy } from "lucide-react"; import { useState } from "react"; import ReactMarkdown from "react-markdown"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { oneDark, oneLight, } from "react-syntax-highlighter/dist/esm/styles/prism"; import rehypeKatex from "rehype-katex"; import rehypeRaw from "rehype-raw"; import remarkGfm from "remark-gfm"; import remarkMath from "remark-math"; import { useDarkMode } from "@/lib/dark-mode"; import { cn } from "@/lib/utils"; import "katex/dist/katex.min.css"; interface MarkdownOutputProps { /** * The markdown content to render */ content: string; /** * Additional CSS classes */ className?: string; /** * Enable copy button on code blocks */ enableCopyCode?: boolean; } /** * Check if the current window is inside an iframe */ function isInIframe(): boolean { try { return window.self !== window.top; } catch { return true; } } interface CodeBlockProps { children: string; language?: string; enableCopy?: boolean; isDark?: boolean; } function CodeBlock({ children, language = "", enableCopy = true, isDark = false, }: CodeBlockProps) { const [copied, setCopied] = useState(false); const handleCopy = async () => { try { await navigator.clipboard.writeText(children); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error("Failed to copy code:", err); } }; return (

{children} {enableCopy && ( )}

); } /** * MarkdownOutput component for rendering Markdown content in notebook outputs. * * Supports: * - GitHub Flavored Markdown (tables, strikethrough, task lists, autolinks) * - Math/LaTeX via KaTeX * - Syntax highlighted code blocks with copy button * - Raw HTML in markdown * * SECURITY: This component MUST be rendered inside a sandboxed iframe. * Use OutputArea (with isolated="auto") or IsolatedFrame directly. * Throws an error if rendered in the main DOM. */ export function MarkdownOutput({ content, className = "", enableCopyCode = true, }: MarkdownOutputProps) { const isDark = useDarkMode(); if (!content) { return null; } // Require iframe for security - markdown can contain raw HTML if (typeof window !== "undefined" && !isInIframe()) { throw new Error( "MarkdownOutput must be rendered inside an iframe. " + "Use OutputArea or IsolatedFrame for markdown content.", ); } const remarkPlugins = [remarkGfm, remarkMath]; const rehypePlugins = [rehypeKatex, rehypeRaw]; return (

{codeContent} ); } // Inline code return (


                {children}

); }, // Links open in new tab a({ href, children, ...props }) { return ( {children} ); }, // Tables table({ children, ...props }) { return (

{children}

); }, thead({ children, ...props }) { return ( {children} ); }, tbody({ children, ...props }) { return ( {children} ); }, tr({ children, ...props }) { return ( {children} ); }, th({ children, ...props }) { return ( {children} ); }, td({ children, ...props }) { return ( {children} ); }, // Headings h1({ children, ...props }) { return (

{children}

); }, h2({ children, ...props }) { return (

{children}

); }, h3({ children, ...props }) { return (

{children}

); }, h4({ children, ...props }) { return (

{children}

); }, h5({ children, ...props }) { return (

{children}

); }, h6({ children, ...props }) { return (

{children}

); }, // Paragraphs p({ children, ...props }) { return (

{children}

); }, // Lists ul({ children, ...props }) { return (

{children} ); }, ol({ children, ...props }) { return (

{children} ); }, li({ children, ...props }) { return (

{children}

); }, // Blockquotes blockquote({ children, ...props }) { return (

{children}

); }, // Horizontal rule hr({ ...props }) { return (

); }, // Images img({ src, alt, ...props }) { if (!src) return null; return ( {alt

); }, }} > {content}

); } 59:Tcf8,/** * Dark mode detection utilities for components. * Checks document state and system preference to determine current mode. */ import { useEffect, useState } from "react"; /** * Check if the current environment prefers dark mode via system preference */ export function prefersDarkMode(): boolean { if (typeof window === "undefined") { return false; } return window.matchMedia("(prefers-color-scheme: dark)").matches; } /** * Check if the document has dark mode enabled * Checks multiple common patterns: * - class="dark" or class="... dark ..." on * - color-scheme: dark on * - data-theme="dark" attribute * - data-mode="dark" attribute */ export function documentHasDarkMode(): boolean { if (typeof document === "undefined") { return false; } const html = document.documentElement; // Check for 'dark' in classList (Tailwind / fumadocs pattern) if (html.classList.contains("dark")) { return true; } // Check color-scheme style const colorScheme = html.style.colorScheme || getComputedStyle(html).colorScheme; if (colorScheme === "dark") { return true; } // Check data-theme attribute (another common pattern) if (html.getAttribute("data-theme") === "dark") { return true; } // Check data-mode attribute if (html.getAttribute("data-mode") === "dark") { return true; } return false; } /** * Detect dark mode from either document state or system preference. * Prioritizes document state (site-level toggle) over system preference. */ export function isDarkMode(): boolean { // Check document state first (site-level dark mode toggle) if (documentHasDarkMode()) { return true; } // Check if document explicitly has light mode set if (typeof document !== "undefined") { const html = document.documentElement; // If 'light' class is present, respect it if (html.classList.contains("light")) { return false; } // If color-scheme is explicitly light, respect it const colorScheme = html.style.colorScheme || getComputedStyle(html).colorScheme; if (colorScheme === "light") { return false; } } // Fall back to system preference return prefersDarkMode(); } /** * React hook to detect dark mode from document state or system preference. * Watches for theme changes via MutationObserver and media query. * * @example * ```tsx * function MyComponent() { * const isDark = useDarkMode(); * return

...

; * } * ``` */ export function useDarkMode(): boolean { const [isDark, setIsDark] = useState(() => typeof window !== "undefined" ? isDarkMode() : false, ); useEffect(() => { setIsDark(isDarkMode()); const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); const handleChange = () => setIsDark(isDarkMode()); mediaQuery.addEventListener("change", handleChange); const observer = new MutationObserver(() => setIsDark(isDarkMode())); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme", "data-mode"], }); return () => { mediaQuery.removeEventListener("change", handleChange); observer.disconnect(); }; }, []); return isDark; } 53:["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L57",null,{"files":[{"path":"registry/outputs/markdown-output.tsx","content":"$58","type":"registry:component","target":"components/outputs/markdown-output.tsx"},{"path":"lib/dark-mode.ts","content":"$59","type":"registry:lib","target":"lib/dark-mode.ts"}]}]]}] 54:["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L5a",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5b",null,{"orientation":"vertical"}],["$","$L5b",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L5a",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5b",null,{"orientation":"vertical"}],["$","$L5b",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L5a",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5b",null,{"orientation":"vertical"}],["$","$L5b",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","p",null,{"className":"text-sm text-foreground/70 py-2 px-2","children":"No CSS found."}]}]]}]]}]}]]}]

Markdown Output

Installation

Files

components

lib

Styles