The following application is a markdown previewer that uses the MarkedJS package to parse and compile markdown and is built using Parcel, Sass and ReactJS.
This project was made for the Front End Development Libraries Certification on Free Code Camp.
Users should be able to:
-
View the optimal layout depending on their device's screen size
-
Turn GitHub flavored markdown into rendered HTML in a separate display element
-
Interpret carriage returns
-
Display sample markdown on first load in the editor field and the corresponding rendered HTML in the preview field
Desktop View
Light theme
Dark theme
Mobile View
Light theme
Dark theme
- Project URL: Github Repository
- Live App URL: Github Page
This project was based on the sample project provided by Free Code Camp as an example output and has a number of additional features to distinguish itself from the provided sample output, these include:
- The application was built from scratch using ReactJS
- Parcel was used to bundle all the files to reduce file size
- The design was based off of the Dillinger.io markdown editor.
- Has light and dark mode theming
- Pulls a .txt copy of the README.md file for the initial load sample using the fetch API
- And is mobile responsive
You are going to need the latest version of NPM in order to install this project on your machine.
- npm
npm install npm@latest -g
- Clone the repository
git clone https://github.com/N-Nikolaev/markdown-previewer.git
- Install NPM packages
npm install
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
- SASS - CSS preprocessor
- Parcel - Web application bundler
- ReactJS - JavaScript library / framework
- FontAwesome - Icon toolkit
- MarkedJS - Markdown parser and compiler
- DOMPurify - DOM only XSS sanitizer
- PrismJS - Light-weight syntax highlighter
- Favicon.io - Favicon generator
- Flatuicolors.io - Premade color palettes
Distributed under the MIT License. See LICENSE for more information.
- FCC - Markdown Previewer Example Project
- React passing data between siblings
- Composition vs Inheritance
- Context API
- Using marked in React
- How to write secure code in React
- Beyond Console Log in 100 Seconds
- Get PrismJS working in React
- Github - Nikolay Nikolaev
- Frontend Mentor - @N-Nikolaev