The preview pane

To compile the note markdown into valid HTML, we will need an additional library called Marked (https://www.npmjs.com/package/marked):

1. 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.

1. 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 >link</a></p>