From 653c2f0e3c275f7a579c04d7d922b54b9a3d2d70 Mon Sep 17 00:00:00 2001
From: Clark Du <clark.duxin@gmail.com>
Date: Mon, 27 Nov 2017 11:30:20 +0800
Subject: [PATCH] refactor: improve markdown example

---
 examples/markdownit/nuxt.config.js   | 14 +++-----------
 examples/markdownit/package.json     |  3 +++
 examples/markdownit/pages/pug.vue    |  8 +++++---
 examples/markdownit/plugins/md-it.js |  5 +++++
 4 files changed, 16 insertions(+), 14 deletions(-)
 create mode 100644 examples/markdownit/plugins/md-it.js

diff --git a/examples/markdownit/nuxt.config.js b/examples/markdownit/nuxt.config.js
index 5660fb118d..a1d31f09bd 100644
--- a/examples/markdownit/nuxt.config.js
+++ b/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'
-  //   ]
-  // }
 }
diff --git a/examples/markdownit/package.json b/examples/markdownit/package.json
index 76056fdcbb..bdbe75cd3b 100644
--- a/examples/markdownit/package.json
+++ b/examples/markdownit/package.json
@@ -10,5 +10,8 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start"
+  },
+  "devDependencies": {
+    "jstransformer-markdown-it": "^2.0.0"
   }
 }
diff --git a/examples/markdownit/pages/pug.vue b/examples/markdownit/pages/pug.vue
index e15883bc67..fed7edda72 100644
--- a/examples/markdownit/pages/pug.vue
+++ b/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'
     }
   }
 }
diff --git a/examples/markdownit/plugins/md-it.js b/examples/markdownit/plugins/md-it.js
new file mode 100644
index 0000000000..3080f20046
--- /dev/null
+++ b/examples/markdownit/plugins/md-it.js
@@ -0,0 +1,5 @@
+import MarkdownIt from 'markdown-it'
+
+export default ({ app }, inject) => {
+  inject('md', new MarkdownIt())
+}