markdown-renderer/README.md

Markdown Editor with LaTeX Support

A real-time markdown editor with LaTeX equation rendering in a split-pane web interface.

Features

• Split-pane interface: Left pane for editing, right pane for live preview
• Real-time rendering: See your changes as you type (with 300ms debounce)
• LaTeX support: Render mathematical equations using MathJax (SVG mode)
  • Inline equations: $E = mc^2$ or \(E = mc^2\)
  • Block equations: $$...$$ or \[...\]
• PDF Export: Export your rendered markdown with properly formatted equations to PDF
• Markdown features:
  • Headers, bold, italic, lists
  • Code blocks with syntax highlighting
  • Tables, blockquotes, links, images
  • And more...

Installation

1. Install Python dependencies:

pip install -r requirements.txt

Usage

1. Start the Flask server:

python app.py

2. Open your browser and navigate to:

http://localhost:8080

3. Start typing or pasting markdown in the left pane. The right pane will update automatically with the rendered output.

LaTeX Examples

Inline equation:

The famous equation $E = mc^2$ shows the relationship between energy and mass.

Block equation:

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

More complex equation:

$$
\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)
$$

PDF Export

Click the green "Export to PDF" button in the upper right corner of the preview pane to generate a PDF of your rendered markdown. The PDF will include:

• All markdown formatting (headers, lists, tables, code blocks, etc.)
• LaTeX equations rendered as SVG (both inline and display equations)
• Syntax-highlighted code blocks
• Professional typography and layout

Technology Stack

• Backend: Flask (Python)
• Frontend: Vanilla JavaScript
• Markdown: Python-Markdown library
• LaTeX: MathJax 3 (SVG output mode)
• Syntax Highlighting: Highlight.js
• PDF Generation: WeasyPrint