1.9 (#62)

* Destroys the vue instance when the route is changed

* Add new doc helper

* Update docs

CHANGELOG.md

@@ -1,3 +1,13 @@
+
+### Bug fixes
+- Destroys the vue instance when the route is changed
+
+### Features
+- Add `!>` and `?>` doc helper.
+
+### Break change
+- Remove `!` doc helper.
+
 ## 1.8.0
 ### Bug fixes
 - Using `v-pre` skip compilation.

docs/README.md

@@ -160,10 +160,10 @@ window.$docsify = {
 ### Doc Helpers
 #### p.tip
 
-'! ' add your content will rendered as `<p class="tip">content</p>`
+`!> ` add your content will rendered as `<p class="tip">content</p>`
 
 ```markdown
-! Important **information**
+!> Important **information**
 ```
 
 It will be rendered
@@ -174,9 +174,48 @@ It will be rendered
 
 e.g.
 
-! Important **information**
+!> Important **information**
 
 
+#### p.warn
+
+```markdown
+?> todo info
+```
+
+?> todo info
+
+### Combining Vue
+We can write the Vue syntax directly in the markdown file, when the Vue library is loaded into `index.html`. Default will automatically initialize a Vue instance, of course, we can also manually.
+
+index.html
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/docsify" data-router></script>
+```
+
+```markdown
+<ul>
+  <li v-for="i in 10">{{ i }}</li>
+</ul>
+```
+
+Manual initialization
+
+```markdown
+<div>
+  <input type="text" v-model="msg">
+  <p>Hello, {{ msg }}</p>
+</div>
+
+<script>
+  new Vue({
+    el: 'main',
+    data: { msg: 'Docsify' }
+  })
+</script>
+```
+
 ## Options
 
 You can add configurations in the script tag attributes or with `window.$docsify`.

docs/zh-cn.md

@@ -166,10 +166,10 @@ window.$docsify = {
 ### 文档助手
 #### 内置「提示」语法
 
-感叹号加空格，后面接内容，会渲染成带 tip 类名的段落。
+`!>`后面接内容，会渲染成带 tip 类名的段落。
 
 ```markdown
-! 提示信息，**支持其他 markdown 语法**
+!> 提示信息，**支持其他 markdown 语法**
 ```
 
 将被渲染成
@@ -180,7 +180,51 @@ window.$docsify = {
 
 效果
 
-! 适合显示醒目的内容
+!> 适合显示醒目的内容
+
+#### 内置「警示」语法
+
+`?>`后面接内容，会渲染成带 warn 类名的段落。
+
+```markdown
+?> 警示内容样式
+```
+
+效果
+
+?> 警示内容样式
+
+### 结合 Vue
+
+`index.html` 内引入 Vue 后，可以在文档里直接写 Vue 语法。默认会自己初始化一个 Vue 示例，当然我们也可以手动初始化一个实例。
+
+index.html
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/docsify" data-router></script>
+```
+
+```markdown
+<ul>
+  <li v-for="i in 10">{{ i }}</li>
+</ul>
+```
+
+手动初始化示例
+
+```markdown
+<div>
+  <input type="text" v-model="msg">
+  <p>Hello, {{ msg }}</p>
+</div>
+
+<script>
+  new Vue({
+    el: 'main',
+    data: { msg: 'Docsify' }
+  })
+</script>
+```
 
 ## 配置参数
 

src/render.js

@@ -8,7 +8,6 @@ let OPTIONS = {}
 let markdown = marked
 let toc = []
 const CACHE = {}
-const TIP_RE = /^!\s/
 
 const renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom)
@@ -56,8 +55,12 @@ export function init (options) {
     return `<a href="${href}" title="${title || ''}">${text}</a>`
   }
   renderer.paragraph = function (text) {
-    const isTip = TIP_RE.test(text)
-    return isTip ? `<p class="tip">${text.replace(TIP_RE, '')}</p>` : `<p>${text}</p>`
+    if (/^!&gt;/.test(text)) {
+      return tpl.helper('tip', text)
+    } else if (/^\?&gt;/.test(text)) {
+      return tpl.helper('warn', text)
+    }
+    return `<p>${text}</p>`
   }
 
   if (typeof OPTIONS.markdown === 'function') {
@@ -100,12 +103,13 @@ export function renderArticle (content) {
 
   if (content && typeof Vue !== 'undefined') {
     const script = content.match('<script[^>]*?>([^<]+)</script>')
-    script && document.body.querySelector('article script').remove()
 
-    const vm = script
+    script && document.body.querySelector('article script').remove()
+    CACHE.vm && CACHE.vm.$destroy()
+    CACHE.vm = script
       ? new Function(`return ${script[1].trim()}`)()
       : new Vue({ el: 'main' }) // eslint-disable-line
-    vm && vm.$nextTick(_ => event.scrollActiveSidebar())
+    CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
   }
   if (OPTIONS.auto2top) setTimeout(() => event.scroll2Top(OPTIONS.auto2top), 0)
 }

src/themes/basic/_layout.css

@@ -354,6 +354,12 @@ body.sticky {
   }
 }
 
+.markdown-section p.warn {
+  padding: 1em;
+  background: rgba($color-primary, 0.1);
+  border-radius: 2px;
+}
+
 body.close {
   .sidebar {
     transform: translateX(-$sidebar-width);

src/tpl.js

@@ -72,3 +72,6 @@ export function tree (toc, tpl = '') {
   return tpl
 }
 
+export function helper (className, content) {
+  return `<p class="${className}">${content.slice(5).trim()}</p>`
+}