docs: add vue-template prop

meteorlxy · Feb 17, 2019 · 393fd2c · 393fd2c
1 parent 7a21ee2
commit 393fd2c
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 6 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -25,6 +25,10 @@ module.exports = {
     },
   },
 
+  alias: {
+    'vue$': 'vue/dist/vue.esm.js',
+  },
+
   themeConfig: {
     repo: 'meteorlxy/vue-showdown',
 

diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -179,6 +179,19 @@ Extensions of showdown. Docs [here](https://github.com/showdownjs/showdown#exten
 Check the [Advance - Extensions](./#extensions-2) section for details.
 :::
 
+### vueTemplate <Badge text="v2.4.0+"/>
+
+Treat the parsed HTML string as vue template. This will allow you to use vue template syntax in your markdown.
+
+- type: `Boolean`
+- default: `false`
+
+::: warning ATTENSION
+If you set it to `true`, you have to use the full (runtime + compiler) build of Vue, as we need to compile templates on the client. See [Runtime + Compiler vs. Runtime-only](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only).
+
+If you have similar request as [#5](https://github.com/meteorlxy/vue-showdown/issues/5), you can enable this feature.
+:::
+
 ## Advance
 
 ### Showdown library

diff --git a/docs/playground/README.md b/docs/playground/README.md
@@ -13,13 +13,30 @@ sidebar: auto
 <section class="markdown-output">
   <VueShowdown
     :markdown="markdownText"
-    :options="options"/>
+    :options="options"
+    :vue-template="props.vueTemplate"/>
 </section>
 
+## Set vue-showdown props
+
+<ul class="vue-showdown-props">
+  <li
+    v-for="prop in Object.keys(props)"
+    :key="prop"
+  >
+    <span>{{ prop }}</span>
+    <input
+      v-model="props[prop]"
+      :type="typeof props[prop] === 'boolean' ? 'checkbox' : 'text'">
+  </li>
+</ul>
+
 ## Set showdown options
 
 <ul class="showdown-options">
-  <li v-for="opt in Object.keys(options)">
+  <li
+    v-for="opt in Object.keys(options)"
+    :key="opt">
     <span>{{ opt }}</span>
     <input
       v-model="options[opt]"
@@ -31,7 +48,20 @@ sidebar: auto
 export default {
   data () {
     return {
-      markdownText: '### Hello, Vue Showdown! :tada: \n\nInput your markdown here and get the HTML right now!\n\nSet the `emoji` option below to enable emoji parsing! :smile:',
+      markdownText: `\
+### Hello, Vue Showdown! :tada:
+
+Input your markdown here and get the HTML right now!
+
+Set the \`emoji\` option below to enable emoji parsing! :smile:
+
+Set the \`vueTemplate\` prop below to enable vue template parsing!
+
+<span v-for="n in 5" :key="n" v-text="n"/>`,
+
+      props: {
+        vueTemplate: false,
+      },
 
       options: {
         omitExtraWLInCodeBlocks: false,

diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md
@@ -179,6 +179,19 @@ Vue.use(VueShowdown, {
 前往章节 [进阶用法 - Extensions](./#extensions-2) 查看使用细节。
 :::
 
+### vueTemplate <Badge text="v2.4.0+"/>
+
+将解析后的 HTML 字符串当作 Vue 模板，允许你在 Markdown 中使用 Vue 模板语法。
+
+- 类型： `Boolean`
+- 默认值： `false`
+
+::: warning 注意
+如果你设置该 prop 为 `true`，你需要使用 Vue 完整版（运行时 + 编译器），因为我们需要在客户端编译模板。查看 [运行时 + 编译器 vs. 只包含运行时](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6)。
+
+当你有类似 [#5](https://github.com/meteorlxy/vue-showdown/issues/5) 的需求时，可以尝试使用该功能。
+:::
+
 ## 进阶用法
 
 ### Showdown library

diff --git a/docs/zh/playground/README.md b/docs/zh/playground/README.md
@@ -13,10 +13,25 @@ sidebar: auto
 <section class="markdown-output">
   <VueShowdown
     :markdown="markdownText"
-    :options="options"/>
+    :options="options"
+    :vue-template="props.vueTemplate"/>
 </section>
 
-## 设置 showdown 的 options
+## 设置 vue-showdown props
+
+<ul class="vue-showdown-props">
+  <li
+    v-for="prop in Object.keys(props)"
+    :key="prop"
+  >
+    <span>{{ prop }}</span>
+    <input
+      v-model="props[prop]"
+      :type="typeof props[prop] === 'boolean' ? 'checkbox' : 'text'">
+  </li>
+</ul>
+
+## 设置 showdown options
 
 <ul class="showdown-options">
   <li v-for="opt in Object.keys(options)">
@@ -31,7 +46,20 @@ sidebar: auto
 export default {
   data () {
     return {
-      markdownText: '### Hello, Vue Showdown! :tada: \n\n输入你的 Markdown 代码，立即得到相应的 HTML！\n\n开启下面的`emoji`选项，启用emoji解析！ :smile:',
+      markdownText: `\
+### Hello, Vue Showdown! :tada:
+
+输入你的 Markdown 代码，立即得到相应的 HTML！
+
+开启下面的 \`emoji\` 选项，启用 emoji 解析！ :smile:
+
+开启下面的 \`vueTemplate\` Prop，启用 Vue 模板解析！
+
+<span v-for="n in 5" :key="n" v-text="n"/>`,
+
+      props: {
+        vueTemplate: false,
+      },
 
       options: {
         omitExtraWLInCodeBlocks: false,