Build a Markdown Editor & Preview with AI

Build a single-page Markdown Editor with live preview as a static HTML file with embedded CSS and JavaScript. No frameworks. You may include a lightweight markdown parsing library inline (write a custom parser or embed a minimal one). LAYOUT: - Dark theme (background #0d1117, text #c9d1d9) - Full viewport height layout with three sections: 1. Top toolbar bar (48px height) 2. Main split pane area (fills remaining height) 3. Bottom status bar (32px height) - Split pane: left half is the markdown editor, right half is the rendered preview - Draggable divider between panes to resize the split (min 30% each side) - Three view mode buttons in toolbar: "Editor Only", "Split", "Preview Only" TOOLBAR: - Row of formatting buttons with icons (use unicode characters or simple SVG): - Bold (B) — wraps selection in ** - Italic (I) — wraps selection in * - Strikethrough (S) — wraps selection in ~~ - Heading dropdown (H) — submenu for H1-H6, inserts # prefix - Link — wraps selection in [text](url) with placeholder - Image — inserts  - Code inline — wraps in backticks - Code block — wraps in triple backticks with language placeholder - Unordered list — prefixes lines with - - Ordered list — prefixes lines with 1., 2., etc. - Blockquote — prefixes with > - Horizontal rule — inserts --- - Table — inserts a 3x3 markdown table template - Buttons should apply to selected text, or insert at cursor if nothing is selected - Divider, then: Export HTML, Copy Markdown, Clear buttons on the right side EDITOR PANE (left): - Large textarea filling the pane with monospace font (Consolas, fallback to monospace) - Line numbers gutter on the left - Tab key inserts 4 spaces (prevent default tab behavior) - Soft wrap enabled (no horizontal scrolling) - Simple syntax highlighting overlay: - Headings (#, ##, etc.) in bold white - Bold (**text**) in bold - Italic (*text*) in italic - Code (`code`) in orange monospace - Links in blue underline - List markers (-, *, 1.) in green - Placeholder text with a sample markdown document demonstrating headings, lists, code, links, and a table PREVIEW PANE (right): - Scrollable div with rendered HTML - Styled with proper typography: - Headings: h1 = 2rem, h2 = 1.5rem, h3 = 1.25rem, each with bottom border - Paragraphs: 1rem with 0.8rem line-height spacing between - Code blocks: dark background (#161b22), rounded corners, syntax highlighting for common languages (at minimum: JavaScript, Python, HTML, CSS, JSON) - Inline code: slight background tint, monospace - Tables: bordered, striped rows, header row bold - Blockquotes: left blue border, indented, muted text color - Links: blue, underlined - Images: max-width 100%, rounded corners - Lists: proper indentation, bullets/numbers - Horizontal rules: subtle line SYNCHRONIZED SCROLLING: - When user scrolls the editor, preview scrolls proportionally - Based on scroll percentage (scrollTop / scrollHeight) - Disable sync when user manually scrolls the preview (re-enable after 2s idle) LIVE PREVIEW: - Update preview on every keystroke (debounced 150ms) - Parse markdown to HTML supporting: headings, bold, italic, strikethrough, links, images, code (inline + block), lists (ordered + unordered + nested), blockquotes, tables, horizontal rules, line breaks EXPORT HTML: - Button generates a full HTML document with the rendered content - Includes a clean stylesheet in the exported HTML (light theme for printing) - Opens a download dialog with filename "document.html" STATUS BAR: - Left side: word count, character count, line count - Right side: "Saved" indicator (updates when localStorage saves) - Auto-save to localStorage every 3 seconds if content changed - On page load, restore from localStorage if available - Show "Unsaved changes" in yellow if content differs from last save KEYBOARD SHORTCUTS: - Ctrl+B: Bold - Ctrl+I: Italic - Ctrl+K: Insert link - Ctrl+Shift+C: Insert code block - Ctrl+S: Force save (prevent browser save dialog) - Ctrl+E: Toggle editor/preview/split mode Make it responsive: on screens under 768px, default to "Editor Only" mode with a toggle button to switch to preview. Toolbar wraps to two rows. Status bar font size reduces.