https://github.com/renilgarala/markdown-previewer

Markdown Previewer is allows users to enter markdown text and see the formatted output in real time
https://github.com/renilgarala/markdown-previewer

chaicode-cohort javascript marked-js

Last synced: 6 months ago
JSON representation

Markdown Previewer is allows users to enter markdown text and see the formatted output in real time

• Host: GitHub
• URL: https://github.com/renilgarala/markdown-previewer
• Owner: RenilGarala
• Created: 2025-03-27T13:22:43.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2025-03-27T13:59:55.000Z (10 months ago)
• Last Synced: 2025-03-27T14:33:29.813Z (10 months ago)
• Topics: chaicode-cohort, javascript, marked-js
• Language: CSS
• Homepage: https://mark-down-previewer-red.vercel.app
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


# Markdown Previewer  

A simple **Markdown Previewer** that allows users to enter markdown text and see the formatted output in real time, without making any backend API calls.  

## 🚀 Objective  

Build a real-time Markdown previewer to practice working with **user input**, **text processing**, and dynamically updating the **DOM**.  

## 🛠️ Tech Stack  

- HTML  

- CSS  

- JavaScript  

## ✅ Features  

- **Markdown Editor:**  

  - A **textarea** on the left-hand side where users can enter Markdown syntax.  

- **Real-time Preview:**  

  - A preview section on the right-hand side displays the **formatted output**.  

- **Supported Markdown Elements:**  

  - **Headings:** `# H1`, `## H2`, etc.  

  - **Bold & Italics:** `**bold**`, `_italic_`  

  - **Links:** `[title](http://example.com)`  

  - **Lists:** Ordered and unordered lists.  

- **Clear/Reset Button:**  

  - Clears the textarea input.  

- **Copy Button:**  

  - Copy the textarea input.  

## 📌 How to Use  

1. Open the website.  

2. Type **Markdown syntax** in the left-hand textarea.  

3. See the **real-time preview** on the right-hand side.  

4. Use the **clear/reset button** to remove the input. 

5. Use the **copy button** to copy the markdown text.  

## 📂 Installation  

1. Clone this repository:  

   ```bash

   git clone https://github.com/markedjs/marked.git