fix(rendering): fix invalid markdown HTML and syntax-highlighted stream output

[abhay-ramesh]

How these were found

Built the package, started the docs dev server, and inspected the actual rendered HTML at /docs/examples/notebook-demo.

Bug 1 — Markdown cells produce invalid HTML

The markdown parser converted # Heading to <h1>Heading</h1> then wrapped the entire cell output in <p>...</p>, producing:

<!-- ❌ Before — invalid HTML -->
<p><h1>Data Analysis and Visualization Demo</h1></p>
<p>This notebook demonstrates...</p>

Block-level elements (h1–h6, blockquote, pre) cannot be children of <p>. Browsers must silently error-correct this, which can break layout and styling.

Fix: Rewrote the markdown parser to split on blank lines (\n\n) and handle each block independently. Headings, blockquotes, and code blocks are emitted as standalone block elements. Only text content gets wrapped in <p>.

<!-- ✅ After — valid HTML -->
<h1>Data Analysis and Visualization Demo</h1>
<p>This notebook demonstrates...</p>

Bug 2 — Stream output (stdout/stderr) gets syntax-highlighted

OutputText called highlightCode() with auto-detection on all text, including stream output. This applied highlight.js's language guesser to plain terminal text:

<!-- ❌ Before — wrong hljs spans on plain text -->
<pre><span>
  <span class="hljs-attribute">Libraries</span> imported successfully!
  <span class="hljs-attribute">NumPy</span> version: <span class="hljs-number">1</span>.<span class="hljs-number">26</span>.<span class="hljs-number">2</span>
</span></pre>

Stream output (stdout/stderr) and text/plain execute results are terminal text, not source code. Syntax highlighting should never be applied.

Fix: OutputText now renders plain <pre><span> with no highlight.js call.

<!-- ✅ After — plain text, no spurious spans -->
<pre><span>Libraries imported successfully!
NumPy version: 1.26.2
</span></pre>

Verified in live HTML

Both fixes were confirmed by fetching and parsing the rendered HTML from http://localhost:3000/docs/examples/notebook-demo after rebuilding the package.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
notebook-mdx	Ready	Preview, Comment	Mar 27, 2026 6:16pm