Markdown-previewer

• Markdown previewer is an app that allows users to write GitHub flavored markdown into an editor, and to preview it instantly on the Previewer(output).
• The editor is a controlled input by the useState hook that updates its value as the writer is typing.
• The GitHub flavored markdown is parsed using the 'react-marked'. The option break has been set to true with marked.setOptions(), so the markdown previewer interprets carriage returns and renders them as br elements.
• The main challenge on this project was to find out about dangerouslySetInnerHTML to render the raw HTML, we get from marked, properly. Without it, the text or content coming from the marked will be just a string, but when we use dangerouslySetInnerHTML React becomes aware of the HTML tags and renders them properly.

Resources

• Basic writing and formatting syntax of GitHub flavored markdown
• The react-marked documentation

Installation

• First, use npm install to install all the dependencies.
• Start the devolopment server npm start.
• For more information please refer to react-app

Try it !!

https://redapy.github.io/Markdown-previewer/