MarkdownMagic ✨

A powerful and intuitive markdown editor and previewer built by Hugo Adona. Write markdown with ease and see your content come to life in real-time.

🚀 Features

• Live Preview: See your markdown rendered in real-time as you type
• Split View: Side-by-side editor and preview panes
• Syntax Highlighting: Beautiful syntax highlighting for markdown
• Export Options: Export your work as HTML, PDF, or markdown files
• Theme Support: Switch between light and dark themes
• Responsive Design: Works seamlessly on desktop, tablet, and mobile
• Local Storage: Auto-save your work locally
• Keyboard Shortcuts: Boost productivity with helpful shortcuts
• GitHub Flavored Markdown: Full support for GFM extensions
• File Operations: Open, save, and manage your markdown files

🌟 Demo

Try MarkdownMagic live: Demo Link (Update with your deployed URL)

📱 Screenshots

(Add screenshots of your application here)

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Markdown Parser: Marked.js or similar
• Syntax Highlighting: Prism.js or Highlight.js
• Icons: Font Awesome or Feather Icons
• Styling: CSS Grid/Flexbox with custom CSS

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Web server (for local development)

Installation

1. Clone the repository:

git clone https://github.com/HugoAdona/markdownmagic.git
cd markdownmagic

2. Serve the files locally:

Using Python:

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Using Node.js:

npx serve .

Using PHP:

php -S localhost:8000

3. Open your browser and navigate to http://localhost:8000

Development Setup

If you want to contribute or modify the code:

1. Fork the repository
2. Clone your fork locally
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📖 Usage

Basic Usage

1. Start Writing: Begin typing your markdown in the left editor pane
2. Live Preview: Watch your content render in real-time on the right
3. Toggle Views: Use the view buttons to switch between editor-only, preview-only, or split view
4. Save Your Work: Your content is automatically saved to local storage

Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + S	Save file
Ctrl/Cmd + O	Open file
Ctrl/Cmd + N	New document
Ctrl/Cmd + B	Bold text
Ctrl/Cmd + I	Italic text
Ctrl/Cmd + K	Insert link
Ctrl/Cmd + /	Toggle comment
F11	Toggle fullscreen

Supported Markdown Features

• Headers: # H1, ## H2, ### H3, etc.
• Emphasis: *italic*, **bold**, ***bold italic***
• Lists: Ordered and unordered lists
• Links: [text](url) and reference-style links
• Images: ![alt](src) with drag-and-drop support
• Code: Inline code and fenced code blocks
• Tables: GitHub-style tables
• Blockquotes: > quote text
• Strikethrough: ~~strikethrough~~
• Task Lists: - [x] completed task
• Math: LaTeX math expressions (if enabled)

🎨 Customization

Themes

MarkdownMagic supports multiple themes:

• Light Theme: Clean and minimal
• Dark Theme: Easy on the eyes for night coding
• Auto Theme: Follows system preference

Custom CSS

You can customize the appearance by modifying the CSS files:

• styles/editor.css - Editor styling
• styles/preview.css - Preview pane styling
• styles/themes.css - Theme definitions

📁 Project Structure

markdownmagic/
├── index.html              # Main HTML file
├── css/
│   ├── main.css           # Main stylesheet
│   ├── editor.css         # Editor styles
│   ├── preview.css        # Preview styles
│   └── themes.css         # Theme definitions
├── js/
│   ├── app.js             # Main application logic
│   ├── editor.js          # Editor functionality
│   ├── preview.js         # Preview rendering
│   └── utils.js           # Utility functions
├── assets/
│   ├── icons/             # Icon files
│   └── fonts/             # Custom fonts
├── docs/                  # Documentation
├── README.md
└── LICENSE

🚀 Deployment

GitHub Pages

1. Go to your repository settings
2. Scroll to "Pages" section
3. Select source branch (usually main or gh-pages)
4. Your site will be available at https://yourusername.github.io/markdownmagic

Netlify

1. Connect your GitHub repository to Netlify
2. Set build command: # No build needed for static site
3. Set publish directory: / (root)
4. Deploy!

Vercel

1. Import your GitHub repository
2. No build configuration needed
3. Deploy automatically

🤝 Contributing

Contributions make the open source community amazing! Any contributions you make are greatly appreciated.

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

Development Guidelines

• Follow existing code style and conventions
• Add comments for complex functionality
• Test your changes across different browsers
• Update documentation if needed
• Keep commits focused and descriptive

🐛 Bug Reports & Feature Requests

Found a bug or have a feature request? Please open an issue on GitHub:

1. Check if the issue already exists
2. Use the appropriate issue template
3. Provide clear reproduction steps for bugs
4. Include screenshots if helpful

📄 License

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

👨‍💻 Author

Hugo Adona

• GitHub: @HugoAdona
• Portfolio: [Your Portfolio URL]

🙏 Acknowledgments

• Marked.js - Fast markdown parser
• Prism.js - Syntax highlighting
• Font Awesome - Beautiful icons
• All the amazing contributors and users

🔗 Related Projects

• Quotely - Random quote generator API

---

"The best way to learn markdown is to write markdown." - Start your markdown journey with MarkdownMagic! ✨