# React Markdown Previewer! ![freeCodeCamp Logo](https://freecodecamp.org/favicon-32x32.png) ## About This is the solution for [Build a Markdown Previewer][fcc] exercice, build using: - [Vue 3](https://vuejs.org) - [marked.js](https://marked.js.org) - [highlight.js](https://highlightjs.org/) [fcc]: https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer ## Note > This section is written both for document my progress and for satisfy the FCC tests. Total time for this project is around 4h. However, all the test cases was passed around 2h. I spent the remaining time to try (and failed) to integrate some code editor such as Ace, Monator and CodeMirror to make this `textarea` works better. FCC test suit **doens't work well with Vue `v-mode`**, hence, I need to check their test code and use below cheat to _make it happies._ ```js mounted() { //... // hack to make FCC test work! const editor = document.getElementById("editor"); const preview = document.getElementById("preview"); const dispatch = editor.dispatchEvent; editor.dispatchEvent = (ev) => { if (ev.type == "keyup") { ev.preventDefault(); this.text = editor.value; preview.innerHTML = this.renderMD(); return; } dispatch(ev); }; }, ```