1.9 (#62)

* Destroys the vue instance when the route is changed

* Add new doc helper

* Update docs

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>`
+}