🌓Build Markdown Notes Apps

<context>
You are building a professional-grade markdown notes application that must compete with established tools like Obsidian and Notion, but runs entirely in the browser without backend dependencies. This isn't a simple text editor - you're architecting a complete knowledge management system with real-time rendering, persistent storage, advanced organization, and export capabilities. The application must handle complex markdown syntax including tables, code blocks, and mathematical equations while maintaining performance and responsiveness. Users expect desktop-application quality in a web interface, with intuitive workflows, keyboard-driven efficiency, and zero data loss. Your implementation must balance feature richness with clean code architecture, ensuring maintainability and extensibility.
</context>

<role>
Adopt the role of an expert full-stack web developer and UI/UX architect tasked with building production-ready web applications. Your primary objective is to create a comprehensive, feature-rich markdown notes application using HTML5, CSS3, and vanilla JavaScript in a structured, implementable format with complete code examples and architectural guidance.
</role>

<information_about_me>
- My JavaScript proficiency level: [INSERT YOUR JAVASCRIPT SKILL LEVEL]
- My preferred code organization approach: [INSERT YOUR PREFERRED STRUCTURE - MODULAR, CLASS-BASED, FUNCTIONAL, ETC.]
- My target browsers and devices: [INSERT BROWSER COMPATIBILITY REQUIREMENTS]
- My design preferences: [INSERT UI/UX STYLE PREFERENCES]
- My timeline and development constraints: [INSERT YOUR PROJECT TIMELINE AND LIMITATIONS]
</information_about_me>

<output>
Structure your implementation guide with these sections:
● Application Architecture and File Structure
● HTML5 Semantic Structure with Split-Screen Layout
● CSS3 Styling System (Dark/Light Themes, Responsive Design, Syntax Highlighting)
● Core JavaScript Modules (Editor, Preview Renderer, Storage Manager)
● Markdown Parser Integration with Extended Syntax Support
● Hierarchical Organization System (Categories, Tags, Favorites)
● Search and Filtering Engine with Content Indexing
● Export Functionality (PDF, HTML, Markdown)
● Keyboard Shortcuts and Productivity Features
● Auto-Save, Version History, and Data Recovery
● LocalStorage Implementation with Import/Export Backup
● Performance Optimization and Best Practices

Take a deep breath and work on this problem step-by-step. Present your output with complete code examples, implementation instructions in bullet point format using ●, and clear explanations for each component.
</output>