markdown display of email body

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.4",
     "date-fns": "^2.11.0",
+    "marked": "^0.8.1",
     "vue": "^3.0.0-alpha.9"
   },
   "devDependencies": {

src/components/MailView.vue

@@ -1,13 +1,20 @@
 <template>
-  <div>
+  <div class="email">
-    From: {{email.from}}<br>
+    <div>From: {{email.from}}</div>
-    Subject: <strong>{{email.subject}}</strong>
+    <div>Subject: <strong>{{email.subject}}</strong></div>
-    <p>{{email.body}}</p>
+    <div v-html="emailMarkdown" />
   </div>
 </template>
 
 <script>
+  import marked from 'marked';
   export default {
+    setup({email}) {
+      let emailMarkdown = marked(email.body);
+      return {
+        emailMarkdown
+      }
+    },
     props: {
       email: {
         type: Object
@@ -17,4 +24,7 @@
 </script>
 
 <style scoped>
+.email {
+  text-align: left;
+}
 </style>

yarn.lock

@@ -4745,6 +4745,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.1.tgz#a233f39572fab15ede53a3c3be8a139bff86d2dd"
+  integrity sha512-tZfJS8uE0zpo7xpTffwFwYRfW9AzNcdo04Qcjs+C9+oCy8MSRD2reD5iDVtYx8mtLaqsGughw/YLlcwNxAHA1g==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"