Skip to content

DoctorLai/markdown-html-converter

Repository files navigation

Markdown to HTML Converter/Previewer

Markdown-HTML-Converter (Built, Lint and Test)

A simple web-based tool to convert Markdown to HTML. This app is built using React and runs in the browser. It provides an easy-to-use interface with two text areas, where you can paste your Markdown source (left) and convert it to HTML (right). Meantime, the HTML will be previewed on the page.

image

Features

  • Markdown to HTML Conversion: Convert Markdown to HTML.
  • Dark Mode: Toggle between light and dark modes for better readability.
  • Tab Support: Properly inserts spaces when pressing the "Tab" key inside text areas.
  • Simple and Intuitive UI: Easy to use with a clean interface.
  • Deploy Easily: npm run build and npm run deploy
  • Previewer The tool provides a real-time HTML previewer for the given markdown source.

Live Demo

You can try the live demo of this tool at Github Page: Markdown-to-HTML Converter

Here is a similar markdown/html previewer online tool with Markdown API that was developed a while ago.

Installation

To run the tool locally:

  1. Clone the repository:

    git clone https://github.com/doctorlai/markdown-html-converter.git
    cd markdown-html-converter
  2. Install dependencies:

    npm install
  3. Start the development server:

    npm run dev
  4. Tests:

    npm run test
  5. Format Code: Use prettier --check or prettier --write to check or format the code.

    npm run format
    ## fix the code style automatically
    npm run format:fix
  6. Visit http://localhost:5173/markdown-html-converter/ to start using the tool locally.

Usage

  1. Enter Markdown source in the Markdown input box.
  2. Click "Convert →" to convert the Markdown to HTML.

You can also switch between Light Mode and Dark Mode by clicking the button on the top right corner.

Contributing

Feel free to fork this project and submit issues or pull requests for improvements!

  1. Fork the repository.
  2. Create a feature branch: git checkout -b feature-branch.
  3. Commit your changes: git commit -am 'Add new feature'.
  4. Push to the branch: git push origin feature-branch.
  5. Open a pull request.

License

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

Documentation

Here is the AI generated wiki

Acknowledgments

  • Built with ❤️ by @justyy.
  • Initial Boilerplate code contributed by ChatGPT-4o and o4-mini.
  • If you found this tool useful, consider buying me a coffee.