Markdown Previewer

See it here: markdown-previewer-reactjs-fcc.netlify.app

A markdown previewer that takes in text input by the user following markdown syntax and renders it in actual processed HTML.

Technologies

• React
• CSS

Libraries

• Marked
• DOMpurify

---

License

MIT

---

Project Diary

• 11/01/2022
  • It took me about two hours to "complete" (it's never really finished, you just let it go...) the logic and make it functional. I've made use of the React Effect Hook for the first time in a project, as I have only just learned that at School of Code.
  • There are essentially two components: the editor and the previewer, although they are both rendered in the App component which gets, in turn, rendered on the HTML page.
  • I had to import the Marked library in order to parse the input text and also use the dangerouslySetInnerHTML attribute, which I wasn't familiar with.
  • Marked.JS recommends using a HTML sanitiser. To this purpose, I have imported DOMpurifier, but I have not implemented it yet.
• 14/01/2022
  • App is functional and deployed on Netlify. I have tweaked the styling to make it more presentable, but did not go for anything sophisticated as I thought it would be unnecessary. Demo gif also updated.