Markdown Previewer

A simple markdown previewer built with React, Vite, and Tailwind CSS that allows users to write markdown and see the rendered HTML in real time.

Screenshots

Features

• Text area to input markdown.
• Preview pane to show the rendered HTML.
• Support for basic markdown syntax:
  • Headers
  • Bold
  • Italic
  • Lists
  • Links
  • Images
  • Code blocks
  • Blockquotes
• Clear button to reset the markdown text.
• Load markdown examples with the "Examples" button.
• Download markdown content as a .md file.
• Optional: Support for light and dark themes.

Live Demo

You can try out the live demo of the project here: Live Demo

Installation

Follow the steps below to set up the project on your local machine.

1. Clone the repository:

   git clone https://github.com/ArvanHunt/markdown-react

2. Navigate to the project directory:

   cd markdown-previewer

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit http://localhost:3000 to see the app in action.

Usage

• Type or paste your markdown text into the input area on the left.
• The right pane will show a live preview of the rendered HTML.
• You can click the Examples button to load some sample markdown into the input.
• Use the Clear button to reset the input field.
• Click Download to save the markdown content as a .md file.

Technologies Used

• React.js
• Vite
• Tailwind CSS
• Marked (for parsing markdown into HTML)

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes.

License

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

---

Made with ❤️ by ARVAN https://github.com/ArvanHunt.