📖 Modern Markdown Reader User Guide

🚀 Getting Started

Quick Start (30 seconds)

1. Open the App - Double-click app/index.html or visit the web version
2. Load Content - Drag & drop a .md file OR paste markdown text
3. Start Reading - Enjoy beautifully formatted content instantly!

Supported File Formats

• .md - Standard markdown files
• .markdown - Alternative markdown extension
• .txt - Plain text files with markdown syntax

Browser Requirements

📖 Basic Usage

Loading Markdown Files

Method 1: Drag & Drop

1. Open the markdown reader application
2. Drag your .md file from your file manager
3. Drop it onto the designated drop zone
4. Content renders automatically

Method 2: File Browser

1. Click the "Choose File" button
2. Browse and select your markdown file
3. Click "Open" to load the content

Method 3: Paste Text

1. Copy markdown text from any source
2. Click in the text area
3. Paste using Ctrl+V (or Cmd+V on Mac)
4. Click "Render Markdown" button

Navigation

• Table of Contents - Auto-generated from headings, click to jump to sections
• Scroll Navigation - Use mouse wheel or scrollbar for smooth scrolling
• Keyboard Navigation - Arrow keys, Page Up/Down, Home/End

✨ Advanced Features

GitHub Flavored Markdown Support

Mathematical Expressions

Full LaTeX-style math support powered by MathJax:

• Inline Math - Use $equation$ for inline expressions
• Block Math - Use $$equation$$ for centered block equations
• Complex Formulas - Support for fractions, integrals, matrices, and more

Mermaid Diagrams

Create flowcharts, graphs, and diagrams directly in markdown:

• Flowcharts - Decision trees and process flows
• Sequence Diagrams - Interaction diagrams
• Gantt Charts - Project timelines
• Class Diagrams - UML class relationships

🖍️ Text Highlighting System

How to Highlight Text

1. Press Ctrl+H to enter highlight mode
2. Select the text you want to highlight
3. Choose a color using number keys 1-8
4. The text is immediately highlighted and saved

Available Colors

Managing Highlights

• Remove Individual - Hover over highlight and click remove button
• Clear All - Press Ctrl+Shift+U
• Export Highlights - All highlights preserved in exported documents
• Persistent Storage - Highlights saved across browser sessions

🎯 Enhanced Focus Mode

What is Focus Mode?

Focus Mode provides a distraction-free reading experience by hiding interface elements and maximizing content width for optimal readability.

How to Use Focus Mode

1. Press Ctrl+; to enter focus mode
2. All toolbars and sidebars are hidden
3. Content expands to maximum width
4. Minimal ribbon remains for essential controls
5. Press Ctrl+; again to exit

Focus Mode Features

• Hidden Interface - Vertical toolbar and top header disappear
• Maximum Width - Content uses full screen width
• Quick Theme Switch - Theme selector remains accessible
• Smooth Transitions - Elegant animations when entering/exiting
• Perfect for Presentations - Clean view for sharing screens

📤 Export Options

Available Export Formats

How to Export

1. Click the "Export" dropdown in the toolbar
2. Select your desired format
3. Choose export options (if available)
4. Click "Export" to download the file

Export Keyboard Shortcuts

🎨 Themes and Customization

Available Themes

Switching Themes

• Theme Dropdown - Click the theme selector in the toolbar
• Keyboard Shortcut - Press Ctrl+D to cycle through themes
• Focus Mode - Theme selector remains available in focus mode

Typography Settings

• Font Size - Adjust with Ctrl++ and Ctrl+-
• Line Height - Customize spacing between lines
• Reading Width - Adjust content width for optimal reading
• Font Family - Choose from available font options

🌍 Multi-Language Support

Supported Languages

Language Features

• Real-time Translation - Interface updates instantly
• Accessibility Translation - All accessibility features translated
• RTL Support - Proper right-to-left layout for Arabic
• Persistent Preference - Language choice saved across sessions
• Keyboard Shortcuts - Help text translated in selected language

Changing Languages

1. Click the 🌐 language dropdown in the toolbar
2. Select your preferred language
3. Interface updates immediately
4. Setting is saved for future sessions

♿ Accessibility Features

WCAG 2.1 AA Compliance

Our markdown reader meets international accessibility standards with comprehensive support for users with disabilities.

Screen Reader Support

• NVDA - Full compatibility with NVDA screen reader
• JAWS - Complete JAWS support with proper announcements
• VoiceOver - Native macOS and iOS screen reader support
• Multilingual - Screen reader announcements in 7 languages

Keyboard Navigation

• Tab Navigation - Logical tab order through all interface elements
• Skip Links - Quick navigation to main content areas
• Focus Indicators - Clear visual focus management
• Keyboard Shortcuts - All features accessible via keyboard

Accessibility Shortcuts

Visual Accessibility

• High Contrast Mode - Available in theme selector
• Scalable Text - Zoom up to 200% without horizontal scrolling
• Color Independence - Information not conveyed by color alone
• Focus Indicators - Clear visual focus for all interactive elements

⌨️ Complete Keyboard Shortcuts

Essential Shortcuts

Highlighting Shortcuts

Typography Shortcuts

📱 Mobile Features

Touch Gestures

Mobile Optimizations

• Responsive Design - Adapts to all screen sizes
• Touch-Friendly UI - Large touch targets and optimized spacing
• Mobile Toolbar - Collapsible toolbar for mobile devices
• Performance - Optimized for mobile devices with limited resources
• Offline Capability - Works without internet connection

Mobile-Specific Features

• Auto-hide Toolbars - Toolbars hide during scrolling
• Gesture Navigation - Intuitive touch-based navigation
• Adaptive Layout - Interface adapts to portrait/landscape
• Battery Optimization - Efficient rendering to preserve battery

🔧 Troubleshooting

Common Issues

Content Not Displaying

• Check file format (.md, .markdown, .txt)
• Refresh the page (F5 or Ctrl+R)
• Try a different browser
• Clear browser cache and cookies
• Ensure JavaScript is enabled

Highlighting Not Working

• Press Ctrl+H to activate highlight mode
• Ensure text is properly selected
• Try clearing all highlights first (Ctrl+Shift+U)
• Check if browser supports local storage

Export Issues

• Disable popup blocker for the site
• Check your downloads folder
• Try a different export format
• Ensure sufficient disk space
• Wait for large documents to process

Performance Issues

• Close other browser tabs
• Restart your browser
• Update to the latest browser version
• Check available system memory
• Try with a smaller document

Browser-Specific Issues

💡 Pro Tips

Productivity Tips

• Use Focus Mode - Press Ctrl+; for distraction-free reading
• Color-Code Highlights - Use consistent colors for different content types
• Keyboard Shortcuts - Learn essential shortcuts for faster navigation
• Export Regularly - Save your highlighted documents for future reference
• Table of Contents - Use auto-generated TOC for quick navigation

Reading Tips

• Adjust Font Size - Use Ctrl++ and Ctrl+- for comfortable reading
• Choose Right Theme - Dark theme for low light, high contrast for accessibility
• Use Highlighting Strategically - Don't over-highlight; focus on key points
• Take Breaks - Use focus mode for intensive reading sessions

Organization Tips

• Consistent Color Coding - Yellow for important, green for completed, red for urgent
• Export Highlights Only - Create summary documents with just highlighted content
• Use Multiple Formats - Export to different formats for different purposes
• Regular Backups - Export important documents regularly

Advanced Usage

• YAML Front Matter - Add metadata to your documents
• Math Expressions - Use LaTeX syntax for mathematical content
• Mermaid Diagrams - Create flowcharts and diagrams in markdown
• Code Highlighting - Specify language for better syntax highlighting