Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/faizbyp/render-md
Markdown Previewer - Project for the FCC Front End Development Libraries Certification
https://github.com/faizbyp/render-md
Last synced: 8 days ago
JSON representation
Markdown Previewer - Project for the FCC Front End Development Libraries Certification
- Host: GitHub
- URL: https://github.com/faizbyp/render-md
- Owner: faizbyp
- Created: 2024-05-29T09:45:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-31T16:34:01.000Z (7 months ago)
- Last Synced: 2024-06-01T16:49:58.125Z (7 months ago)
- Language: JavaScript
- Homepage: https://render-md.vercel.app
- Size: 137 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Render.md
https://render-md.vercel.app/
A Markdown Previewer made using React JS and Bootstrap. The initial text state was saved inside a JavaScript string and then imported into the `App` component to be edited. When the user edits the `textarea`, the previewer will automatically be updated using `useState`. Then the plain markdown text will be converted into HTML elements in the preview element. The user can also copy the text with a button click.
## User Stories
User Story #1: I can see a `textarea` element with a corresponding `id="editor"`.
User Story #2: I can see an element with a corresponding `id="preview"`.
User Story #3: When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the `textarea`.
User Story #4: When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked).
User Story #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.
User Story #6: When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element.
Optional Bonus (you do not need to make this test pass): My markdown previewer interprets carriage returns and renders them as `br` (line break) elements.
## All Tests Passed
Visit the [test deployment](https://jocular-stroopwafel-c3e932.netlify.app/)
