You can play with the application yourself at this link.
This application simply translates markdown in the editor to the appropriate HTML, and renders it to the Preview section.
- Vite: A build tool that offers fast development and optimized production builds for modern web applications.
- React: A JavaScript library for building user interfaces, allowing for the creation of dynamic and interactive components.
- Bootstrap: A front-end framework that provides pre-designed UI components and responsive layout utilities.
- Marked: A JavaScript Library used to parse and render Markdown content into HTML.
- Marked-React: A JavaScript Library that uses Marked to render actual React Elements instead of using
dangerouslySetInnerHTML.
- 'src/': At the heart of the application, the 'src/' directory houses various project assets, the index.jsx file for routing, the App.jsx component for high-level structure definition, and the index.css file for application-wide styling.
- 'components/' : This directory serves as a container for reusable components that are used throughout the application. In this example both the Editor and Previewer are their own components and both housed in their own folders in the 'components/' folder. Each component in the 'components/' folder is housed alongside it's CSS-Styling for simplicity.
Feel free to contact via email!
brian.phartnettjr@gmail.com
- There are no known issues at this time, if you find any feel free to let me know :)
- Translate Markdown Into Valid HTML.:white_check_mark:
- Render Translated Markdown in the Preview Section of the Webpage.:white_check_mark:
- Have Markdown pre-filled in the editor to display the capabilities of the app.:white_check_mark:
- Dark Mode/Light Mode Functionality. As is, this application is like getting flashbanged.