Markdown to PDF Converter

A browser-only markdown editor with live preview and PDF export capabilities. Built from scratch with a custom markdown parser (no external markdown libraries). No server required - just open the HTML file in your browser!

Features

- ✅ Custom Markdown Parser - Built from scratch without external libraries

Method 2: Open from Browser

1. Open your browser 2. Press Ctrl+O (or Cmd+O on Mac) 3. Navigate to 82-markdown-to-pdf/index.html 4. Select and open

Method 3: Drag and Drop

1. Open your browser 2. Drag index.html onto the browser window 3. Start editing!

Optional - Using a Server (for development)

If you prefer to use a server:

cd 82-markdown-to-pdf
Python
python3 -m http.server 8000
Or use the included app.py
python3 app.py
Node.js (if you have it)
npx http-server -p 8000

Then open http://localhost:8000

But remember: The server is completely optional! The editor works perfectly without it.

Usage

Basic Editing

1. Type markdown in the left editor pane 2. See preview in the right pane (updates automatically) 3. Use toolbar for quick formatting 4. Content auto-saves to browser storage

Formatting Toolbar

- B - Bold (text)

1. Click 📄 Export PDF button (or press Ctrl/Cmd + P) 2. Browser print dialog opens 3. Select "Save as PDF" as destination 4. Choose options: - Page size (A4, Letter, etc.) - Margins - Headers/footers 5. Click "Save"

The PDF will match your preview exactly, including custom styling.

Supported Markdown Syntax

Headers

Heading 1
Heading 2
Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Emphasis

italic or _italic_
bold or __bold__
bold italic
~~strikethrough~~

Lists

Unordered:

- Item 1
Item 2
  - Nested item

Ordered:

1. First item
2. Second item
3. Third item

Links and Images

Link text
!Alt text

Code

Inline:

Use inline code for short snippets

Blocks:

> This is a blockquote
> Multiple lines supported

| Header 1 | Header 2 | Header 3 |
|----------|:--------:|---------:|
| Left     | Center   | Right    |
| Cell     | Cell     | Cell     |

---

Main File: index.html (40KB standalone file)

JavaScript version (included in index.html)

82-markdown-to-pdf/
├── index.html             # ⭐ Main file - open this in browser!
├── app.py                 # Optional: Python web server
├── markdown_parser.py     # Optional: Python parser
├── templates/
│   └── index.html        # Main application HTML
├── static/
│   ├── css/
│   │   └── styles.css    # Application styles
│   └── js/
│       ├── parser.js     # Markdown parser (JavaScript)
│       └── app.js        # Application logic
├── docs/
│   └── implementation.md # Technical documentation
└── README.md             # This file

markdownEditor.addEventListener('input', () => {

const css = 
    .preview-content {
        font-family: ${settings.fontFamily};
        font-size: ${settings.bodySize}px;
        color: ${settings.textColor};
    }
;

function exportPDF() {
    // Apply print-specific CSS
    const printStyles = generatePrintCSS();
    document.head.appendChild(printStyle);
    // Trigger print dialog
    window.print();
}

1. Add to state.settings in app.js 2. Add form input in index.html 3. Update generateCustomCSS() to use new setting 4. Add to preset themes

Testing

Test with various markdown files:

Create test file
cat > test.md << 'EOF'
Test Document
This tests bold, italic, and code.
Lists
- Item 1
Item 2
| Table | Header |

|-------|--------|
| Cell  | Cell   |
EOF
Open in editor, paste content, verify rendering

Troubleshooting

Application won't load

Check:

escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

LocalStorage: