Markdown Editor


Project Snapshots

Markdown Editor - Toolbar & Preview
1 / 5
Markdown Editor - Toolbar & Preview
Markdown Editor - Math (KaTeX)
Markdown Editor - Dark Mode
Markdown Editor - Mermaid Diagrams
Markdown Editor - Read Mode

Project Technical Information

Project Name:
Markdown Editor (Flask)
Project Type:
Editor & Preview Import/Export Markdown Editor Markdown to PDF Markdown to HTML Markdown to Styled HTML Markdown Preview
Tech Stack:
Python Flask EasyMDE Bootstrap 5 Primer CSS highlight.js KaTeX Mermaid html2pdf.js HTML/CSS/JS
Editor Features:
Live Preview Code Highlighting Math & Diagrams Dark/Light Themes Import/Export MD/HTML/PDF Autosave
Links:
Repo: markdown-editor Live Demo

Project Summary

The Markdown Editor is a free, online, no-signup editor with GitHub-style live preview. It supports importing Markdown/HTML, exporting to Markdown, HTML, or PDF, plus advanced features like code highlighting, KaTeX math, Mermaid diagrams, autosave, editable titles, and dark/light themes. It is available as a Hugging Face Space for instant access.

Skills Demonstrated

Markdown Authoring UX Live Preview (GitHub‑style) Code Highlighting KaTeX Math Mermaid Diagrams Import/Export (MD/HTML/PDF) Autosave & Read Mode Dark/Light Theming Docker Deployment

Tools Used

Python Flask EasyMDE highlight.js KaTeX Mermaid html2pdf.js Bootstrap 5 Font Awesome Primer CSS Hugging Face Spaces Docker

Solution

The project is implemented with a Flask backend serving a lightweight editor interface. The frontend is powered by EasyMDE, Highlight.js, and supporting libraries for math, diagrams, and PDF export. Files can be imported/exported seamlessly, while autosave and theme switching enhance usability. The app is containerized with Docker and can be run locally or deployed to Hugging Face Spaces.

Approach

  1. Edit: Write or paste Markdown with EasyMDE and see GitHub‑style live preview.
  2. Enhance: Add code blocks (highlight.js), KaTeX math, and Mermaid diagrams.
  3. Style: Switch Dark/Light themes or Read Mode; set an editable document title.
  4. Import/Export: Import MD/HTML; export Markdown, raw HTML, styled HTML, or PDF.
  5. Persist: Autosave keeps work in the browser; continue locally or use the HF Space.

Project Link(s)

Repository: markdown-editor

Live App

Completed: 2025

Designed and Developed by Aradhya Pavan H S