Markdown Editor

A full-featured markdown editor with live preview, built with modern web technologies.

Features

• Real-time Preview: See your markdown rendered as you type
• Syntax Highlighting: Powered by CodeMirror with support for multiple languages
• File Management: Create, save, load, and delete markdown files
• Mermaid Diagrams: Render beautiful diagrams directly in your markdown
• HTML Support: Embed HTML snippets in your markdown
• Synchronized Scrolling: Editor and preview scroll together
• Responsive Design: Works on desktop and mobile devices

Supported Languages

The editor provides syntax highlighting for:

• Markdown
• JavaScript
• Python
• HTML/CSS
• Go
• Rust
• JSON
• TOML
• YAML
• And more!

Technology Stack

Frontend

• Bootstrap 5: Modern, responsive UI framework
• CodeMirror 5: Powerful code editor component
• Marked.js: Fast markdown parser
• Mermaid: Diagram and flowchart rendering
• Unpoly: Progressive enhancement library

Backend

• FastAPI: Modern Python web framework
• Uvicorn: ASGI server
• uv (Astral): Fast Python package installer and environment manager

Installation & Usage

Quick Start

1. Navigate to the project directory:

cd markdown-editor

2. Run the startup script:

./start.sh

The script will:

• Install uv if not present
• Create a virtual environment
• Install all Python dependencies
• Create a sample markdown file
• Start the development server

3. Open your browser and navigate to:

http://localhost:8000

Manual Installation

If you prefer to install manually:

# Install dependencies with uv
uv venv
uv pip install -e .

# Start the server
uv run uvicorn server:app --host 0.0.0.0 --port 8000 --reload

Project Structure

markdown-editor/
├── data/                  # Markdown files storage
├── static/               # Static assets
│   ├── app.js           # Main JavaScript application
│   └── style.css        # Custom styles
├── templates/           # HTML templates
│   └── index.html       # Main editor page
├── server.py            # FastAPI backend server
├── pyproject.toml       # Python project configuration
├── start.sh             # Installation and startup script
└── README.md            # This file

API Endpoints

The backend provides the following REST API endpoints:

• GET / - Serve the main editor page
• GET /api/files - List all markdown files
• GET /api/files/{filename} - Get content of a specific file
• POST /api/files - Create or update a file
• DELETE /api/files/{filename} - Delete a file

Usage Guide

Creating a New File

1. Click the New button in the navbar
2. Enter a filename in the input field (e.g., my-document.md)
3. Start typing your markdown content
4. Click Save to save the file

Loading an Existing File

• Click on any file in the sidebar to load it into the editor

Saving Changes

• Click the Save button or press Ctrl+S (Windows/Linux) or Cmd+S (Mac)

Deleting a File

1. Load the file you want to delete
2. Click the Delete button
3. Confirm the deletion

Using Mermaid Diagrams

Create a code block with the mermaid language identifier:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
```

Embedding HTML

You can embed HTML directly in your markdown:

<div style="color: red;">
    This is red text!
</div>

Keyboard Shortcuts

• Ctrl+S / Cmd+S - Save current file

Development

Requirements

• Python 3.11+
• uv (Astral) - Will be installed automatically by start.sh

Running in Development Mode

The server runs with auto-reload enabled by default, so any changes to the Python code will automatically restart the server.

Adding New Features

• Frontend code: Edit static/app.js and static/style.css
• Backend API: Edit server.py
• UI layout: Edit templates/index.html

Troubleshooting

Port Already in Use

If port 8000 is already in use, you can change it in start.sh or run manually:

uv run uvicorn server:app --host 0.0.0.0 --port 8080 --reload

Dependencies Not Installing

Make sure uv is properly installed:

curl -LsSf https://astral.sh/uv/install.sh | sh

Then try running ./start.sh again.

License

MIT License - Feel free to use this project for any purpose.

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

---

Happy writing! 📝✨