Skip to content

pooulad/html2markdown

Repository files navigation

HTML to Markdown Converter

A simple, fast web-based tool to convert HTML content into Markdown format. The converter is built with Next.js, React, and TailwindCSS, ensuring modern design and smooth user experience.

✨ Features

  • Real-time Conversion: Automatically converts HTML input into Markdown as you type.
  • Clear and Copy Options:
    • Clear both input and output fields with a single click.
    • Copy Markdown output to the clipboard effortlessly.
  • Dark and Light Mode: Seamlessly adapts to your system's theme preference.
  • Modern UI: Powered by TailwindCSS for a sleek and accessible interface.

🚀 Live Demo

Check out the live demo of the converter: Live Demo

🛠 Installation

Follow these steps to get the project running locally:

  1. Clone the repository:

    git clone https://github.com/pooulad/html2markdown.git
    cd html2markdown
  2. Install dependencies::

    yarn install
  3. Run the development server::

    yarn dev
  4. Open http://localhost:3000 in your browser.:

📄 Usage

  1. Enter or paste your HTML code in the HTML Input text area.
  2. View the converted Markdown in the Markdown Output text area.
  3. Use the Copy button to copy the Markdown to your clipboard.
  4. Use the Clear All button to reset the input and output fields.

🌄 Screenshot

HTML to Markdown Converter Screenshot-light mode

HTML to Markdown Converter Screenshot-dark mode

🛡️ Technologies Used

  • Next.js: For building the React-based application.
  • React: For the user interface.
  • TailwindCSS: For modern styling.
  • Turndown.js: For converting HTML to Markdown.
  • @nextui-org: For add fast and modern React UI Library.
  • @next-mdx: For render mdx file in nextjs project.

👨‍💻 Contributing

Contributions are welcome! To contribute:

  1. Fork the repository.

  2. Create a feature branch:

    bash

    Copy code

    git checkout -b feature-name

  3. Commit your changes:

    bash

    Copy code

    git commit -m "Add feature-name"

  4. Push to your branch:

    bash

    Copy code

    git push origin feature-name

  5. Open a pull request.

🛡️ License

This project is licensed under the MIT License.

💬 FAQ

What is Markdown?

Markdown is a lightweight markup language that allows you to format plain text into structured documents, like headings, lists, and more.

Why use Markdown?

Markdown is platform-independent, easy to read and write, and can be converted to other formats like HTML or PDF.

Can I use this tool on mobile devices?

Yes! The application is fully responsive and works seamlessly on mobile, tablet, and desktop devices.

🌟 Acknowledgements

  • Turndown.js: The core library for converting HTML to Markdown.
  • Next.js: The powerful React framework.
  • TailwindCSS: For building the stunning UI.