-> v1.10.5

* Destroys the vue instance when the route is changed

* Add new doc helper

* Update docs

CHANGELOG.md

@@ -1,3 +1,39 @@
+## 1.10.5
+### Bug fixes
+- fix initialize the Vue instance
+
+## 1.10.4
+### Bug fixes
+- fix execute script
+
+## 1.10.3
+### Bug fixes
+- compatible vuep QingWei-Li/vuep/issues/2
+- fix sidebar scroll, fixed #63
+
+## 1.10.2
+### Bug fixes
+- Fix render emojis again
+
+## 1.10.1
+### Bug fixes
+- Fix render emojis
+
+## 1.10.0
+### Features
+- Support emoji :laughing:
+
+## 1.9.0
+
+### 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.

README.md

@@ -22,6 +22,7 @@
 - Simple and lightweight (~13kB gzipped)
 - Multiple themes
 - Not build static html files
+- Support emoji :laughing:
 
 ## Quick start
 Create a `index.html` and using `hash router`.

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/_coverpage.md

@@ -1,12 +1,13 @@
 ![logo](_media/icon.svg)
 
-# docsify <small>1.8.0</small>
+# docsify <small>1.10.5</small>
 
 > A magical documentation site generator.
 
 - Simple and lightweight (~13kB gzipped)
-- Multiple themes
 - Not build static html files
+- Support emoji :laughing:
+- Multiple themes
 
 
 [GitHub](https://github.com/QingWei-Li/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>
+```
 
 ## 配置参数
 

lib/docsify.js

@@ -168,6 +168,12 @@ var merge = Object.assign || function (to) {
   return to
 };
 
+function emojify (text) {
+  return text
+    .replace(/:(\w*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}
+
 /**
  * Active sidebar when scroll
  * @link https://buble.surge.sh/
@@ -178,6 +184,8 @@ function scrollActiveSidebar () {
   var hoveredOverSidebar = false;
   var anchors = document.querySelectorAll('.anchor');
   var sidebar = document.querySelector('aside.sidebar');
+  var sidebarHeight = sidebar.clientHeight;
+
   var nav = {};
   var lis = sidebar.querySelectorAll('li');
   var active = sidebar.querySelector('li.active');
@@ -216,7 +224,25 @@ function scrollActiveSidebar () {
 
     li.classList.add('active');
     active = li;
-    !hoveredOverSidebar && !sticky.noSticky && active.scrollIntoView(false);
+
+    // scroll into view
+    // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+    if (!hoveredOverSidebar && !sticky.noSticky) {
+      var currentPageOffset = 0;
+      var currentActiveOffset = active.offsetTop + active.clientHeight + 40;
+      var currentActiveIsInView = (
+        active.offsetTop >= sidebar.scrollTop &&
+        currentActiveOffset <= sidebar.scrollTop + sidebarHeight
+      );
+      var linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight;
+      var newScrollTop = currentActiveIsInView
+        ? sidebar.scrollTop
+        : linkNotFurtherThanSidebarHeight
+          ? currentPageOffset
+          : currentActiveOffset - sidebarHeight;
+
+      sidebar.scrollTop = newScrollTop;
+    }
   }
 
   window.removeEventListener('scroll', highlight);
@@ -2463,11 +2489,14 @@ function tree (toc, tpl) {
   return tpl
 }
 
+function helper (className, content) {
+  return ("<p class=\"" + className + "\">" + (content.slice(5).trim()) + "</p>")
+}
+
 var OPTIONS$1 = {};
 var markdown = marked;
 var toc = [];
 var CACHE = {};
-var TIP_RE = /^!\s/;
 
 var renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom);
@@ -2507,7 +2536,7 @@ function init (options) {
 
     var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup);
 
-    return ("<pre v-pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
+    return ("<pre v-pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + (hl.replace(/:/g, '__colon__')) + "</code></pre>")
   };
   renderer.link = function (href, title, text) {
     if (OPTIONS$1.router && !/:/.test(href)) {
@@ -2517,8 +2546,12 @@ function init (options) {
     return ("<a href=\"" + href + "\" title=\"" + (title || '') + "\">" + text + "</a>")
   };
   renderer.paragraph = function (text) {
-    var isTip = TIP_RE.test(text);
-    return isTip ? ("<p class=\"tip\">" + (text.replace(TIP_RE, '')) + "</p>") : ("<p>" + text + "</p>")
+    if (/^!&gt;/.test(text)) {
+      return helper('tip', text)
+    } else if (/^\?&gt;/.test(text)) {
+      return helper('warn', text)
+    }
+    return ("<p>" + text + "</p>")
   };
 
   if (typeof OPTIONS$1.markdown === 'function') {
@@ -2527,6 +2560,10 @@ function init (options) {
   } else {
     markdown.setOptions(merge({ renderer: renderer }, OPTIONS$1.markdown));
   }
+
+  var md = markdown;
+
+  markdown = function (text) { return emojify(md(text)); };
 }
 
 /**
@@ -2560,13 +2597,19 @@ function renderArticle (content) {
   if (!OPTIONS$1.sidebar && !OPTIONS$1.loadSidebar) { renderSidebar(); }
 
   if (content && typeof Vue !== 'undefined') {
-    var script = content.match('<script[^>]*?>([^<]+)</script>');
-    script && document.body.querySelector('article script').remove();
+    CACHE.vm && CACHE.vm.$destroy();
 
-    var vm = script
-      ? new Function(("return " + (script[1].trim())))()
+    var script = [].slice.call(
+      document.body.querySelectorAll('article>script'))
+        .filter(function (script) { return !/template/.test(script.type); }
+      )[0];
+    var code = script ? script.innerText.trim() : null;
+
+    script && script.remove();
+    CACHE.vm = code
+      ? new Function(("return " + code))()
       : new Vue({ el: 'main' }); // eslint-disable-line
-    vm && vm.$nextTick(function (_) { return scrollActiveSidebar(); });
+    CACHE.vm && CACHE.vm.$nextTick(function (_) { return scrollActiveSidebar(); });
   }
   if (OPTIONS$1.auto2top) { setTimeout(function () { return scroll2Top(OPTIONS$1.auto2top); }, 0); }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "1.8.0",
+  "version": "1.10.5",
   "description": "A magical documentation generator.",
   "main": "lib/docsify.js",
   "files": [

src/event.js

@@ -10,6 +10,8 @@ export function scrollActiveSidebar () {
   let hoveredOverSidebar = false
   const anchors = document.querySelectorAll('.anchor')
   const sidebar = document.querySelector('aside.sidebar')
+  const sidebarHeight = sidebar.clientHeight
+
   const nav = {}
   const lis = sidebar.querySelectorAll('li')
   let active = sidebar.querySelector('li.active')
@@ -48,7 +50,25 @@ export function scrollActiveSidebar () {
 
     li.classList.add('active')
     active = li
-    !hoveredOverSidebar && !sticky.noSticky && active.scrollIntoView(false)
+
+    // scroll into view
+    // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+    if (!hoveredOverSidebar && !sticky.noSticky) {
+      const currentPageOffset = 0
+      const currentActiveOffset = active.offsetTop + active.clientHeight + 40
+      const currentActiveIsInView = (
+        active.offsetTop >= sidebar.scrollTop &&
+        currentActiveOffset <= sidebar.scrollTop + sidebarHeight
+      )
+      const linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight
+      const newScrollTop = currentActiveIsInView
+        ? sidebar.scrollTop
+        : linkNotFurtherThanSidebarHeight
+          ? currentPageOffset
+          : currentActiveOffset - sidebarHeight
+
+      sidebar.scrollTop = newScrollTop
+    }
   }
 
   window.removeEventListener('scroll', highlight)

src/render.js

@@ -2,13 +2,12 @@ import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
 import * as event from './event'
-import { genTree, getRoute, isMobile, slugify, merge } from './util'
+import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'
 
 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)
@@ -46,7 +45,7 @@ export function init (options) {
   renderer.code = function (code, lang = '') {
     const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
 
-    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
+    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl.replace(/:/g, '__colon__')}</code></pre>`
   }
   renderer.link = function (href, title, text) {
     if (OPTIONS.router && !/:/.test(href)) {
@@ -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') {
@@ -66,6 +69,10 @@ export function init (options) {
   } else {
     markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
   }
+
+  const md = markdown
+
+  markdown = text => emojify(md(text))
 }
 
 /**
@@ -99,13 +106,19 @@ export function renderArticle (content) {
   if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
 
   if (content && typeof Vue !== 'undefined') {
-    const script = content.match('<script[^>]*?>([^<]+)</script>')
-    script && document.body.querySelector('article script').remove()
+    CACHE.vm && CACHE.vm.$destroy()
 
-    const vm = script
-      ? new Function(`return ${script[1].trim()}`)()
+    const script = [].slice.call(
+      document.body.querySelectorAll('article>script'))
+        .filter(script => !/template/.test(script.type)
+      )[0]
+    const code = script ? script.innerText.trim() : null
+
+    script && script.remove()
+    CACHE.vm = code
+      ? new Function(`return ${code}`)()
       : 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

@@ -7,6 +7,11 @@
   -webkit-font-smoothing: antialiased;
 }
 
+.emoji {
+  height: 1.2em;
+  vertical-align: middle;
+}
+
 .progress {
   background-color: $color-primary;
   height: 2px;
@@ -188,16 +193,7 @@ main {
   transition: transform 250ms ease-out;
   width: $sidebar-width;
   z-index: 20;
-  margin-bottom: 40px;
-
-  &::after {
-    content: '';
-    position: inherit;
-    left: calc($sidebar-width - 1px);
-    top: 0;
-    height: 100vh;
-    border-right: 1px solid rgba(0, 0, 0, .07);
-  }
+  border-right: 1px solid rgba(0, 0, 0, .07);
 
   > h1 {
     text-align: center;
@@ -354,6 +350,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);
@@ -373,15 +375,6 @@ body.close {
     position: fixed;
   }
 
-  .sidebar {
-    margin-bottom: 0;
-    border-right: 1px solid rgba(0, 0, 0, .07);
-
-    &::after {
-      content: none;
-    }
-  }
-
   nav {
     margin-top: 16px;
   }

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

src/util.js

@@ -157,3 +157,10 @@ export const merge = Object.assign || function (to) {
 
   return to
 }
+
+export function emojify (text) {
+  return text
+    .replace(/:(\w*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}
+