https://github.com/altontonn/markdown-previewer
This is an app that allows users to input Markdown text in the editor, and the preview section will render the formatted HTML. The previewer supports line breaks and various Markdown syntax.
https://github.com/altontonn/markdown-previewer
marked reactjs
Last synced: 2 months ago
JSON representation
This is an app that allows users to input Markdown text in the editor, and the preview section will render the formatted HTML. The previewer supports line breaks and various Markdown syntax.
- Host: GitHub
- URL: https://github.com/altontonn/markdown-previewer
- Owner: altontonn
- License: mit
- Created: 2024-02-03T13:37:15.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-03-09T18:39:16.000Z (over 2 years ago)
- Last Synced: 2025-06-04T22:29:32.572Z (about 1 year ago)
- Topics: marked, reactjs
- Language: HTML
- Homepage:
- Size: 738 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [👥 Authors](#authors)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
**[MarkDown Previewer]** is an app that allows users to input Markdown text in the editor, and the preview section will render the formatted HTML. The previewer supports line breaks and various Markdown syntax.
React
Bootstrap
Marked
- **Allows users to input Markdown text in the editor, and the preview section will render the formatted HTML**
- [see live](https://markpreviewer.netlify.app/)
To get a local copy up and running, follow these steps.
### Prerequisites
1. Before you go ahead with this project, please make sure you have:
- Basic understanding of HTML and CSS.
- JavaScript fundamentals (object, array, conditionals, etc).
- Familiarity with JavaScript ES6 features (class syntax, arrow functions, object destructuring etc).
2. [Node and npm](https://nodejs.org/en/download/) are installed. Here are the versions I'll be using while making this tutorial:
```shell
$ node --version
v16.13.2
$ npm --version
8.1.2
$ yarn --version
1.22
```
> Installing npm adds two commands to the system—`npm` and `npx`—both of which I'll be using while making this tutorial.
3. [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) is installed. Here's the version I'll be using while making this tutorial:
```shell
$ git --version
git version 2.29.1.windows.1
```
### Setup
Clone this repository to your desired folder:
```sh
cd my-folder
git clone https://github.com/altontonn/Markdown-Previewer.git
```
### Install
Install this project with:
```sh
cd markdown-previewer
npm install
yarn install
```
### Usage
To run the project, execute the following command:
* Run `npm start` to start the server.
👤 **Newton Alumasa**
- [GitHub](https://github.com/altontonn/)
- [LinkedIn](https://www.linkedin.com/in/newton-alumasa/)
- [Twitter](https://twitter.com/AlumasaNewton)
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/altontonn/Markdown-Previewer/issues/).
If you like this project freecodecamp give it ⭐️.
I would like to thank freeCodeCamp for their ultimate support and gudance
This project is [MIT](https://github.com/altontonn/Markdown-Previewer/blob/dev/LICENSE) licensed.