Markdown Output

Low-level component for rendering Markdown content in notebook outputs. Based on the intheloop MarkdownRenderer.

This component must be rendered inside a sandboxed iframe. Use OutputArea (recommended) or IsolatedFrame for markdown outputs. The component will throw an error if rendered in the main DOM.

Installation

npx shadcn@latest add @nteract/markdown-output

New to @nteract? pnpm dlx shadcn@latest registry add @nteract

Install dependencies:

npm install react-markdown remark-gfm remark-math rehype-katex rehype-raw react-syntax-highlighter katex

Copy the component to your project from the registry source.

Usage

import { MarkdownOutput } from "@/components/outputs/markdown-output"

export function Example() {
  const markdown = `# Title

Some **bold** and *italic* text.

Math: $\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$
`
  
  return <MarkdownPreview content={markdown} />
}

Props

Prop	Type	Default	Description
`content`	`string`	—	The Markdown content to render
`className`	`string`	`""`	Additional CSS classes
`enableCopyCode`	`boolean`	`true`	Show copy button on code blocks

Features

GitHub Flavored Markdown

Supports GFM extensions:

Feature	Syntax
Tables	`\| col \| col \|`
Strikethrough	`~~text~~`
Task lists	`- [x] done`
Autolinks	`https://...`

Math / LaTeX

Inline math with $...$ and block math with $$...$$:

Syntax Highlighting

Code blocks are syntax highlighted with a copy button:

Tables

Dark Mode Support

The component automatically adapts to light and dark themes. Toggle the theme using the site's theme switcher (in the header) to see how code blocks, inline code, tables, and other elements respond.

Testing Dark Mode: Use your browser's dev tools to toggle prefers-color-scheme, or use the site's theme toggle in the header.

Code Blocks

Code blocks switch between light and dark syntax highlighting themes:

Toggle theme to see code block adapt

Inline Code

Inline code like variable_name adapts its background and text colors:

Tables in Dark Mode

Raw HTML Support

The component supports raw HTML in markdown via the rehype-raw plugin. Since the component requires iframe isolation, raw HTML is always enabled and renders safely inside the sandboxed iframe.

For most use cases, use OutputArea which handles iframe isolation automatically:

import { OutputArea } from "@/components/cell/OutputArea"

// OutputArea automatically isolates markdown in an iframe
<OutputArea outputs={cell.outputs} />

Jupyter Integration

Markdown outputs come from display_data messages with text/markdown MIME type:

function renderOutput(output: JupyterOutput) {
  const data = output.data;
  
  if (data["text/markdown"]) {
    return <MarkdownPreview content={data["text/markdown"]} />
  }
  
  return null;
}

Markdown Output

On this page