A Demo Jupyter Notebook

This post demonstrates Jupyter notebook rendering in as-folio. The JupyterNotebook component accepts an array of notebook cells and renders them with familiar In [N]:/Out [N]: prompts, syntax-highlighted code, and formatted output — all without a Python runtime.

Example: Python version info

The simplest notebook cell — imported directly from the al-folio demo notebook.

                import sys
sys.version_info
              

                        sys.version_info(major=3, minor=6, micro=2, releaselevel='final', serial=0)
                      

                # List comprehension — squares of even numbers up to 20
squares = [x**2 for x in range(1, 11) if x % 2 == 0]
print("Even squares:", squares)
              

                        Even squares: [4, 16, 36, 64, 100]

                      

                def fibonacci(n):
    """Return the first n Fibonacci numbers."""
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

fibonacci(10)
              

                        [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
                      

                # Simple statistics without numpy
data = [2, 4, 4, 4, 5, 5, 7, 9]
mean = sum(data) / len(data)
variance = sum((x - mean)**2 for x in data) / len(data)
std_dev = variance ** 0.5

print(f"Mean:     {mean:.2f}")
print(f"Variance: {variance:.2f}")
print(f"Std dev:  {std_dev:.2f}")
              

                        Mean:     5.00
Variance: 4.00
Std dev:  2.00

                      

How it works

The JupyterNotebook component is a pure Astro component — no Python, no server, no runtime notebook kernel. Cells are passed as plain JavaScript objects matching the Jupyter nbformat 4 schema.

To embed your own notebook:

1. Export your .ipynb file as JSON (it already is JSON — just rename or read it).
2. Copy the cells array into your MDX post.
3. Pass it to <JupyterNotebook cells={...} language="python" />.

---
import JupyterNotebook from '../../components/JupyterNotebook.astro';
const cells = [
  /* your notebook cells */
];
---

<JupyterNotebook cells={cells} language="python" />

The component supports: