chore: add changelog 4.3.3

* fixed sidebar item inactive issue & fixed _sidebar.md 404 issue & smooth scroll

* sidebar load fix

CHANGELOG.md

@@ -1,3 +1,111 @@
+<a name="4.3.3"></a>
+## [4.3.3](https://github.com/QingWei-Li/docsify/compare/v4.3.2...v4.3.3) (2017-09-06)
+
+
+### Bug Fixes
+
+* **buble.css:** tweaks code block style, fixed [#249](https://github.com/QingWei-Li/docsify/issues/249) ([9d43051](https://github.com/QingWei-Li/docsify/commit/9d43051))
+
+
+### Features
+
+* add doc for react and vue demo box plugin ([#247](https://github.com/QingWei-Li/docsify/issues/247)) ([f0aca19](https://github.com/QingWei-Li/docsify/commit/f0aca19))
+
+
+
+<a name="4.3.2"></a>
+## [4.3.2](https://github.com/QingWei-Li/docsify/compare/v4.3.1...v4.3.2) (2017-09-01)
+
+
+### Bug Fixes
+
+* sidebar highlight ([f82f419](https://github.com/QingWei-Li/docsify/commit/f82f419))
+
+
+### Features
+
+* add Edit on github plugin (thanks [@njleonzhang](https://github.com/njleonzhang)) ([a0e1ea8](https://github.com/QingWei-Li/docsify/commit/a0e1ea8))
+
+
+
+<a name="4.3.1"></a>
+## [4.3.1](https://github.com/QingWei-Li/docsify/compare/v4.2.9...v4.3.1) (2017-08-30)
+
+
+### Features
+
+* **markdown:** supports mermaid [#137](https://github.com/QingWei-Li/docsify/issues/137) ([f4800e0](https://github.com/QingWei-Li/docsify/commit/f4800e0))
+
+
+
+<a name="4.3.0"></a>
+# [4.3.0](https://github.com/QingWei-Li/docsify/compare/v4.2.9...v4.3.0) (2017-08-17)
+
+
+### Features
+
+* **markdown:** supports mermaid [#137](https://github.com/QingWei-Li/docsify/issues/137) ([f4800e0](https://github.com/QingWei-Li/docsify/commit/f4800e0))
+
+
+
+<a name="4.2.9"></a>
+## [4.2.9](https://github.com/QingWei-Li/docsify/compare/v4.2.8...v4.2.9) (2017-08-15)
+
+
+### Bug Fixes
+
+* ensure document ready before init Docsify [#233](https://github.com/QingWei-Li/docsify/issues/233)
+
+<a name="4.2.8"></a>
+## [4.2.8](https://github.com/QingWei-Li/docsify/compare/v4.2.7...v4.2.8) (2017-08-10)
+
+
+### Features
+
+* **compiler:** support for setting target attribute for link, fixed [#230](https://github.com/QingWei-Li/docsify/issues/230) ([7f270f9](https://github.com/QingWei-Li/docsify/commit/7f270f9))
+
+
+
+<a name="4.2.7"></a>
+## [4.2.7](https://github.com/QingWei-Li/docsify/compare/v4.2.4...v4.2.7) (2017-08-05)
+
+
+### Bug Fixes
+
+* **release:** release shell ([628e211](https://github.com/QingWei-Li/docsify/commit/628e211))
+* **style:** nowrap => pre-wrap, fixed [#228](https://github.com/QingWei-Li/docsify/issues/228) ([a88252c](https://github.com/QingWei-Li/docsify/commit/a88252c))
+
+
+
+<a name="4.2.6"></a>
+## [4.2.6](https://github.com/QingWei-Li/docsify/compare/v4.2.4...v4.2.6) (2017-07-27)
+
+
+### Bug Fixes
+
+* **css:** hide the nav when the content has not yet been loaded ([1fa1619](https://github.com/QingWei-Li/docsify/commit/1fa1619))
+* **release:** release shell ([628e211](https://github.com/QingWei-Li/docsify/commit/628e211))
+
+
+
+<a name="4.2.4"></a>
+## [4.2.4](https://github.com/QingWei-Li/docsify/compare/v4.2.2...v4.2.4) (2017-07-26)
+
+
+### Bug Fixes
+
+* **render:** Remove getRootNode to be compatible with the lower version of Chrome, fixed [#225](https://github.com/QingWei-Li/docsify/issues/225) ([b8dd346](https://github.com/QingWei-Li/docsify/commit/b8dd346))
+
+<a name="4.2.3"></a>
+## [4.2.3](https://github.com/QingWei-Li/docsify/compare/v4.2.2...v4.2.3) (2017-07-26)
+
+
+### Features
+
+* **search:** Supports the max depth of the search headline, fixed [#223](https://github.com/QingWei-Li/docsify/issues/223), resolve [#129](https://github.com/QingWei-Li/docsify/issues/129) ([b7b589b](https://github.com/QingWei-Li/docsify/commit/b7b589b))
+
+
+
 <a name="4.2.2"></a>
 ## [4.2.2](https://github.com/QingWei-Li/docsify/compare/v4.2.1...v4.2.2) (2017-07-24)
 

README.md

@@ -20,6 +20,7 @@
 
 - [Documentation](https://docsify.js.org)
 - [CLI](https://github.com/QingWei-Li/docsify-cli)
+- CDN: [UNPKG](https://unpkg.com/docsify/) | [jsDelivr](https://cdn.jsdelivr.net/npm/docsify/)
 
 ## Features
 
@@ -74,6 +75,7 @@ These projects are using docsify to generate their sites. Pull requests welcome
 | [palettify](https://dobromir-hristov.github.io/palettify/) | A color palette effects assistant |
 | [commitlint](https://marionebl.github.io/commitlint/) | Lint commit messages |
 | [vue-data-tables](https://github.com/njleonzhang/vue-data-tables/) | A simple and customizable data table，based on vue2 and element-ui. |
+| [Noty](http://ned.im/noty/) | A Dependency-free notification library |
 
 ## Similar projects
 

build/release.sh

@@ -30,15 +30,16 @@ if [[ $REPLY =~ ^[Yy]$ ]]; then
   # commit
   git add -A
   git commit -m "[build] $VERSION $RELEASE_TAG"
-  npm version $VERSION --message "[release] $VERSION $RELEASE_TAG"
+  npm --no-git-tag-version version $VERSION --message "[release] $VERSION $RELEASE_TAG"
 
   # changelog
-  node_modules/.bin/conventional-changelog -p angular -i CHANGELOG.md -s -r 2
+  node_modules/.bin/conventional-changelog -p angular -i CHANGELOG.md -s
 
   git add .
   git commit -m "chore: add changelog $VERSION"
 
   # publish
+  git tag v$VERSION
   git push origin refs/tags/v$VERSION
   git push
   if [[ -z $RELEASE_TAG ]]; then

dev.html

@@ -29,7 +29,7 @@
     loadSidebar: true,
     coverpage: true,
     name: 'docsify',
-    subMaxLevel: 0,
+    subMaxLevel: 2,
     mergeNavbar: true,
     formatUpdated: '{MM}/{DD} {HH}:{mm}',
     plugins: [

docs/_coverpage.md

@@ -1,6 +1,6 @@
 ![logo](_media/icon.svg)
 
-# docsify <small>4.2.3</small>
+# docsify <small>4.3.3</small>
 
 > A magical documentation site generator.
 

docs/de-de/helpers.md

@@ -49,3 +49,10 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 
 <a href="/demo/" title="title">link</a>
 ```
+
+## Set target attribute for link
+
+```md
+[link](/demo ":target=_blank")
+[link](/demo2 ":target=_self")
+```

docs/de-de/markdown.md

@@ -28,3 +28,30 @@ window.$docsify = {
   }
 }
 ```
+
+
+## Supports mermaid
+
+```js
+// Import mermaid
+//  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
+//  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
+mermaid.initialize({ startOnLoad: false });
+
+window.$docsify = {
+  markdown: {
+    renderer: {
+      code: function(code, lang) {
+        if (lang === "mermaid") {
+          return (
+            '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
+          );
+        }
+        return this.origin.code.apply(this, arguments);
+      }
+    }
+  }
+}
+```
+

docs/de-de/plugins.md

@@ -96,3 +96,7 @@ Medium's Bilderzoom. Basierend auf [zoom-image](https://github.com/egoist/zoom-i
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
 ```
+
+## Edit on github
+
+Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)

docs/helpers.md

@@ -50,3 +50,10 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 <a href="/demo/" title="title">link</a>
 ```
 
+## Set target attribute for link
+
+```md
+[link](/demo ":target=_blank")
+[link](/demo2 ":target=_self")
+```
+

docs/markdown.md

@@ -28,3 +28,28 @@ window.$docsify = {
   }
 }
 ```
+
+## Supports mermaid
+
+```js
+// Import mermaid
+//  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
+//  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
+mermaid.initialize({ startOnLoad: false });
+
+window.$docsify = {
+  markdown: {
+    renderer: {
+      code: function(code, lang) {
+        if (lang === "mermaid") {
+          return (
+            '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
+          );
+        }
+        return this.origin.code.apply(this, arguments);
+      }
+    }
+  }
+}
+```

docs/plugins.md

@@ -96,3 +96,15 @@ Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image)
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
 ```
+
+## Edit on github
+
+Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)
+
+## Demo code with instant preview and jsfiddle integration
+
+With this plugin, sample code can be rendered on the page instantly, so that the readers can see the preview immediately.
+When readers expand the demo box, the source code and description are shown there. if they click the button `Try in Jsfiddle`,
+`jsfiddle.net` will be open with the code of this sample, which allow readers to revise the code and try on their own.
+
+[Vue](https://njleonzhang.github.io/docsify-demo-box-vue/) and [React](https://njleonzhang.github.io/docsify-demo-box-react/) are both supported.

docs/zh-cn/helpers.md

@@ -49,3 +49,10 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 <a href="/demo/" title="title">link</a>
 ```
 
+
+## Set target attribute for link
+
+```md
+[link](/demo ":target=_blank")
+[link](/demo2 ":target=_self")
+```

docs/zh-cn/markdown.md

@@ -28,3 +28,29 @@ window.$docsify = {
   }
 }
 ```
+
+
+## Supports mermaid
+
+```js
+// Import mermaid
+//  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
+//  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
+mermaid.initialize({ startOnLoad: false });
+
+window.$docsify = {
+  markdown: {
+    renderer: {
+      code: function(code, lang) {
+        if (lang === "mermaid") {
+          return (
+            '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
+          );
+        }
+        return this.origin.code.apply(this, arguments);
+      }
+    }
+  }
+}
+```

docs/zh-cn/plugins.md

@@ -90,3 +90,8 @@ Medium's 风格的图片缩放插件. 基于 [zoom-image](https://github.com/ego
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
 ```
+
+
+## Edit on github
+
+Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)

lib/docsify.js

@@ -80,7 +80,7 @@ var config = merge({
   mergeNavbar: false,
   formatUpdated: '',
   externalLinkTarget: '_blank',
-  routerModel: 'hash',
+  routerMode: 'hash',
   noCompileLinks: []
 }, window.$docsify);
 
@@ -2817,11 +2817,13 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     var router = ref.router;
     var contentBase = ref.contentBase;
   var _self = this;
+  var origin = {};
+
   /**
    * render anchor tag
    * @link https://github.com/chjj/marked#overriding-renderer-methods
    */
-  renderer.heading = function (text, level) {
+  origin.heading = renderer.heading = function (text, level) {
     var nextToc = { level: level, title: text };
 
     if (/{docsify-ignore}/g.test(text)) {
@@ -2844,14 +2846,14 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     return ("<h" + level + " id=\"" + slug + "\"><a href=\"" + url + "\" data-id=\"" + slug + "\" class=\"anchor\"><span>" + text + "</span></a></h" + level + ">")
   };
   // highlight code
-  renderer.code = function (code, lang) {
+  origin.code = renderer.code = function (code, lang) {
       if ( lang === void 0 ) lang = '';
 
     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>")
   };
-  renderer.link = function (href, title, text) {
+  origin.link = renderer.link = function (href, title, text) {
     var blank = '';
 
     if (!/:|(\/{2})/.test(href) &&
@@ -2863,12 +2865,19 @@ Compiler.prototype._initRenderer = function _initRenderer () {
       title = title && title.replace(/:ignore/g, '').trim();
     }
 
+    var target = title && title.match(/:target=\w+/);
+    if (target) {
+      target = target[0];
+      title = title.replace(target, '');
+      blank = ' ' + target.slice(1);
+    }
+
     if (title) {
       title = " title=\"" + title + "\"";
     }
     return ("<a href=\"" + href + "\"" + (title || '') + blank + ">" + text + "</a>")
   };
-  renderer.paragraph = function (text) {
+  origin.paragraph = renderer.paragraph = function (text) {
     if (/^!&gt;/.test(text)) {
       return helper('tip', text)
     } else if (/^\?&gt;/.test(text)) {
@@ -2876,7 +2885,7 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     }
     return ("<p>" + text + "</p>")
   };
-  renderer.image = function (href, title, text) {
+  origin.image = renderer.image = function (href, title, text) {
     var url = href;
     var titleHTML = title ? (" title=\"" + title + "\"") : '';
 
@@ -2887,6 +2896,8 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     return ("<img src=\"" + url + "\" data-origin=\"" + href + "\" alt=\"" + text + "\"" + titleHTML + ">")
   };
 
+  renderer.origin = origin;
+
   return renderer
 };
 
@@ -3020,15 +3031,127 @@ function getAndActive (router, el, isParent, autoTitle) {
   return target
 }
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) { descriptor.writable = true; } Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) { defineProperties(Constructor.prototype, protoProps); } if (staticProps) { defineProperties(Constructor, staticProps); } return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Tweezer = function () {
+  function Tweezer() {
+    var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _classCallCheck(this, Tweezer);
+
+    this.duration = opts.duration || 1000;
+    this.ease = opts.easing || this._defaultEase;
+    this.start = opts.start;
+    this.end = opts.end;
+
+    this.frame = null;
+    this.next = null;
+    this.isRunning = false;
+    this.events = {};
+    this.direction = this.start < this.end ? 'up' : 'down';
+  }
+
+  _createClass(Tweezer, [{
+    key: 'begin',
+    value: function begin() {
+      if (!this.isRunning && this.next !== this.end) {
+        this.frame = window.requestAnimationFrame(this._tick.bind(this));
+      }
+      return this;
+    }
+  }, {
+    key: 'stop',
+    value: function stop() {
+      window.cancelAnimationFrame(this.frame);
+      this.isRunning = false;
+      this.frame = null;
+      this.timeStart = null;
+      this.next = null;
+      return this;
+    }
+  }, {
+    key: 'on',
+    value: function on(name, handler) {
+      this.events[name] = this.events[name] || [];
+      this.events[name].push(handler);
+      return this;
+    }
+  }, {
+    key: 'emit',
+    value: function emit(name, val) {
+      var _this = this;
+
+      var e = this.events[name];
+      e && e.forEach(function (handler) {
+        return handler.call(_this, val);
+      });
+    }
+  }, {
+    key: '_tick',
+    value: function _tick(currentTime) {
+      this.isRunning = true;
+
+      var lastTick = this.next || this.start;
+
+      if (!this.timeStart) { this.timeStart = currentTime; }
+      this.timeElapsed = currentTime - this.timeStart;
+      this.next = Math.round(this.ease(this.timeElapsed, this.start, this.end - this.start, this.duration));
+
+      if (this._shouldTick(lastTick)) {
+        this.emit('tick', this.next);
+        this.frame = window.requestAnimationFrame(this._tick.bind(this));
+      } else {
+        this.emit('tick', this.end);
+        this.emit('done', null);
+      }
+    }
+  }, {
+    key: '_shouldTick',
+    value: function _shouldTick(lastTick) {
+      return {
+        up: this.next < this.end && lastTick <= this.next,
+        down: this.next > this.end && lastTick >= this.next
+      }[this.direction];
+    }
+  }, {
+    key: '_defaultEase',
+    value: function _defaultEase(t, b, c, d) {
+      if ((t /= d / 2) < 1) { return c / 2 * t * t + b; }
+      return -c / 2 * (--t * (t - 2) - 1) + b;
+    }
+  }]);
+
+  return Tweezer;
+}();
+
 var nav = {};
 var hoverOver = false;
+var scroller = null;
+var enableScrollEvent = true;
+
+function scrollTo (el) {
+  if (scroller) { scroller.stop(); }
+  enableScrollEvent = false;
+  scroller = new Tweezer({
+    start: window.scrollY,
+    end: el.getBoundingClientRect().top + window.scrollY,
+    duration: 500
+  })
+  .on('tick', function (v) { return window.scrollTo(0, v); })
+  .on('done', function () { enableScrollEvent = true; scroller = null; })
+  .begin();
+}
 
 function highlight () {
+  if (!enableScrollEvent) { return }
   var sidebar = getNode('.sidebar');
   var anchors = findAll('.anchor');
   var wrap = find(sidebar, '.sidebar-nav');
   var active = find(sidebar, 'li.active');
-  var top = body.scrollTop;
+  var doc = document.documentElement;
+  var top = doc && doc.scrollTop || document.body.scrollTop;
   var last;
 
   for (var i = 0, len = anchors.length; i < len; i += 1) {
@@ -3087,7 +3210,7 @@ function scrollActiveSidebar (router) {
       href = router.parse(href).query.id;
     }
 
-    nav[decodeURIComponent(href)] = li;
+    if (href) { nav[decodeURIComponent(href)] = li; }
   }
 
   off('scroll', highlight);
@@ -3097,8 +3220,16 @@ function scrollActiveSidebar (router) {
 }
 
 function scrollIntoView (id) {
+  if (!id) { return }
+
   var section = find('#' + id);
-  section && section.scrollIntoView();
+  section && scrollTo(section);
+
+  var li = nav[id];
+  var sidebar = getNode('.sidebar');
+  var active = find(sidebar, 'li.active');
+  active && active.classList.remove('active');
+  li && li.classList.add('active');
 }
 
 var scrollEl = $.scrollingElement || $.documentElement;
@@ -3319,7 +3450,7 @@ function initRender (vm) {
 
   if (config.themeColor) {
     $.head.appendChild(
-      create('div', theme(config.themeColor)).getRootNode()
+      create('div', theme(config.themeColor)).firstElementChild
     );
     // Polyfll
     cssVars(config.themeColor);
@@ -3782,6 +3913,19 @@ var initGlobalAPI = function () {
   window.Prism = prism;
 };
 
+/**
+ * Fork https://github.com/bendrucker/document-ready/blob/master/index.js
+ */
+function ready (callback) {
+  var state = document.readyState;
+
+  if (state === 'complete' || state === 'interactive') {
+    return setTimeout(callback, 0)
+  }
+
+  document.addEventListener('DOMContentLoaded', callback);
+}
+
 function Docsify () {
   this._init();
 }
@@ -3802,11 +3946,11 @@ initGlobalAPI();
 /**
  * Version
  */
-Docsify.version = '4.2.3';
+Docsify.version = '4.3.3';
 
 /**
  * Run Docsify
  */
-setTimeout(function (_) { return new Docsify(); }, 0);
+ready(function (_) { return new Docsify(); });
 
 }());

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "4.2.3",
+  "version": "4.3.3",
   "description": "A magical documentation generator.",
   "author": {
     "name": "qingwei-li",
@@ -33,6 +33,7 @@
     "marked": "^0.3.6",
     "prismjs": "^1.6.0",
     "tinydate": "^1.0.0",
+    "tweezer.js": "^1.4.0",
     "zoom-image": "^0.1.4"
   },
   "devDependencies": {

packages/docsify-server-renderer/README.md

@@ -3,7 +3,7 @@
 ## Install
 
 ```bash
-yarn add docsify-server-render
+yarn add docsify-server-renderer
 ```
 
 ## Usage

packages/docsify-server-renderer/package-lock.json

@@ -37,5 +37,5 @@
       "integrity": "sha1-6DWIAbhrg7F1YNTjw4LXrvIQCUQ="
     }
   },
-  "version": "4.2.3"
+  "version": "4.3.3"
 }

packages/docsify-server-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify-server-renderer",
-  "version": "4.2.3",
+  "version": "4.3.3",
   "description": "docsify server renderer",
   "author": {
     "name": "qingwei-li",

src/core/config.js

@@ -21,7 +21,7 @@ const config = merge({
   mergeNavbar: false,
   formatUpdated: '',
   externalLinkTarget: '_blank',
-  routerModel: 'hash',
+  routerMode: 'hash',
   noCompileLinks: []
 }, window.$docsify)
 

src/core/event/scroll.js

@@ -1,15 +1,33 @@
 import { isMobile } from '../util/env'
 import * as dom from '../util/dom'
+import Tweezer from 'tweezer.js'
 
 const nav = {}
 let hoverOver = false
+let scroller = null
+let enableScrollEvent = true
+
+function scrollTo (el) {
+  if (scroller) scroller.stop()
+  enableScrollEvent = false
+  scroller = new Tweezer({
+    start: window.scrollY,
+    end: el.getBoundingClientRect().top + window.scrollY,
+    duration: 500
+  })
+  .on('tick', v => window.scrollTo(0, v))
+  .on('done', () => { enableScrollEvent = true; scroller = null })
+  .begin()
+}
 
 function highlight () {
+  if (!enableScrollEvent) return
   const sidebar = dom.getNode('.sidebar')
   const anchors = dom.findAll('.anchor')
   const wrap = dom.find(sidebar, '.sidebar-nav')
   let active = dom.find(sidebar, 'li.active')
-  const top = dom.body.scrollTop
+  const doc = document.documentElement
+  const top = doc && doc.scrollTop || document.body.scrollTop
   let last
 
   for (let i = 0, len = anchors.length; i < len; i += 1) {
@@ -68,7 +86,7 @@ export function scrollActiveSidebar (router) {
       href = router.parse(href).query.id
     }
 
-    nav[decodeURIComponent(href)] = li
+    if (href) nav[decodeURIComponent(href)] = li
   }
 
   dom.off('scroll', highlight)
@@ -78,8 +96,16 @@ export function scrollActiveSidebar (router) {
 }
 
 export function scrollIntoView (id) {
+  if (!id) return
+
   const section = dom.find('#' + id)
-  section && section.scrollIntoView()
+  section && scrollTo(section)
+
+  const li = nav[id]
+  const sidebar = dom.getNode('.sidebar')
+  const active = dom.find(sidebar, 'li.active')
+  active && active.classList.remove('active')
+  li && li.classList.add('active')
 }
 
 const scrollEl = dom.$.scrollingElement || dom.$.documentElement

src/core/index.js

@@ -5,6 +5,19 @@ import { fetchMixin } from './fetch'
 import { eventMixin } from './event'
 import initGlobalAPI from './global-api'
 
+/**
+ * Fork https://github.com/bendrucker/document-ready/blob/master/index.js
+ */
+function ready (callback) {
+  const state = document.readyState
+
+  if (state === 'complete' || state === 'interactive') {
+    return setTimeout(callback, 0)
+  }
+
+  document.addEventListener('DOMContentLoaded', callback)
+}
+
 function Docsify () {
   this._init()
 }
@@ -30,4 +43,4 @@ Docsify.version = '__VERSION__'
 /**
  * Run Docsify
  */
-setTimeout(_ => new Docsify(), 0)
+ready(_ => new Docsify())

src/core/render/compiler.js

@@ -61,11 +61,13 @@ export class Compiler {
     const renderer = new marked.Renderer()
     const { linkTarget, router, contentBase } = this
     const _self = this
+    const origin = {}
+
     /**
      * render anchor tag
      * @link https://github.com/chjj/marked#overriding-renderer-methods
      */
-    renderer.heading = function (text, level) {
+    origin.heading = renderer.heading = function (text, level) {
       const nextToc = { level, title: text }
 
       if (/{docsify-ignore}/g.test(text)) {
@@ -88,12 +90,12 @@ export class Compiler {
       return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
     }
     // highlight code
-    renderer.code = function (code, lang = '') {
+    origin.code = 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>`
     }
-    renderer.link = function (href, title, text) {
+    origin.link = renderer.link = function (href, title, text) {
       let blank = ''
 
       if (!/:|(\/{2})/.test(href) &&
@@ -105,12 +107,19 @@ export class Compiler {
         title = title && title.replace(/:ignore/g, '').trim()
       }
 
+      let target = title && title.match(/:target=\w+/)
+      if (target) {
+        target = target[0]
+        title = title.replace(target, '')
+        blank = ' ' + target.slice(1)
+      }
+
       if (title) {
         title = ` title="${title}"`
       }
       return `<a href="${href}"${title || ''}${blank}>${text}</a>`
     }
-    renderer.paragraph = function (text) {
+    origin.paragraph = renderer.paragraph = function (text) {
       if (/^!&gt;/.test(text)) {
         return helperTpl('tip', text)
       } else if (/^\?&gt;/.test(text)) {
@@ -118,7 +127,7 @@ export class Compiler {
       }
       return `<p>${text}</p>`
     }
-    renderer.image = function (href, title, text) {
+    origin.image = renderer.image = function (href, title, text) {
       let url = href
       const titleHTML = title ? ` title="${title}"` : ''
 
@@ -129,6 +138,8 @@ export class Compiler {
       return `<img src="${url}" data-origin="${href}" alt="${text}"${titleHTML}>`
     }
 
+    renderer.origin = origin
+
     return renderer
   }
 

src/core/render/index.js

@@ -212,7 +212,7 @@ export function initRender (vm) {
 
   if (config.themeColor) {
     dom.$.head.appendChild(
-      dom.create('div', tpl.theme(config.themeColor)).getRootNode()
+      dom.create('div', tpl.theme(config.themeColor)).firstElementChild
     )
     // Polyfll
     cssVars(config.themeColor)

src/themes/basic/_layout.css

@@ -10,7 +10,7 @@
 body:not(.ready) {
   overflow: hidden;
 
-  [data-cloak], .app-nav {
+  [data-cloak], .app-nav, > nav {
     display: none;
   }
 }

src/themes/buble.css

@@ -132,7 +132,7 @@ $sidebar-width: 16rem;
   border-radius: 3px;
   font-family: Inconsolata;
   padding: 0.2em 0.4rem;
-  white-space: pre;
+  white-space: nowrap;
 }
 
 .markdown-section pre {
@@ -226,6 +226,7 @@ $sidebar-width: 16rem;
   overflow: inherit;
   padding: 20px 0.8em 20px;
   position: relative;
+  white-space: inherit;
 }
 
 .markdown-section code::after, .markdown-section code::before {

src/themes/dark.css

@@ -134,7 +134,7 @@ body {
   font-size: 0.8rem;
   margin: 0 2px;
   padding: 3px 5px;
-  white-space: nowrap;
+  white-space: pre-wrap;
 }
 
 .markdown-section pre {

src/themes/vue.css

@@ -145,7 +145,7 @@ body {
   font-size: 0.8rem;
   margin: 0 2px;
   padding: 3px 5px;
-  white-space: nowrap;
+  white-space: pre-wrap;
 }
 
 .markdown-section pre {