refactor: improve markdown example

examples/markdownit/nuxt.config.js

@@ -1,16 +1,8 @@
 module.exports = {
   modules: [
     '@nuxtjs/markdownit'
+  ],
+  plugins: [
+    '~/plugins/md-it'
   ]
-  // [optional] markdownit options
-  // See https://github.com/markdown-it/markdown-it
-  // markdownit: {
-  //   preset: 'default',
-  //   linkify: true,
-  //   breaks: true,
-  //   use: [
-  //     'markdown-it-container',
-  //     'markdown-it-attrs'
-  //   ]
-  // }
 }

examples/markdownit/package.json

@@ -10,5 +10,8 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start"
+  },
+  "devDependencies": {
+    "jstransformer-markdown-it": "^2.0.0"
   }
 }

examples/markdownit/pages/pug.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
   div
     h1 Pug Page
-    div(language="md") Current route is: {{ $route.name }}
-    div(language="md") Data model is: {{ model }}
+    :markdown-it()
+      ## Current route is: {{ $route.name }}
+    div(v-html="$md.render(model)")
+
     br
     nuxt-link(to='/') Back Home
 </template>
@@ -11,7 +13,7 @@
 export default {
   data() {
     return {
-      model: 'I am pug'
+      model: '## Title h2\n### title h3\n\nLong text Long text Long text Long text Long text Long text Long text Long text Long text \n\n* gimme a list item\n* and one more yeehaw'
     }
   }
 }

examples/markdownit/plugins/md-it.js

@@ -0,0 +1,5 @@
+import MarkdownIt from 'markdown-it'
+
+export default ({ app }, inject) => {
+  inject('md', new MarkdownIt())
+}