Markdown Output
Component for rendering Markdown content in notebook outputs
Hello from Markdown
This is bold and this is italic.
Features
- GitHub Flavored Markdown
- Syntax highlighting with copy button
- Math support:
def greet(name): return f"Hello, {name}!"
Component for rendering Markdown content in notebook outputs. Based on the intheloop MarkdownRenderer.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/markdown-output.jsonInstall dependencies:
npm install react-markdown remark-gfm remark-math rehype-katex rehype-raw react-syntax-highlighter katexCopy the component to your project from the registry source.
Usage
import { MarkdownOutput } from "@/registry/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 <MarkdownOutput 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 |
unsafe | boolean | false | Allow raw HTML (requires iframe) |
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 $$...$$:
The quadratic formula:
Block equation:
Syntax Highlighting
Code blocks are syntax highlighted with a copy button:
import numpy as np import matplotlib.pyplot as plt x = np.linspace(0, 2*np.pi, 100) plt.plot(x, np.sin(x)) plt.show()
Tables
| Name | Type | Description |
|---|---|---|
| content | string | Markdown to render |
| unsafe | boolean | Allow raw HTML |
Raw HTML (unsafe mode)
Raw HTML in markdown can contain scripts. Set unsafe={true} only when rendering inside a sandboxed iframe.
By default, raw HTML in markdown is stripped. To allow it:
// Inside a sandboxed iframe only
<MarkdownOutput
content={markdownWithHtml}
unsafe={true}
/>The component will throw an error if unsafe={true} is used outside an iframe.
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 <MarkdownOutput content={data["text/markdown"]} />
}
return null;
}