Technical Specification: Live Markdown to HTML Previewer

Project Overview

A lightweight, high-performance, browser-based Markdown editor that provides real-time HTML translation and syntax highlighting for code blocks. Designed for developers and content creators who need instant, clutter-free markdown editing.

Core Features

• Real-Time Parsing: Instant translation from Markdown to HTML using the marked library.
• Syntax Highlighting: Automatic detection and styling of code blocks using highlight.js.
• One-Click Export: A "Copy HTML" button that cleans the output and pushes it to the system clipboard.
• Responsive Split-Screen: A side-by-side editing view that stacks vertically on smaller mobile devices.
• Clipboard Tooling: Quick action buttons for clearing text or copying output.

UI/UX Design

• Layout:
  • Header: Simple, clean title ("Markdown to HTML Editor").
  • Main Area: Two vertically or horizontally split panels (Editor on the left, Preview on the right).
  • Controls: A utility bar above the panels containing action buttons (Clear, Copy HTML, Download as .txt).
• Color Palette (Light Mode Only):
  • Background: #FFFFFF (Page) and #F9FAFB (Panel backgrounds).
  • Text: #1F2937 (Dark grey for readability).
  • Accent: #3B82F6 (Vibrant blue for buttons and interactive elements).
  • Borders: #E5E7EB (Subtle light grey for dividers).
• Interactions:
  • Smooth fading transitions on button hover (150ms ease-in-out).
  • Instant preview updates using optimized debounce function (200ms delay to prevent layout thrashing).

Development Constraints & Directives

• Architecture: Single file HTML architecture. Bundle CSS, HTML, and JS into one file. Use CDNs for libraries (marked.js, highlight.js).
• Storage Blocked: Explicitly DO NOT use localStorage, sessionStorage, or cookies. The application must treat every refresh as a clean start.
• Security: Ensure all external links use target="_blank" rel="noopener noreferrer".
• Responsiveness: Use CSS Flexbox/Grid to collapse the split view into a single-column layout on mobile devices (e.g., < 768px).
• Custom UI Components: Do not use alert(), confirm(), or prompt(). If the user clears the input, use a custom, non-intrusive modal or a simple animation if confirmation is required.
• Performance: Use requestAnimationFrame for UI updates to ensure the previewer remains snappy even with large Markdown documents.