/markdown-previewer

This is a simple Markdown previewer app built using React.js and marked.js. On typing any markdown code in the textarea, it's immediately displayed in the preview box, that's been parsed using marked.js library.

Primary LanguageJavaScript

markdown-previewer 🗒️

Overview 📄

This is a simple Markdown previewer app built using React.js and marked.js. On typing any markdown code in the textarea, it's immediately displayed in the preview box, that's been parsed using marked.js library.

Installation ⬇️

1 - Clone the repository or download the source code.

2 - Navigate to the project directory using your terminal.

cd random-quotes-app

3- Install the required dependencies.

npm install

4- Start the development server.

npm start

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

Usage 👐

  • Type your markdown in the textarea.
  • Watch the preview in the preview box.

Demo 📹

demo gif

Structure 🌲

  • index.html: includes HTML core
  • src:
    • App.jsx: includes the react components code
    • main.jsx: responsible for the rendering
    • style.css: stylesheet

Technologies Used 💻

react React.js

Pre-requisites & used libraries ❔

  • Node.js (version 14 or higher)
  • npm (version 6 or higher)
  • marked.js
  • React 18 is used

link 🔗

Click Me!

Author 🖊️

Mariam Atef Hassan - 2023


Enjoy 😉