To compile the note markdown into valid HTML, we will need an additional library called Marked (https://www.npmjs.com/package/marked):
- Include the library in the page just after the script tag referencing Vue:
<!-- Include the library in the page --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- Add the marked library: --> <script src="https://unpkg.com/marked"></script>
marked is very easy to use--just call it with the markdown text, and it will return the corresponding HTML.
- Try the library with some markdown text:
const html = marked('**Bold** *Italic* [link]
(http://vuejs.org/)') console.log(html)
You should have the following output in the browser console:
<p><strong>Bold</strong> <em>Italic</em>
<a href="http://vuejs.org/">link</a></p>