Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johndev19/free-codecamp-markdown-previewer
This project is part of the FreeCodeCamp Front End Development Libraries Certification. It's a Markdown Previewer that allows users to input Markdown text and see the rendered HTML output in real-time.
https://github.com/johndev19/free-codecamp-markdown-previewer
codecamp css free-codecamp html javascript markdown-previewer react-js
Last synced: 1 day ago
JSON representation
This project is part of the FreeCodeCamp Front End Development Libraries Certification. It's a Markdown Previewer that allows users to input Markdown text and see the rendered HTML output in real-time.
- Host: GitHub
- URL: https://github.com/johndev19/free-codecamp-markdown-previewer
- Owner: JohnDev19
- License: mit
- Created: 2024-07-16T04:59:35.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-07-16T05:01:30.000Z (2 months ago)
- Last Synced: 2024-09-24T02:08:11.292Z (4 days ago)
- Topics: codecamp, css, free-codecamp, html, javascript, markdown-previewer, react-js
- Language: CSS
- Homepage: https://johndev19.github.io/Free-CodeCamp-Markdown-Previewer/
- Size: 5.86 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Markdown Previewer
## Project Overview
This project is part of the FreeCodeCamp Front End Development Libraries Certification. It's a Markdown Previewer that allows users to input Markdown text and see the rendered HTML output in real-time.
## Features
- Real-time Markdown to HTML conversion
- Support for GitHub Flavored Markdown
-
## User Stories
This project fulfills the following user stories:
1. I can see a `textarea` element with a corresponding `id="editor"`.
2. I can see an element with a corresponding `id="preview"`.
3. When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea.
4. When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type.
5. When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
6. When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element.
## Technologies Used
- HTML
- CSS
- JavaScript
- React
- Marked.js library for Markdown parsing
## How to Use
1. Clone this repository to your local machine.
2. Open `index.html` in your web browser.
3. Start typing or pasting Markdown content into the editor on the left.
4. See the rendered HTML output in the preview pane on the right.
## Future Enhancements
- Add a toolbar for common Markdown formatting options
- Implement a dark mode toggle
- Add the ability to save and load Markdown files
## Acknowledgements
This project was completed as part of the [FreeCodeCamp Front End Development Libraries Certification](https://www.freecodecamp.org/learn/front-end-development-libraries/).
## License
This project is open source and available under the [MIT License](LICENSE).