https://github.com/hashimthepassionate/markdown-editor
A sleek, user-friendly Markdown editor with live preview, autosave, rich formatting toolbar, and syntax highlighting. Perfect for creating documentation, notes, or blog posts with ease! 💻✨
https://github.com/hashimthepassionate/markdown-editor
css html javascript live-preview markdown markdown-documentation markdown-editor markdown-tools real-time-editing
Last synced: 3 months ago
JSON representation
A sleek, user-friendly Markdown editor with live preview, autosave, rich formatting toolbar, and syntax highlighting. Perfect for creating documentation, notes, or blog posts with ease! 💻✨
- Host: GitHub
- URL: https://github.com/hashimthepassionate/markdown-editor
- Owner: HashimThePassionate
- License: mit
- Created: 2024-12-04T06:48:58.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-04T07:50:07.000Z (7 months ago)
- Last Synced: 2025-02-04T17:51:29.328Z (5 months ago)
- Topics: css, html, javascript, live-preview, markdown, markdown-documentation, markdown-editor, markdown-tools, real-time-editing
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: License
Awesome Lists containing this project
README
# Advanced Markdown Editor 📝🚀
Welcome to the **Advanced Markdown Editor**! This project provides a sleek and user-friendly interface for creating and previewing Markdown documents in real-time. Whether you're writing documentation, notes, or blog posts, this editor is designed to enhance your Markdown editing experience. 💻✨
---
## 📋 Table of Contents 📚
1. [Features ✨](#features)
2. [Live Demo 🌐](#live-demo)
3. [Installation 🛠️](#installation)
4. [Usage 📝](#usage)
5. [Project Structure 📁](#project-structure)
6. [Technologies Used ⚙️](#technologies-used)
7. [Contributing 🤝](#contributing)
8. [License 📜](#license)
9. [Contact 📞](#contact)
---
## ✨ Features ✨
- **Live Preview 👀**: See your Markdown rendered in real-time as you type.
- **Rich Toolbar 🛠️**: Access common Markdown formatting options with ease.
- **Autosave 💾**: Your work is automatically saved to local storage to prevent data loss.
- **Responsive Design 📱**: Optimized for both desktop and mobile devices.
- **Customizable 🎨**: Easily tweak styles and functionalities to fit your needs.
- **Syntax Highlighting 🔍**: Enhanced readability for code blocks with syntax highlighting.
---
## 🌐 Live Demo 🌐
Experience the **Advanced Markdown Editor** in action:
🔗 [Live Preview Link](https://hashimthepassionate.github.io/markdown-editor/)
---
## 🛠 Installation 🛠️
Follow these steps to set up the project locally on your machine. 🖥️
### 1. Clone the Repository 📥
```bash
git clone https://github.com/hashimthepassionate/markdown-editor.git
```
### 2. Navigate to the Project Directory 📂
```bash
cd markdown-editor
```
### 3. Open the Editor 🌟
Simply open the `index.html` file in your preferred web browser.
- **Option 1**: Double-click the `index.html` file.
- **Option 2**: Use the command line:
```bash
open index.html # For macOS 🍎
start index.html # For Windows 🖥️
xdg-open index.html # For Linux 🐧
```
---
## 🖊️ Usage 📝
Once you've opened the editor, you can start typing your Markdown content in the left pane. The right pane will display a live preview of your rendered Markdown. 💡
### 📄 Writing Markdown ✍️
Utilize the toolbar to format your text:
- **Bold**, *Italic*, ***Bold & Italic***
- Create [Links 🌐](https://www.example.com)
- Insert Images 
- Add Code Blocks with Syntax Highlighting 🖥️
- Generate Tables, Lists, Blockquotes, and more!
### 🔄 Live Preview 🔄
As you type, the preview pane updates in real-time, allowing you to see the final rendered output instantly. 🪄
---
## 📁 Project Structure 📁
```
markdown-editor/
├── index.html # Main HTML file
├── styles.css # Custom CSS styles
├── script.js # JavaScript for functionality
└── README.md # Project documentation
```
---
## ⚙️ Technologies Used ⚙️
- **HTML5 🌐**: Structure of the application.
- **CSS3 🎨**: Styling and responsive design.
- **JavaScript (ES6) 🛠️**: Interactive functionalities.
- **[EasyMDE 🖊️](https://github.com/Ionaru/easy-markdown-editor)**: A simple, embeddable, and beautiful Markdown editor.
- **CDN Libraries 🌍**: Leveraging Content Delivery Networks for EasyMDE and other dependencies.
---
## 🤝 Contributing 🤝
Contributions are welcome! 💖 Whether it's reporting a bug, suggesting a feature, or submitting a pull request, your input is valuable.
### How to Contribute 🌟
1. **Fork the Repository 🍴**
2. **Create a New Branch 🌿**
```bash
git checkout -b feature/YourFeatureName
```
3. **Commit Your Changes 💾**
```bash
git commit -m "Add your message"
```
4. **Push to the Branch 📤**
```bash
git push origin feature/YourFeatureName
```
5. **Open a Pull Request 🔄**
Please ensure your contributions adhere to the project's coding standards and include relevant documentation or tests as necessary. 📝
---
## 📜 License 📜
This project is licensed under the [MIT License](./License). You are free to use, modify, and distribute this project as per the license terms. 🔓