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

📝📋"Markdown Previewer" transforms any text into Markdown format, on the fly! You can preview how your Readme or any markdown text you are writing will look like.
https://github.com/tomasesquivelgc/markdown-previewer

freecodecamp-project javascript markdown markdownpreview react singlepageapplication

Last synced: 7 days ago
JSON representation

📝📋"Markdown Previewer" transforms any text into Markdown format, on the fly! You can preview how your Readme or any markdown text you are writing will look like.

• Host: GitHub
• URL: https://github.com/tomasesquivelgc/markdown-previewer
• Owner: tomasesquivelgc
• License: mit
• Created: 2023-07-04T17:26:47.000Z (over 1 year ago)
• Default Branch: development
• Last Pushed: 2024-03-18T20:58:19.000Z (8 months ago)
• Last Synced: 2024-10-16T07:01:30.969Z (22 days ago)
• Topics: freecodecamp-project, javascript, markdown, markdownpreview, react, singlepageapplication
• Language: JavaScript
• Homepage: https://incandescent-melba-b761fd.netlify.app
• Size: 135 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  
Markdown previewer




# 📗 Table of Contents

- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)

# 📖 Markdown previewer 

**Markdown previewer** is a simple project that aims to clone [FreeCodeCamp's version](https://markdown-previewer.freecodecamp.rocks). To do this, I have built a page using React (Vite) and copied the CSS to get the same look. To get the logic done I've used the "marked" library.

## 🛠 Built With 

### Tech Stack 

  libraries

  


    
React.js

    
Vite

    
Marked

  

  Languages

  


    
CSS

    
Javascript

    
HTML

  


### Key Features 

- **Textarea where you can input text**

- **Preview section that outputs the marked down text**

(back to top)


## 🚀 Live Demo 

visit [this link](https://incandescent-melba-b761fd.netlify.app) for a live demo!

(back to top)


## 💻 Getting Started 

To get a local copy up and running, follow these steps.

### Prerequisites

In order to run this project you need a browser.

### Setup

Clone this repository to your desired folder:

Example commands:

```sh

  cd my-folder

  git clone [email protected]:myaccount/my-project.git

```

### Install

Install this project with:

Example command:

```sh

  npm install

```

### Usage

To run the project, execute the following command:

```sh

  npm run dev

```

### Run tests

To run tests, click on the hamburger button and select "Markdown previewer" (note: these are the tests that FreeCodeCamp include.).

## 👥 Authors 

👤 **Tomás Esquivel**

- GitHub: [@tomasesquivelgc](https://github.com/tomasesquivelgc)

(back to top)


## 🔭 Future Features 

- [] **Expand and minimize button on topBar**

(back to top)


## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

(back to top)


## ⭐️ Show your support 

If you like this project give it a star.

(back to top)


## 🙏 Acknowledgments 

I would like to thank Microverse and my friends and family for their support.

(back to top)


## 📝 License 

This project is [MIT](./LICENSE) licensed.

(back to top)