Skip to content

README.md

Latest commit

 

History

History
260 lines (192 loc) · 7.74 KB

README.md

File metadata and controls

260 lines (192 loc) · 7.74 KB

✨ Markups

A powerful, free online markdown editor with real-time preview

Deploy with Vercel MIT License Vite Monaco Editor

🌐 Live Demo • 🐛 Report Bug • 💡 Request Feature

Markups Screenshot

🚀 Features

✍️ Editor

  • Monaco Editor — VS Code's powerful editor with IntelliSense
  • Syntax Highlighting — Full markdown syntax support
  • Multiple Themes — VS Light/Dark, Dracula, GitHub, Solarized
  • Customizable — Font size, font family, line numbers, word wrap

👁️ Preview

  • Live Preview — Real-time rendering as you type
  • Split View — Side-by-side editor and preview with resizable divider
  • Scroll Sync — Synchronized scrolling between editor and preview
  • Dark/Light Mode — Automatic theme switching

📝 Markdown Support

  • GitHub Flavored Markdown — Tables, task lists, strikethrough
  • KaTeX Math — LaTeX math equations ($inline$ and $$block$$)
  • Mermaid Diagrams — Flowcharts, sequence diagrams, Gantt charts
  • Syntax Highlighting — Code blocks with Prism.js
  • Footnotes — Reference-style footnotes
  • Alerts — GitHub-style alert blocks

📤 Export Options

  • 📄 Markdown — Download as .md file
  • 📑 PDF — Export with preserved formatting
  • 🌐 HTML — Clean HTML with embedded styles
  • 📋 Copy — Quick copy to clipboard

🛠️ Advanced Features

  • 📑 Multi-Tab Support — Work on multiple documents
  • 📚 Templates — Pre-built document templates
  • ⌨️ Snippets — Quick text insertions
  • 🎯 Focus Mode — Distraction-free writing
  • ⌨️ Typewriter Mode — Keep cursor centered
  • 📊 Statistics — Word/character/reading time
  • 🎯 Writing Goals — Set and track word count goals
  • 📋 Table of Contents — Auto-generated navigation
  • 🔍 Linting — Markdown best practices checking
  • 💾 Auto-Save — Never lose your work
  • 📱 PWA Support — Install as desktop/mobile app

🖥️ Demo

Try it live at markdownlivepreview.com

🚀 Quick Start

Prerequisites

  • Node.js 18.0 or higher
  • npm 9.0 or higher

Installation

# Clone the repository
git clone https://github.com/Nir-Bhay/markdown-live-preview.git

# Navigate to directory
cd markdown-live-preview

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

📦 Build

# Create production build
npm run build

# Preview production build
npm run preview

The build output will be in the dist/ folder.

🚀 Deployment

Deploy to Vercel (Recommended)

Deploy with Vercel

Or manually:

  1. Push your code to GitHub
  2. Import your repository on Vercel
  3. Vercel auto-detects Vite and deploys

Build Settings:

Setting Value
Framework Vite
Build Command npm run build
Output Directory dist

Deploy to Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Build and deploy
npm run build
netlify deploy --prod --dir=dist

Deploy to GitHub Pages

# Build the project
npm run build

# Deploy dist folder to gh-pages branch
npx gh-pages -d dist

⌨️ Keyboard Shortcuts

Action Windows/Linux macOS
Save as Markdown Ctrl + S ⌘ + S
Export to PDF Ctrl + P ⌘ + P
Import File Ctrl + O ⌘ + O
Toggle Dark Mode Ctrl + D ⌘ + D
Bold Ctrl + B ⌘ + B
Italic Ctrl + I ⌘ + I
Insert Link Ctrl + K ⌘ + K
Heading 1 Ctrl + 1 ⌘ + 1
Heading 2 Ctrl + 2 ⌘ + 2
Heading 3 Ctrl + 3 ⌘ + 3
Toggle Focus Mode Ctrl + Shift + F ⌘ + ⇧ + F
Open Export Modal Ctrl + Shift + E ⌘ + ⇧ + E
Fullscreen F11 F11
Show Help Ctrl + H ⌘ + H

🏗️ Tech Stack

Technology Purpose
Vite Build tool & dev server
Monaco Editor Code editor
Marked Markdown parser
Mermaid Diagrams
KaTeX Math equations
Prism.js Syntax highlighting
DOMPurify XSS sanitization
html2pdf.js PDF export

📁 Project Structure

markdown-live-preview/
├── index.html              # Main HTML entry
├── package.json            # Dependencies
├── vite.config.js          # Vite configuration
├── vercel.json             # Vercel deployment config
├── public/
│   ├── css/                # Stylesheets
│   │   ├── premium-ui.css  # Main UI styles
│   │   └── style.css       # Base styles
│   ├── image/              # Static images
│   ├── manifest.json       # PWA manifest
│   └── sw.js               # Service worker
└── src/
    ├── main.js             # Application entry
    ├── config/             # Configuration
    ├── core/               # Core services
    │   ├── editor/         # Monaco editor
    │   ├── markdown/       # Markdown parser
    │   └── storage/        # LocalStorage
    ├── features/           # Feature modules
    │   ├── tabs/           # Multi-tab support
    │   ├── toc/            # Table of contents
    │   ├── goals/          # Writing goals
    │   └── ...
    ├── services/           # Services
    │   ├── export/         # Export (PDF, HTML, MD)
    │   └── shortcuts/      # Keyboard shortcuts
    ├── ui/                 # UI components
    │   ├── toast/          # Notifications
    │   ├── modal/          # Modal dialogs
    │   └── theme/          # Theme management
    └── utils/              # Utilities

🤝 Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Made with ❤️ by Nir-Bhay

⭐ Star this repo if you find it useful!