# NOTEBOOK-009 Feature Demo
## How to See the New Markdown Cell Features
### Step 1: Refresh Your Browser
The notebook UI has been updated, but your browser is showing a **cached version**. To see the changes:
**Option A: Hard Refresh (Recommended)**
- Chrome/Firefox (Linux/Windows): `Ctrl + Shift + R` or `Ctrl + F5`
- Chrome/Firefox (Mac): `Cmd + Shift + R`
- Safari (Mac): `Cmd + Option + R`
**Option B: Clear Cache**
1. Open Developer Tools (F12)
2. Right-click the refresh button
3. Select "Empty Cache and Hard Reload"
**Option C: Force Restart Server**
```bash
# Kill any running servers
fuser -k 8080/tcp 2>/dev/null
# Restart
cargo run --bin ruchy notebook
```
Then open: http://127.0.0.1:8080
---
### Step 2: Create a Markdown Cell
Once you've refreshed, you'll see:
1. **Cell Type Selector** (top right): Dropdown with options:
- Code (default)
- Markdown ← SELECT THIS
- Raw
2. **Click "+ Cell"** button
3. You'll see a new cell with placeholder text: "Double-click to edit"
---
### Step 3: Edit Markdown
1. **Double-click** the markdown cell
2. Type markdown content:
```markdown
# Hello Ruchy Notebooks!
This is **bold** and this is *italic*.
- Item 1
- Item 2
## Code Example
Here's some `inline code`.
```
3. **Press Esc** or **click outside** to render
---
### Step 4: See Rendered Markdown
The markdown will be rendered as HTML with:
- Proper heading styles
- Bold/italic formatting
- Lists
- Code blocks
- **XSS protection** (safe HTML rendering)
---
### Step 5: Load a Sample Notebook
Try loading one of the converted MD Book chapters:
1. Click the "📂 Open" button (if we add it) OR use the API directly:
```bash
# Load a notebook
curl -X POST http://localhost:8080/api/notebook/load \
-H "Content-Type: application/json" \
-d '{"path": "notebooks/01-literals.rnb"}'
```
This will load a notebook with **21 cells** (11 markdown, 10 code)!
---
### Step 6: Verify Features Work
**Test Markdown Rendering**:
1. Create markdown cell
2. Type: `# Test\n\nThis is a **test**`
3. Save (Esc)
4. Should see: Large "Test" heading + bold "test"
**Test Code Execution**:
1. Create code cell
2. Type: `42`
3. Press Shift+Enter
4. Should see: `42`
**Test Cell Type Switching**:
1. Use dropdown to switch between Code/Markdown
2. Both types should create correctly
---
## What's New (NOTEBOOK-009)
### 1. Markdown Cell Support ✅
- Cell type selector (Code/Markdown/Raw)
- Double-click to edit markdown
- Server-side rendering with pulldown-cmark
- XSS-safe HTML output
### 2. File Persistence ✅
- Save/Load `.rnb` files
- JSON format with metadata
- Load via `/api/notebook/load`
- Save via `/api/notebook/save`
### 3. MD Book Conversion ✅
- Convert chapters: `rust-script scripts/md_to_notebook.rs input.md output.rnb`
- 4 sample notebooks in `notebooks/` directory
- 168 cells total (86 markdown, 82 code)
### 4. Automated Validation ✅
- Run: `cargo test --test notebook_validation -- --nocapture`
- Validates all 4 sample notebooks
- **90.2% pass rate** (74/82 cells passing)
---
## Troubleshooting
### "I don't see the cell type selector!"
**Cause**: Browser cache
**Fix**: Hard refresh (Ctrl+Shift+R)
### "Markdown cells show as raw text"
**Cause**: Server not restarted
**Fix**:
```bash
fuser -k 8080/tcp
cargo run --bin ruchy notebook
```
### "I can't create markdown cells"
**Cause**: Old JavaScript cached
**Fix**:
1. Open DevTools (F12)
2. Go to Network tab
3. Check "Disable cache"
4. Refresh page
---
## Visual Proof
After refreshing, you should see:
```
+------------------------------------------+
| ^^^^^^^^^ THIS DROPDOWN |
+------------------------------------------+
| Cell 1: [Markdown Cell] |
| Double-click to edit |
+------------------------------------------+
| Cell 2: [Code Cell] |
| > 42 |
| 42 |
+------------------------------------------+
```
---
## Commands to Verify
```bash
# 1. Check server is serving updated HTML
# 2. Check markdown rendering endpoint exists
curl -X POST http://localhost:8080/api/render-markdown \
-H "Content-Type: application/json" \
# 3. Run validation tests
cargo test --test notebook_validation -- --nocapture
# 4. List sample notebooks
ls -lh notebooks/
# 5. View a sample notebook
head -50 notebooks/01-literals.rnb
```
---
## Success Indicators
✅ Cell type dropdown visible
✅ Can create markdown cells
✅ Markdown renders as HTML
✅ Can save/load .rnb files
✅ All 4 sample notebooks exist
✅ Validation tests pass with 90.2%
If you see all of these, **NOTEBOOK-009 is working perfectly!** 🎉
---
**Note**: If you're still not seeing changes after hard refresh, check your browser's DevTools Console (F12) for any JavaScript errors that might be preventing the new code from loading.