-> v3.4.1

Update English docs and sort css

CHANGELOG.md

@@ -1,72 +1,79 @@
 
-3.2.0 / 2017-02-28
-==================
+# 3.4.1 / 2017-03-10
 
-  * fix(render): Toc rendering error, fixed #106
-  * feat(search): Localization for no data tip, close #103
-  * fix(fetch): load sidebar and navbar for parent path, fixed #100
-  * feat(render) nameLink for each route, fixed #99
+* fix(dom): Disable the dom cache when vue is present, fixed [#119](https://github.com/QingWei-Li/docsify/issues/119)
+* update english docs, [@jrappen](https://github.com/jrappen)
 
-3.1.2 / 2017-02-27
-==================
+# 3.4.0 / 2017-03-09
 
-  * fix(search): dont search nameLink, fixed #102
+* feat(zoom-image): add plugin
 
-3.1.1 / 2017-02-24
-==================
+# 3.3.0 / 2017-03-07
 
-  * fix(search): dont search nameLink, fixed #102
-  * fix(render): custom cover background image
-  * fix(tpl): extra character, fixed #101
+* add front-matter plugin
+* add external-script plugin, [@Leopoldthecoder](https://github.com/Leopoldthecoder)
+* Fix nav showing while loading ([#112](https://github.com/QingWei-Li/docsify/issues/112))
 
-3.1.0 / 2017-02-22
-==================
+# 3.2.0 / 2017-02-28
 
-  * fix(search): incorrect anchor link, fixed #90
-  * feat(emoji): add emoji plugin
+* fix(render): Toc rendering error, fixed [#106](https://github.com/QingWei-Li/docsify/issues/106)
+* feat(search): Localization for no data tip, close [#103](https://github.com/QingWei-Li/docsify/issues/103)
+* fix(fetch): load sidebar and navbar for parent path, fixed [#100](https://github.com/QingWei-Li/docsify/issues/100)
+* feat(render) nameLink for each route, fixed [#99](https://github.com/QingWei-Li/docsify/issues/99)
 
-3.0.5 / 2017-02-21
-==================
+# 3.1.2 / 2017-02-27
 
-  * feat(pwa): add sw.js
-  * fix(layout.css): loading style
-  * fix(event): highlight sidebar when clicked, fixed #86
-  * fix(gen-tree): cache toc list, fixed #88
+* fix(search): dont search nameLink, fixed [#102](https://github.com/QingWei-Li/docsify/issues/102)
 
-3.0.4 / 2017-02-20
-==================
+# 3.1.1 / 2017-02-24
 
-  * fix(render): execute script
-  * fix(render): disable rendering sub list when loadSidebar is false
+* fix(search): dont search nameLink, fixed [#102](https://github.com/QingWei-Li/docsify/issues/102)
+* fix(render): custom cover background image
+* fix(tpl): extra character, fixed [#101](https://github.com/QingWei-Li/docsify/issues/101)
 
-3.0.3 / 2017-02-19
-==================
+# 3.1.0 / 2017-02-22
 
-  * fixed look of links in blockquote
-  * fix(scroll) highlight bug
+* fix(search): incorrect anchor link, fixed [#90](https://github.com/QingWei-Li/docsify/issues/90)
+* feat(emoji): add emoji plugin
 
-3.0.2 / 2017-02-19
-==================
+# 3.0.5 / 2017-02-21
 
-  * fix(search): add lazy input
-  * fix(compiler): link
+* feat(pwa): add sw.js
+* fix(layout.css): loading style
+* fix(event): highlight sidebar when clicked, fixed [#86](https://github.com/QingWei-Li/docsify/issues/86)
+* fix(gen-tree): cache toc list, fixed [#88](https://github.com/QingWei-Li/docsify/issues/88)
 
-3.0.1 / 2017-02-19
-==================
+# 3.0.4 / 2017-02-20
 
-  * fix(route): empty alias
+* fix(render): execute script
+* fix(render): disable rendering sub list when loadSidebar is false
 
-3.0.0 / 2017-02-19
-==================
+# 3.0.3 / 2017-02-19
+
+* fixed look of links in blockquote
+* fix(scroll) highlight bug
+
+# 3.0.2 / 2017-02-19
+
+* fix(search): add lazy input
+* fix(compiler): link
+
+# 3.0.1 / 2017-02-19
+
+* fix(route): empty alias
+
+# 3.0.0 / 2017-02-19
 
 #### Breaking change
-- Not support IE9
-- The route becomes: `/#/page?id=slug`. The previous route will be redirected
+
+* Not support IE9
+* The route becomes: `/#/page?id=slug`. The previous route will be redirected
 
 #### Features
-- Faster rendering
-- Clearer source code
-- More powerful API
-- Auto header for each page [#78](https://github.com/QingWei-Li/docsify/issues/78)
-- Localization for search plugin [#80](https://github.com/QingWei-Li/docsify/issues/80)
-- Execute the script in markdown (see `executeScript`)
+
+* Faster rendering
+* Clearer source code
+* More powerful API
+* Auto header for each page [#78](https://github.com/QingWei-Li/docsify/issues/78)
+* Localization for search plugin [#80](https://github.com/QingWei-Li/docsify/issues/80)
+* Execute the script in markdown (see `executeScript`)

HISTORY.md

@@ -3,22 +3,24 @@
 > 2017-02-15
 
 #### Bug fixes
-* fix emoji replacing error (#76)
+
+* fix emoji replacing error ([#76](https://github.com/QingWei-Li/docsify/issues/76))
 
 ### 2.4.2
 
 > 2017-02-14
 
 #### Bug fixes
-- fix(index): load file path error
 
+* fix(index): load file path error
 
 ### 2.4.1
 
 > 2017-02-13
 
 #### Bug fixes
-- fix(index): cover page
+
+* fix(index): cover page
 
 ### 2.4.0
 
@@ -26,8 +28,7 @@
 
 #### Features
 
-- feat(hook): add `doneEach`
-
+* feat(hook): add `doneEach`
 
 ### 2.3.0
 
@@ -35,352 +36,477 @@
 
 #### Features
 
-- feat(src): add alias feature
-- docs: update all documents
-- feat(src): dynamic title
-- feat(hook): support custom plugin
-- feat(themes): add dark theme
+* feat(src): add alias feature
+* docs: update all documents
+* feat(src): dynamic title
+* feat(hook): support custom plugin
+* feat(themes): add dark theme
 
 #### Bug fixes
-- fix(event): `auto2top` has no effect on a FF mobile browser, fixed #67
-- fix: sidebar style
-- fix(render): fix render link
+
+* fix(event): `auto2top` has no effect on a FF mobile browser, fixed #67
+* fix: sidebar style
+* fix(render): fix render link
 
 ### 2.2.1
 
 > 2017-02-11
 
 #### Bug fixes
-- fix(search): crash when not content, fixed #68
-- fix(event): scroll active sidebar
-- fix(search): not work in mobile
+
+* fix(search): crash when not content, fixed [#68](https://github.com/QingWei-Li/docsify/issues/68)
+* fix(event): scroll active sidebar
+* fix(search): not work in mobile
 
 ### 2.2.0
 
 #### Features
-- Add `Google Analytics` plugin.
-```html
-<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script>
-<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
-```
+
+* Add `Google Analytics` plugin.
+  ```html
+  <script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+  ```
 
 ### 2.1.0
+
 #### Features
-- Add search plugin
-```html
-<script src="//unpkg.com/docsify"></script>
-<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
-```
+
+* Add search plugin
+  ```html
+  <script src="//unpkg.com/docsify"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
+  ```
 
 #### Bug fixes
-- fix sidebar style
+
+* fix sidebar style
 
 ### 2.0.3
+
 #### Bug fixes
-- fix: rendering emojis
-- fix: css var polyfill
+
+* fix: rendering emojis
+* fix: css var polyfill
 
 ### 2.0.2
 
 #### Bug fixes
-- fix button style in cover page.
+
+* fix button style in cover page.
 
 ### 2.0.1
+
 #### Bug fixes
-- border style.
+
+* border style.
 
 ### 2.0.0
+
 #### Features
-- Customize the theme color
+
+* Customize the theme color
 
 #### Break change
-- Remove `data-router`, `data-sidebar`, `data-sidebar-toggle` APIs
+
+* Remove `data-router`, `data-sidebar`, `data-sidebar-toggle` APIs
 
 
 ### 1.10.5
+
 #### Bug fixes
-- fix initialize the Vue instance
+
+* fix initialize the Vue instance
 
 ### 1.10.4
+
 #### Bug fixes
-- fix execute script
+
+* fix execute script
 
 ### 1.10.3
+
 #### Bug fixes
-- compatible vuep QingWei-Li/vuep/issues/2
-- fix sidebar scroll, fixed #63
+
+* compatible vuep ([#2](https://github.com/QingWei-Li/vuep/issues/2))
+* fix sidebar scroll, fixed [#63](https://github.com/QingWei-Li/docsify/issues/63)
 
 ### 1.10.2
+
 #### Bug fixes
-- Fix render emojis again
+
+* Fix render emojis again
 
 ### 1.10.1
+
 #### Bug fixes
-- Fix render emojis
+
+* Fix render emojis
 
 ### 1.10.0
+
 #### Features
-- Support emoji :laughing:
+
+* Support emoji :laughing:
 
 ### 1.9.0
 
 #### Bug fixes
-- Destroys the vue instance when the route is changed
+
+* Destroys the vue instance when the route is changed
 
 #### Features
-- Add `!>` and `?>` doc helper.
+
+* Add `!>` and `?>` doc helper.
 
 #### Break change
-- Remove `!` doc helper.
+
+* Remove `!` doc helper.
 
 ### 1.8.0
+
 #### Bug fixes
-- Using `v-pre` skip compilation.
+
+* Using `v-pre` skip compilation.
 
 ### Features
-- Execute script when vue exists.
+
+* Execute script when vue exists.
 
 ### 1.7.4
+
 #### Bug fixes
-- Fix bugs caused by the previous version
+
+* Fix bugs caused by the previous version
 
 ### 1.7.3
+
 #### Bug fixes
-- Add `hr` style
-- Fixed option is an empty string
+
+* Add `hr` style
+* Fixed option is an empty string
 
 ### 1.7.2
+
 #### Bug fixes
-- Fix sidebar click event in mobile browser.
+
+* Fix sidebar click event in mobile browser.
 
 ### 1.7.1
+
 #### Bug fixes
-- Fix sidebar style in mobile browser.
+
+* Fix sidebar style in mobile browser.
 
 ### 1.7.0
 
 #### Bug fixes
-- Fixed custom cover background, fixed #52
-- Fixed sticky sidebar
+
+* Fixed custom cover background, fixed [#52](https://github.com/QingWei-Li/docsify/issues/52)
+* Fixed sticky sidebar
 
 ### Features
-- Add `name` and `nameLink`
+
+* Add `name` and `nameLink`
 
 ### 1.6.1
+
 #### Bug fixes
-- Fixed sidebar bug when the coverpage exist
+
+* Fixed sidebar bug when the coverpage exist
 
 ### 1.6.0
+
 #### Features
-- Improve sidebar performance. The active item is automatically scrolled in the visible view.
-- New doc helper: `! `. e.g. `! content` will be rendered as `<p class="tip">content</p>`
+
+* Improve sidebar performance. The active item is automatically scrolled in the visible view.
+* New doc helper: `! `. e.g. `! content` will be rendered as `<p class="tip">content</p>`
 
 ### 1.5.2
+
 #### Bug fixes
-- Fixed number at the beginning of the slug
+
+* Fixed number at the beginning of the slug
 
 ### 1.5.1
+
 #### Bug fixes
-- Remove HTML tag when handling slug
+
+* Remove HTML tag when handling slug
 
 ### 1.5.0
 
 #### Bug fixes
-- Fix slugify.
-- Fix nav highlight.
+
+* Fix slugify.
+* Fix nav highlight.
 
 #### Features
-- Initialize the configuration by `window.$docsify`.
-- Markdown parser is configurable.
+
+* Initialize the configuration by `window.$docsify`.
+* Markdown parser is configurable.
 
 ### 1.4.3
+
 #### Bug fixes
-- Tweak style.
+
+* Tweak style.
 
 ### 1.4.2
 
 #### Bug fixes
-- Fix toggle button style.
-- Support `mailto`, `tel`, etc. href type
-- Fix scroll to top.
 
+* Fix toggle button style.
+* Support `mailto`, `tel`, etc. href type
+* Fix scroll to top.
 
 ### 1.4.1
+
 #### Bug fixes
-- Fix generate slug.
+
+* Fix generate slug.
 
 ### 1.4.0 Happly new year 🎉
+
 #### Features
-- Display TOC in the custom sidebar, `data-sub-max-level`.
-- Custom background in coverpage.
+
+* Display TOC in the custom sidebar, `data-sub-max-level`.
+* Custom background in coverpage.
 
 #### Bug fixes
-- Fix scroll highlight when Vue exist.
+
+* Fix scroll highlight when Vue exist.
 
 ### 1.3.5
+
 #### Bug fixes
-- Fix vue
+
+* Fix vue
 
 ### 1.3.4
+
 #### Bug fixes
 
-- Supports [vuep](https://github.com/QingWei-Li/vuep)
+* Supports [vuep](https://github.com/QingWei-Li/vuep)
 
 ### 1.3.3
+
 #### Bug fixes
-- Fixed cover rendering timing
+
+* Fixed cover rendering timing
 
 ### 1.3.2
 
 #### Bug fixes
-- Fixed render link
+
+* Fixed render link
 
 ### 1.3.1
 
 #### Bug fixes
-- Fixed cover page style
-- Generate the correct link when rendering the article
+
+* Fixed cover page style
+* Generate the correct link when rendering the article
 
 ### 1.3.0
+
 #### Features
-- Add cover page
-- add `<kbd>` style
-- headling can be cliked
+
+* Add cover page
+* add `<kbd>` style
+* headling can be cliked
 
 #### Bug fixes
-- sidebar highlight
 
+* sidebar highlight
 
 #### break change
-- Navbar no longer fixed at the top
+
+* Navbar no longer fixed at the top
 
 ### 1.2.0
+
 #### Features
-- custom basePath
-- custom homepage
+
+* custom basePath
+* custom homepage
 
 ### 1.1.7
+
 #### Bug fixes
-- Optimize progress bar
+
+* Optimize progress bar
 
 ### 1.1.6
+
 #### Features
-- Add logo 😂
+
+* Add logo 😂
 
 #### Bug fixes
-- Remove table background color
-- Fixed highlight sidebar using chinese ids
+
+* Remove table background color
+* Fixed highlight sidebar using chinese ids
 
 ### 1.1.5
+
 #### Features
+
 - Add table style
 
 #### Bug fixes
-- Not fixed position of hte navbar in the mobile browser
-- Correct calculation of whether the mobile browser
+
+* Not fixed position of hte navbar in the mobile browser
+* Correct calculation of whether the mobile browser
 
 ### 1.1.4
+
 #### Bug fixes
-- Fixed chinese auchor link
+
+* Fixed chinese auchor link
 
 ### 1.1.3
+
 #### Bug fixes
-- Optimize progress bar again
+
+* Optimize progress bar again
 
 ### 1.1.2
+
 #### Bug fixes
-- fix failed `auto2top` in mobile
+
+* fix failed `auto2top` in mobile
 
 
 ### 1.1.1
+
 #### Bug fixes
+
 - Optimize progress bar
 
 ### 1.1.0
+
 #### Features
-- Add progress bar
-- Add `auto2top` option for hash router
+
+* Add progress bar
+* Add `auto2top` option for hash router
 
 ### 1.0.3
+
 #### Bug fixes
+
 - Fix cache
 
 ### 1.0.2
+
 #### Bug fixes
-- Fix binding events bug, fixed #24
-- Fix regular expression, fixed #23
+
+* Fix binding events bug, fixed [#24](https://github.com/QingWei-Li/docsify/issues/24)
+* Fix regular expression, fixed [#23](https://github.com/QingWei-Li/docsify/issues/23)
 
 ### 1.0.1
+
 #### Bug fixes
-- `img` style
+
+* `img` style
 
 ### 1.0.0
+
 #### Features
-- Support hash router
+
+* Support hash router
 
 #### Bug fixes
-- Improved scrolling on mobile
+
+* Improved scrolling on mobile
 
 ### 0.7.0
+
 #### Breaking change
-- `themes/` was removed, only exists in the npm package.
+
+* `themes/` was removed, only exists in the npm package.
 
 #### Bug fixes
-- Fix style.
-- Fix sidebar animation again.
+
+* Fix style.
+* Fix sidebar animation again.
 
 ### 0.6.1
+
 #### Bug fixes
-- In the mobile, it should collapse the sidebar when toggle is clicked.
-- Fix the dropdown list style.
-- Fix sidebar animation.
+
+* In the mobile, it should collapse the sidebar when toggle is clicked.
+* Fix the dropdown list style.
+* Fix sidebar animation.
 
 ### 0.6.0
+
 #### Features
-- Navbar support dropdown list, #6
-- Sidebar with toggle
+
+* Navbar support dropdown list, [#6](https://github.com/QingWei-Li/docsify/issues/6)
+* Sidebar with toggle
 
 #### Bug fixes
-- Fix ineffective option, fixed #10
+
+* Fix ineffective option, fixed [#10](https://github.com/QingWei-Li/docsify/issues/10)
 
 ### 0.5.0
+
 #### Features
-- Custom sidebars and navbars by markdown file
+
+* Custom sidebars and navbars by markdown file
 
 ### 0.4.2
+
 #### Bug fixes
-- Correct catch ajax error
+
+* Correct catch ajax error
 
 ### 0.4.1
+
 #### Bug fixes
-- catch ajax error
+
+* catch ajax error
 
 ### 0.4.0
+
 #### Features
-- Custom sidebar
+
+* Custom sidebar
 
 #### Bug fixes
-- Fix undefined language
+
+* Fix undefined language
 
 ### 0.3.1
+
 #### Bug fixes
-- Strip HTML tag when rendering the headings
+
+* Strip HTML tag when rendering the headings
 
 ### 0.3.0
+
 #### Features
-- Add minified css files
-- Add max level option
-- Add pure.css
+
+* Add minified css files
+* Add max level option
+* Add pure.css
 
 ### 0.2.1
+
 #### Bug fixes
-- Fix vue.css
+
+* Fix vue.css
 
 ### 0.2.0
+
 #### Bug fixes
-- Fix route
-- Remove dynamic title
+
+* Fix route
+* Remove dynamic title
 
 ### 0.1.0
+
 #### Features
-- Add buble.css
+
+* Add buble.css

README.md

@@ -15,6 +15,7 @@
 </p>
 
 ## Links
+
 - [Documentation](https://docsify.js.org)
 - [CLI](https://github.com/QingWei-Li/docsify-cli)
 
@@ -28,7 +29,8 @@
 - Compatible with IE10+
 
 ## Quick start
-Create a `index.html`.
+
+Create an `index.html`.
 
 ```html
 <!-- index.html -->
@@ -51,18 +53,24 @@ Create a `index.html`.
 Modern browsers and Internet Explorer 10+.
 
 ## Showcase
+
 These open-source projects are using docsify to generate their sites. Pull requests welcome :blush:
 
-- [Snipaste](https://docs.snipaste.com/) - Snip & Paste
-- [puck](https://puck.zz173.com/) - A small & magical php framework.
-- [Samaritan](http://samaritan.stockdb.org) - An Algorithmic Trading Framework for Digital Currency.
-- [Vudash](http://vudash.github.io/vudash/) - Powerful, Flexible, Open Source dashboards for anything
-- [Trilogy](http://trilogy.js.org) - No-hassle SQLite with a Promise-based, document store style API.
-- [Mybatis-Plus](http://mp.baomidou.com/) - An enhanced toolkit of Mybatis to simplify development
+| Project | Description |
+|---|---|
+| [Snipaste](https://docs.snipaste.com/) | Snip & Paste |
+| [puck](https://puck.zz173.com/) | A small & magical php framework. |
+| [Samaritan](http://samaritan.stockdb.org) | An Algorithmic Trading Framework for Digital Currency. |
+| [Vudash](http://vudash.github.io/vudash/) | Powerful, Flexible, Open Source dashboards for anything |
+| [Trilogy](http://trilogy.js.org) | No-hassle SQLite with a Promise-based, document store style API. |
+| [Mybatis-Plus](http://mp.baomidou.com/) | An enhanced toolkit of Mybatis to simplify development |
 
 ## Similar projects
-- [docute](https://github.com/egoist/docute) - 📜 Effortlessly documentation done right
-- [docpress](https://github.com/docpress/docpress) - Documentation website generator
+
+| Project | Description |
+|---|---|
+| [docute](https://github.com/egoist/docute) | 📜 Effortlessly documentation done right |
+| [docpress](https://github.com/docpress/docpress) | Documentation website generator |
 
 ## Contributing
 
@@ -81,4 +89,5 @@ open http://localhost:3000
 ```
 
 ## License
+
 MIT

build/build.js

@@ -2,6 +2,7 @@ var rollup = require('rollup')
 var buble = require('rollup-plugin-buble')
 var commonjs = require('rollup-plugin-commonjs')
 var nodeResolve = require('rollup-plugin-node-resolve')
+var string = require('rollup-plugin-string')
 var uglify = require('rollup-plugin-uglify')
 var isProd = process.argv[process.argv.length - 1] !== '--dev'
 
@@ -9,7 +10,12 @@ var build = function (opts) {
   rollup
     .rollup({
       entry: 'src/' + opts.entry,
-      plugins: [buble(), commonjs(), nodeResolve()].concat(opts.plugins || [])
+      plugins: (opts.plugins || []).concat([
+        string({ include: '**/*.css' }),
+        buble(),
+        commonjs(),
+        nodeResolve()
+      ])
     })
     .then(function (bundle) {
       var dest = 'lib/' + (opts.output || opts.entry)
@@ -34,8 +40,10 @@ build({
 var plugins = [
   { name: 'search', entry: 'search/index.js', moduleName: 'Search' },
   { name: 'ga', entry: 'ga.js', moduleName: 'GA' },
-  { name: 'emoji', entry: 'emoji.js', moduleName: 'Emoji' }
-  // { name: 'front-matter', entry: 'front-matter/index.js', moduleName: 'FrontMatter' }
+  { name: 'emoji', entry: 'emoji.js', moduleName: 'Emoji' },
+  { name: 'external-script', entry: 'external-script.js', moduleName: 'ExternalScript' },
+  { name: 'front-matter', entry: 'front-matter/index.js', moduleName: 'FrontMatter' },
+  { name: 'zoom-image', entry: 'zoom-image.js', moduleName: 'ZoomImage' }
 ]
 
 plugins.forEach(item => {

docs/README.md

@@ -10,13 +10,13 @@ See the [Quick start](/quickstart) for more details.
 
 ## Features
 
-- No statically built html files
-- Simple and lightweight (~16kB gzipped)
-- Smart full-text search plugin
-- Multiple themes
-- Useful plugin API
-- Emoji support
-- Compatible with IE10+
+* No statically built html files
+* Simple and lightweight (~16kB gzipped)
+* Smart full-text search plugin
+* Multiple themes
+* Useful plugin API
+* Emoji support
+* Compatible with IE10+
 
 ## Examples
 

docs/_coverpage.md

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

docs/_sidebar.md

@@ -1,8 +1,8 @@
 - Getting started
- - [Quick start](/quickstart)
- - [Writing more pages](/more-pages)
- - [Custom navbar](/custom-navbar)
- - [Cover page](/cover)
+  - [Quick start](/quickstart)
+  - [Writing more pages](/more-pages)
+  - [Custom navbar](/custom-navbar)
+  - [Cover page](/cover)
 
 - Customization
   - [Configuration](/configuration)
@@ -10,13 +10,13 @@
   - [List of Plugins](/plugins)
   - [Write a Plugin](/write-a-plugin)
   - [Markdown configuration](/markdown)
-  - [Lanuage highlighting](/language-highlight)
+  - [Language highlighting](/language-highlight)
 
 - Guide
- - [Deploy](/deploy)
- - [Helpers](/helpers)
- - [Vue compatibility](/vue)
- - [CDN](/cdn)
- - [Offline Mode(PWA)](/pwa)
+  - [Deploy](/deploy)
+  - [Helpers](/helpers)
+  - [Vue compatibility](/vue)
+  - [CDN](/cdn)
+  - [Offline Mode(PWA)](/pwa)
 
-- [Changelog](/changelog)
+- [Changelog](/changelog)

docs/cdn.md

@@ -2,10 +2,8 @@
 
 Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/docsify/](//unpkg.com/docsify/).
 
-
 ## Latest version
 
-
 ```html
 <!-- load css -->
 <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
@@ -14,8 +12,9 @@ Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon
 <script src="//unpkg.com/docsify/lib/docsify.js"></script>
 ```
 
-## Specific version
+Alternatively, use [compressed files](#compressed-files).
 
+## Specific version
 
 ```html
 <!-- load css -->
@@ -27,7 +26,6 @@ Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon
 
 ## Compressed file
 
-
 ```html
 <!-- load css -->
 <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
@@ -36,7 +34,14 @@ Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 ```
 
+```html
+<!-- load css -->
+<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/lib/themes/vue.css">
+
+<!-- load script -->
+<script src="//unpkg.com/docsify@2.0.0/lib/docsify.min.js"></script>
+```
+
 ## Other CDN
 
 [jsDelivr](http://www.jsdelivr.com/projects/docsify) is available.
-

docs/configuration.md

@@ -1,6 +1,6 @@
 # Configuration
 
-docsify supports two ways to configure. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes.
+**docsify** supports two different ways of configuration. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes.
 
 ```html
 <!-- by $docsify -->
@@ -53,7 +53,6 @@ window.$docsify = {
 }
 ```
 
-
 ## max-level
 
 - Type: `Number`
@@ -72,7 +71,7 @@ window.$docsify = {
 - Type: `Boolean|String`
 - Default: `false`
 
-Load navbar from Markdown file. If **true** it will be loaded from `_navbar.md`.
+Loads navbar from the Markdown file `_navbar.md` if **true**, or else from the path specified.
 
 ```js
 window.$docsify = {
@@ -89,8 +88,7 @@ window.$docsify = {
 - Type: `Boolean|String`
 - Default: `false`
 
-
-Load sidebar from Markdown file. If **true** it will be loaded from `_sidebar.md`.
+Loads sidebar from the Markdown file `_sidebar.md` if **true**, or else from the path specified.
 
 ```js
 window.$docsify = {
@@ -107,7 +105,7 @@ window.$docsify = {
 - Type: `Number`
 - Default: `0`
 
-Add TOC in custom sidebar.
+Add table of contents (TOC) in custom sidebar.
 
 ```js
 window.$docsify = {
@@ -115,13 +113,11 @@ window.$docsify = {
 }
 ```
 
-
 ## auto2top
 
 - Type: `Boolean`
 - Default: `false`
 
-
 Scrolls to the top of the screen when the route is changed.
 
 ```js
@@ -130,13 +126,11 @@ window.$docsify = {
 }
 ```
 
-
 ## homepage
 
 - Type: `String`
 - Default: `README.md`
 
-
 `README.md` in your docs folder will be treated as homepage for your website, but sometimes you may need to serve another file as your homepage.
 
 ```js
@@ -167,13 +161,12 @@ window.$docsify = {
 }
 ```
 
-
 ## coverpage
 
 - Type: `Boolean|String`
 - Default: `false`
 
-Activate the [cover feature](/cover). If ture, it will load from `_coverpage.md`.
+Activate the [cover feature](/cover). If true, it will load from `_coverpage.md`.
 
 ```js
 window.$docsify = {
@@ -188,8 +181,7 @@ window.$docsify = {
 
 - Type: `String`
 
-
-Website name appears in the sidebar.
+Website name as it appears in the sidebar.
 
 ```js
 window.$docsify = {
@@ -222,7 +214,6 @@ window.$docsify = {
 
 See [Markdown configuration](/markdown).
 
-
 ```js
 window.$docsify = {
   // object
@@ -247,8 +238,7 @@ window.$docsify = {
 
 - Type: `String`
 
-Customize the theme color.
-Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
+Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
 
 ```js
 window.$docsify = {
@@ -260,7 +250,6 @@ window.$docsify = {
 
 - Type: `Object`
 
-
 Set the route alias. You can freely manage routing rules.
 
 ```js
@@ -276,7 +265,7 @@ window.$docsify = {
 
 - type: `Boolean`
 
-If `loadSidebar` and `autoHeader` are both enabled, for each link in _sidebar.md, prepend a header to the page before converting it to html. [#78](https://github.com/QingWei-Li/docsify/issues/78)
+If `loadSidebar` and `autoHeader` are both enabled, for each link in `_sidebar.md`, prepend a header to the page before converting it to html. Compare [#78](https://github.com/QingWei-Li/docsify/issues/78).
 
 ```js
 window.$docsify = {
@@ -303,6 +292,6 @@ window.$docsify = {
 <script>
   console.log(2333)
 </script>
-
 ```
 
+Note that if you are running an external script, e.g. an embedded jsfiddle demo, make sure to include the [external-script](plugins?id=external-script) plugin.

docs/cover.md

@@ -1,6 +1,6 @@
 # Cover
 
-Activate the cover feature by setting `coverpage` to **true**. Details are available in the [coverpage configuration paragraph](configuration#coverpage).
+Activate the cover feature by setting `coverpage` to **true**, compare [coverpage configuration](configuration#coverpage).
 
 ## Basic usage
 
@@ -14,16 +14,15 @@ Set `coverpage` to **true**, and create a `_coverpage.md`:
     coverpage: true
   }
 </script>
-<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 ```
 
-
 ```markdown
 <!-- _coverpage.md -->
 
 ![logo](_media/icon.svg)
 
-# docsify <small>3.0</small>
+# docsify <small>3.5</small>
 
 > A magical documentation site generator.
 
@@ -31,27 +30,27 @@ Set `coverpage` to **true**, and create a `_coverpage.md`:
 - No statically built html files
 - Multiple themes
 
-
 [GitHub](https://github.com/QingWei-Li/docsify/)
 [Get Started](#docsify)
 ```
 
-!> A document site can have only one cover page.
+!> A document site can have only one coverpage!
 
 ## Custom background
 
-The background color is generated randomly by default. You can customize the background color or image:
+The background color is generated randomly by default. You can customize the background color or a background image:
 
 ```markdown
 <!-- _coverpage.md -->
 
-# docsify
+# docsify <small>3.5</small>
 
 [GitHub](https://github.com/QingWei-Li/docsify/)
 [Get Started](#quick-start)
 
 <!-- background image -->
 ![](_media/bg.png)
+
 <!-- background color -->
 ![color](#f0f0f0)
 ```

docs/custom-navbar.md

@@ -2,7 +2,9 @@
 
 ## HTML
 
-If you need custom navigation, you can create a HTML-based navigation bar (but note that documentation links begin with `#/`).
+If you need custom navigation, you can create a HTML-based navigation bar.
+
+!> Note that documentation links begin with `#/`.
 
 ```html
 <!-- index.html -->
@@ -18,7 +20,7 @@ If you need custom navigation, you can create a HTML-based navigation bar (but n
 
 ## Markdown
 
-Alternatively, you can create a custom markdown-based navigation file by setting `loadNavbar` to **true** and creating `_navbar.md`. Details are available in the [load-navbar configuration paragraph](configuration#load-navbar).
+Alternatively, you can create a custom markdown-based navigation file by setting `loadNavbar` to **true** and creating `_navbar.md`, compare [load-navbar configuration](configuration#load-navbar).
 
 ```html
 <!-- index.html -->
@@ -28,10 +30,9 @@ Alternatively, you can create a custom markdown-based navigation file by setting
     loadNavbar: true
   }
 </script>
-<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 ```
 
-
 ```markdown
 <!-- _navbar.md -->
 
@@ -51,21 +52,44 @@ You can create sub-lists by indenting items that are under a certain parent.
 <!-- _navbar.md -->
 
 - Getting started
- - [Quick start](/quickstart)
- - [Writing more pages](/more-pages)
- - [Custom navbar](/custom-navbar)
- - [Cover page](/cover)
+  - [Quick start](/quickstart)
+  - [Writing more pages](/more-pages)
+  - [Custom navbar](/custom-navbar)
+  - [Cover page](/cover)
 
 - Configuration
   - [Configuration](/configuration)
   - [Themes](/themes)
   - [Using plugins](/plugins)
   - [Markdown configuration](/markdown)
-  - [Lanuage highlight](/language-highlight)
+  - [Language highlight](/language-highlight)
 ```
 
 renders as
 
 ![Nesting navbar](_images/nested-navbar.png "Nesting navbar")
 
+## Combining custom navbars with the emoji plugin
 
+If you use the [emoji plugin](plugins#emoji):
+
+```html
+<!-- index.html -->
+
+<script>
+  window.$docsify = {
+    // ...
+  }
+</script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
+```
+
+you could, for example, use flag emojis in your custom navbar Markdown file:
+
+```markdown
+<!-- _navbar.md -->
+
+- [:us:, :uk:](/)
+- [:cn:](/zh-cn/)
+```

docs/deploy.md

@@ -1,16 +1,16 @@
 # Deploy
 
-As as GitBook, you can deploy files to GitHub Pages or VPS.
+Similar to [GitBook](https://www.gitbook.com), you can deploy files to GitHub Pages or VPS.
 
 ## GitHub Pages
 
-There're three places to populate your docs
+There're three places to populate your docs for your Github repository:
 
-- `docs/` folder
-- master branch
-- gh-pages branch
+* `docs/` folder
+* master branch
+* gh-pages branch
 
-You can save your files in `./docs` and setting `master branch /docs folder`.
+It is recommended that you save your files to the `./docs` subfolder of the `master` branch of your repository. Then select `master branch /docs folder` as your Github Pages source in your repositories' settings page.
 
 ![github pages](_images/deploy-github-pages.png)
 

docs/helpers.md

@@ -4,23 +4,24 @@ docsify extends Markdown syntax to make your documents more readable.
 
 ## important content
 
-Suitable for displaying important information.
+Important content like:
 
 ```markdown
 !> **Time** is money, my friend!
 ```
 
-!> **Time** is money, my friend!
+is rendered as:
 
+!> **Time** is money, my friend!
 
 ## General tips
 
-General tips.
-
+General tips like:
 
 ```markdown
 ?> *TODO* unit test
 ```
 
-?> *TODO* unit test
+are rendered as:
 
+?> *TODO* unit test

docs/language-highlight.md

@@ -1,13 +1,11 @@
 # language highlight
 
-
-The code language highlight tool is [Prism](https://github.com/PrismJS/prism). Only supports CSS, JavaScipt and HTML by default. You can load its component to highlight the language you need.
-
+**docsify** uses [Prism](https://github.com/PrismJS/prism) to highlight code blocks in your pages. By default it only supports CSS, JavaScipt and HTML. You can make **Prism** load additional languages:
 
 ```html
-<script src="//unpkg.com/docsify"></script>
-<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
-<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
+<script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
 ```
 
-?> See fully supported highlight component [files list](https://github.com/PrismJS/prism/tree/gh-pages/components).
+?> Check the [component files](https://github.com/PrismJS/prism/tree/gh-pages/components) list for more options.

docs/markdown.md

@@ -1,6 +1,6 @@
 # Markdown configuration
 
-The Markdown parser is [marked](https://github.com/chjj/marked). You can customize how docsify renders your Markdown content to HTML. Support customize `renderer`.
+**docsify** uses [marked](https://github.com/chjj/marked) as its Markdown parser. You can customize how it renders your Markdown content to HTML by customizing `renderer`:
 
 ```js
 window.$docsify = {

docs/more-pages.md

@@ -5,17 +5,17 @@ If you need more pages, you can simply create more markdown files in your docsif
 For example, the directory structure is as follows:
 
 ```text
--| docs/
-  -| README.md
-  -| guide.md
-  -| zh-cn/
-    -| README.md
-    -| guide.md
+.
+├── docs
+|   └── README.md
+|   └── guide.md
+|   └── zh-cn
+|       └──README.md
+|       └──guide.md
 ```
 
 Matching routes
 
-
 ```text
 docs/README.md        => http://domain.com
 docs/guide.md         => http://domain.com/guide
@@ -37,7 +37,7 @@ First, you need to set `loadSidebar` to **true**. Details are available in the [
     loadSidebar: true
   }
 </script>
-<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 ```
 
 Create the `_sidebar.md`:
@@ -55,7 +55,7 @@ Create the `_sidebar.md`:
 
 ## Table of Contents
 
-A custom sidebar can also automatically generate a table of contents by setting a `subMaxLevel`. Details are available in the [max-level configuration paragraph](configuration#sub-max-level).
+A custom sidebar can also automatically generate a table of contents by setting a `subMaxLevel`, compare [sub-max-level configuration](configuration#sub-max-level).
 
 ```html
 <!-- index.html -->
@@ -66,5 +66,5 @@ A custom sidebar can also automatically generate a table of contents by setting
     subMaxLevel: 2
   }
 </script>
-<script src="//unpkg.com/docsify"></script>
-```
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+```

docs/plugins.md

@@ -17,7 +17,7 @@ By default, the hyperlink on the current page is recognized and the content is s
       '/zh-cn/',      // => /zh-cn/README.md
     ],
 
-    // 完整配置参数
+    // complete configuration parameters
     search: {
       maxAge: 86400000, // Expiration time, the default one day
       paths: [], // or 'auto'
@@ -39,11 +39,10 @@ By default, the hyperlink on the current page is recognized and the content is s
     }
   }
 </script>
-<script src="//unpkg.com/docsify"></script>
-<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
 ```
 
-
 ## Google Analytics
 
 Install the plugin and configure the track id.
@@ -54,24 +53,43 @@ Install the plugin and configure the track id.
     ga: 'UA-XXXXX-Y'
   }
 </script>
-<script src="//unpkg.com/docsify"></script>
-<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
 ```
 
 Configure by `data-ga`.
 
+```html
+<script src="//unpkg.com/docsify/lib/docsify.min.js" data-ga="UA-XXXXX-Y"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
+```
+
+## front matter
 
 ```html
-<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script>
-<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/front-matter.min.js"></script>
 ```
 
 ## emoji
 
 The default is to support parsing emoji. For example `:100:` will be parsed to :100:. But it is not precise because there is no matching non-emoji string. If you need to correctly parse the emoji string, you need install this plugin.
 
-
 ```html
-<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
 ```
 
+## External Script
+
+If the script on the page is an external one (imports a js file via `src` attribute), you'll need this plugin to make it work.
+
+```html
+<script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
+```
+
+## Zoom image
+
+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>
+```

docs/pwa.md

@@ -1,10 +1,12 @@
 # Offline Mode
 
-[Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)(PWA) are experiences that combine the best of the web and the best of apps. we can enhance our website with service workers to work **offline** or on low-quality networks.
+[Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) (PWA) are experiences that combine the best of the web with the best of apps. We can enhance our website with service workers to work **offline** or on low-quality networks.
+
 It is also very easy to use it.
 
 ## Create serviceWorker
-Create a sw.js file in your documents root directory and copy this code.
+
+Create a `sw.js` file in your documents root directory and copy the following code:
 
 *sw.js*
 
@@ -96,7 +98,7 @@ self.addEventListener('fetch', event => {
 
 ## Register
 
-Now, register it in your `index.html`. It only works on some modern browsers, so we need to judge.
+Now, register it in your `index.html`. It only works on some modern browsers, so we need to judge:
 
 *index.html*
 

docs/quickstart.md

@@ -8,7 +8,7 @@ npm i docsify-cli -g
 
 ## Initialize
 
-If you want to write the documentation in the `./docs` directory, you can use the `init` command.
+If you want to write the documentation in the `./docs` subdirectory, you can use the `init` command.
 
 ```bash
 docsify init ./docs
@@ -16,20 +16,18 @@ docsify init ./docs
 
 ## Writing content
 
-After the init is complete, you can see the file list in the docs directory.
+After the `init` is complete, you can see the file list in the `./docs` subdirectory.
 
+* `index.html` as the entry file
+* `README.md` as the home page
+* `.nojekyll` prevents GitHub Pages from ignoring files that begin with an underscore
 
-- `index.html` as the entry file
-- `README.md` as the home page
-- `.nojekyll` prevents GitHub Pages from ignoring files that begin with an underscore
-
-You can easily update the documentation in `docs/README.md`, of course you can add [more pages](more-pages).
+You can easily update the documentation in `./docs/README.md`, of course you can add [more pages](more-pages).
 
 ## Preview your site
 
 Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`.
 
-
 ```bash
 docsify serve docs
 ```
@@ -38,7 +36,7 @@ docsify serve docs
 
 ## Manual initialization
 
-If you don't like npm or have trouble installing the tool, you can manually create `index.html`:
+If you don't like `npm` or have trouble installing the tool, you can manually create `index.html`:
 
 ```html
 <!-- index.html -->
@@ -52,7 +50,7 @@ If you don't like npm or have trouble installing the tool, you can manually crea
 <body>
   <div id="app"></div>
 </body>
-<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 </html>
 ```
 
@@ -85,3 +83,5 @@ You should set the `data-app` attribute if you changed `el`:
     }
   </script>
 ```
+
+Compare [el configuration](/configuration#el).

docs/sw.js

@@ -9,6 +9,7 @@
 const RUNTIME = 'docsify'
 const HOSTNAME_WHITELIST = [
   self.location.hostname,
+  'raw.githubusercontent.com',
   'fonts.gstatic.com',
   'fonts.googleapis.com',
   'unpkg.com'

docs/themes.md

@@ -2,35 +2,40 @@
 
 There are currently three themes available. Copy [Vue](//vuejs.org) and [buble](//buble.surge.sh) website custom theme and [@liril-net](https://github.com/liril-net) contribution to the theme of the black style.
 
-
 ```html
-  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
-  <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
-  <link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
+<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
+<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
 ```
 
-!> This compressed files in `/lib/themes/`.
+!> Compressed files are available in `/lib/themes/`.
 
-If you have any ideas or would like to develop new theme, welcome submit [PR](https://github.com/QingWei-Li/docsify/pulls).
+```html
+<!-- compressed -->
+
+<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
+<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
+```
+
+If you have any ideas or would like to develop a new theme, you are welcome to submit a [pull request](https://github.com/QingWei-Li/docsify/pulls).
 
 #### Click to preview
 
-
 <div class="demo-theme-preview">
   <a data-theme="vue">vue.css</a>
   <a data-theme="buble">buble.css</a>
   <a data-theme="dark">dark.css</a>
 </div>
 
-
 <style>
   .demo-theme-preview a {
     padding-right: 10px;
   }
 
   .demo-theme-preview a:hover {
-    text-decoration: underline;
     cursor: pointer;
+    text-decoration: underline;
   }
 </style>
 

docs/vue.md

@@ -1,19 +1,21 @@
 # Compatible with Vue
 
-You can write Vue components directly in the Markdown file, and it will be parsed.
-You can use this feature to write vue demo and documentation together.
+You can write Vue components directly in the Markdown file, and it will be parsed. You can use this feature to write vue demo and documentation together.
 
 ## Basic usage
 
-Load the Vue in `index.html`.
+Load the Vue in `./index.html`.
 
 ```html
 <script src="//unpkg.com/vue"></script>
 <script src="//unpkg.com/docsify"></script>
+
+<!-- or use the compressed files -->
+<script src="//unpkg.com/vue/dist/vue.min.js"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 ```
 
-Then you can immediately write Vue code at Markdown file.
-`new Vue({ el: '#main' })` script is executed by default to create instance.
+Then you can immediately write Vue code at Markdown file. `new Vue({ el: '#main' })` script is executed by default to create instance.
 
 *README.md*
 
@@ -62,6 +64,11 @@ You can manually initialize a Vue instance.
 <script src="//unpkg.com/vue"></script>
 <script src="//unpkg.com/vuep"></script>
 <script src="//unpkg.com/docsify"></script>
+
+<!-- or use the compressed files -->
+<script src="//unpkg.com/vue/dist/vue.min.js"></script>
+<script src="//unpkg.com/vuep/dist/vuep.min.js"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 ```
 
 *README.md*
@@ -85,5 +92,4 @@ You can manually initialize a Vue instance.
 </script>
 ```
 
-?> Example Refer to the vuep [documentation](https://qingwei-li.github.io/vuep/).
-
+?> Example Refer to the [vuep documentation](https://qingwei-li.github.io/vuep/).

docs/write-a-plugin.md

@@ -1,7 +1,6 @@
 # Write a plugin
 
-A plugin is simply a function that takes `hook` as arguments.
-The hook supports handling asynchronous tasks.
+A plugin is simply a function that takes `hook` as an argument. The hook supports handling of asynchronous tasks.
 
 ## Full configuration
 
@@ -68,4 +67,4 @@ window.$docsify = {
     }
   ]
 }
-```
+```

docs/zh-cn/_sidebar.md

@@ -1,8 +1,8 @@
 - 入门
- - [快速开始](zh-cn/quickstart)
- - [多页文档](zh-cn/more-pages)
- - [定制导航栏](zh-cn/custom-navbar)
- - [封面](zh-cn/cover)
+  - [快速开始](zh-cn/quickstart)
+  - [多页文档](zh-cn/more-pages)
+  - [定制导航栏](zh-cn/custom-navbar)
+  - [封面](zh-cn/cover)
 
 - 定制化
   - [配置项](zh-cn/configuration)
@@ -19,4 +19,4 @@
  - [CDN](zh-cn/cdn)
  - [离线模式(PWA)](zh-cn/pwa)
 
-- [Changelog](zh-cn/changelog)
+- [Changelog](zh-cn/changelog)

docs/zh-cn/configuration.md

@@ -304,3 +304,4 @@ window.$docsify = {
 
 ```
 
+注意如果执行的是一个外链脚本，比如 jsfiddle 的内嵌 demo，请确保引入 [external-script](zh-cn/plugins?id=外链脚本-external-script) 插件。

docs/zh-cn/plugins.md

@@ -71,3 +71,19 @@
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
 ```
+
+## 外链脚本 - External Script
+
+如果文档里的 script 是内联脚本，可以直接执行；而如果是外链脚本（即 js 文件内容由 `src` 属性引入），则需要使用此插件。
+
+```html
+<script src="//unpkg.com/docsify/lib/plugins/external-script.js"></script>
+```
+
+## 图片缩放 - Zoom image
+
+Medium's 风格的图片缩放插件. 基于 [zoom-image](https://github.com/egoist/zoom-image)。
+
+```html
+<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
+```

lib/docsify.js

@@ -161,7 +161,10 @@ function getNode (el, noCache) {
   if ( noCache === void 0 ) noCache = false;
 
   if (typeof el === 'string') {
-    el = noCache ? find(el) : (cacheNode[el] || find(el));
+    if (typeof window.Vue !== 'undefined') {
+      return find(el)
+    }
+    el = noCache ? find(el) : (cacheNode[el] || (cacheNode[el] = find(el)));
   }
 
   return el

lib/plugins/external-script.js

@@ -0,0 +1,25 @@
+this.D = this.D || {};
+(function () {
+'use strict';
+
+function handleExternalScript () {
+  var container = Docsify.dom.getNode('#main');
+  var script = Docsify.dom.find(container, 'script');
+
+  if (script && script.src) {
+    var newScript = document.createElement('script');['src', 'async', 'defer'].forEach(function (attribute) {
+      newScript[attribute] = script[attribute];
+    });
+
+    script.parentNode.removeChild(script);
+    container.appendChild(newScript);
+  }
+}
+
+var install = function (hook) {
+  hook.doneEach(handleExternalScript);
+};
+
+window.$docsify.plugins = [].concat(install, window.$docsify.plugins);
+
+}());

lib/plugins/external-script.min.js

@@ -0,0 +1 @@
+this.D=this.D||{},function(){"use strict";function i(){var i=Docsify.dom.getNode("#main"),n=Docsify.dom.find(i,"script");if(n&&n.src){var c=document.createElement("script");["src","async","defer"].forEach(function(i){c[i]=n[i]}),n.parentNode.removeChild(n),i.appendChild(c)}}var n=function(n){n.doneEach(i)};window.$docsify.plugins=[].concat(n,window.$docsify.plugins)}();

lib/plugins/front-matter.js

@@ -0,0 +1,503 @@
+this.D = this.D || {};
+(function () {
+'use strict';
+
+/**
+ * Fork https://github.com/egoist/docute/blob/master/src/utils/yaml.js
+ */
+/* eslint-disable */
+/*
+YAML parser for Javascript
+Author: Diogo Costa
+This program is released under the MIT License as follows:
+Copyright (c) 2011 Diogo Costa (costa.h4evr@gmail.com)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+*/
+
+/**
+ * @name YAML
+ * @namespace
+*/
+
+
+var errors = [];
+var reference_blocks = [];
+var processing_time = 0;
+var regex$1 =
+    {
+        "regLevel" : new RegExp("^([\\s\\-]+)"),
+        "invalidLine" : new RegExp("^\\-\\-\\-|^\\.\\.\\.|^\\s*#.*|^\\s*$"),
+        "dashesString" : new RegExp("^\\s*\\\"([^\\\"]*)\\\"\\s*$"),
+        "quotesString" : new RegExp("^\\s*\\\'([^\\\']*)\\\'\\s*$"),
+        "float" : new RegExp("^[+-]?[0-9]+\\.[0-9]+(e[+-]?[0-9]+(\\.[0-9]+)?)?$"),
+        "integer" : new RegExp("^[+-]?[0-9]+$"),
+        "array" : new RegExp("\\[\\s*(.*)\\s*\\]"),
+        "map" : new RegExp("\\{\\s*(.*)\\s*\\}"),
+        "key_value" : new RegExp("([a-z0-9_-][ a-z0-9_-]*):( .+)", "i"),
+        "single_key_value" : new RegExp("^([a-z0-9_-][ a-z0-9_-]*):( .+?)$", "i"),
+        "key" : new RegExp("([a-z0-9_-][ a-z0-9_-]+):( .+)?", "i"),
+        "item" : new RegExp("^-\\s+"),
+        "trim" : new RegExp("^\\s+|\\s+$"),
+        "comment" : new RegExp("([^\\\'\\\"#]+([\\\'\\\"][^\\\'\\\"]*[\\\'\\\"])*)*(#.*)?")
+    };
+
+  /**
+  * @class A block of lines of a given level.
+  * @param {int} lvl The block's level.
+  * @private
+  */
+function Block(lvl) {
+    return {
+        /* The block's parent */
+        parent: null,
+        /* Number of children */
+        length: 0,
+        /* Block's level */
+        level: lvl,
+        /* Lines of code to process */
+        lines: [],
+        /* Blocks with greater level */
+        children : [],
+        /* Add a block to the children collection */
+        addChild : function(obj) {
+            this.children.push(obj);
+            obj.parent = this;
+            ++this.length;
+        }
+    };
+}
+
+function parser$1(str) {
+    var regLevel = regex$1["regLevel"];
+    var invalidLine = regex$1["invalidLine"];
+    var lines = str.split("\n");
+    var m;
+    var level = 0, curLevel = 0;
+
+    var blocks = [];
+
+    var result = new Block(-1);
+    var currentBlock = new Block(0);
+    result.addChild(currentBlock);
+    var levels = [];
+    var line = "";
+
+    blocks.push(currentBlock);
+    levels.push(level);
+
+    for(var i = 0, len = lines.length; i < len; ++i) {
+        line = lines[i];
+
+        if(line.match(invalidLine)) {
+            continue;
+        }
+
+        if(m = regLevel.exec(line)) {
+            level = m[1].length;
+        } else
+            { level = 0; }
+
+        if(level > curLevel) {
+            var oldBlock = currentBlock;
+            currentBlock = new Block(level);
+            oldBlock.addChild(currentBlock);
+            blocks.push(currentBlock);
+            levels.push(level);
+        } else if(level < curLevel) {
+            var added = false;
+
+            var k = levels.length - 1;
+            for(; k >= 0; --k) {
+                if(levels[k] == level) {
+                    currentBlock = new Block(level);
+                    blocks.push(currentBlock);
+                    levels.push(level);
+                    if(blocks[k].parent!= null)
+                        { blocks[k].parent.addChild(currentBlock); }
+                    added = true;
+                    break;
+                }
+            }
+
+            if(!added) {
+                errors.push("Error: Invalid indentation at line " + i + ": " + line);
+                return;
+            }
+        }
+
+        currentBlock.lines.push(line.replace(regex$1["trim"], ""));
+        curLevel = level;
+    }
+
+    return result;
+}
+
+function processValue(val) {
+    val = val.replace(regex$1["trim"], "");
+    var m = null;
+
+    if(val == 'true') {
+        return true;
+    } else if(val == 'false') {
+        return false;
+    } else if(val == '.NaN') {
+        return Number.NaN;
+    } else if(val == 'null') {
+        return null;
+    } else if(val == '.inf') {
+        return Number.POSITIVE_INFINITY;
+    } else if(val == '-.inf') {
+        return Number.NEGATIVE_INFINITY;
+    } else if(m = val.match(regex$1["dashesString"])) {
+        return m[1];
+    } else if(m = val.match(regex$1["quotesString"])) {
+        return m[1];
+    } else if(m = val.match(regex$1["float"])) {
+        return parseFloat(m[0]);
+    } else if(m = val.match(regex$1["integer"])) {
+        return parseInt(m[0]);
+    } else if( !isNaN(m = Date.parse(val))) {
+        return new Date(m);
+    } else if(m = val.match(regex$1["single_key_value"])) {
+        var res = {};
+        res[m[1]] = processValue(m[2]);
+        return res;
+    } else if(m = val.match(regex$1["array"])){
+        var count = 0, c = ' ';
+        var res = [];
+        var content = "";
+        var str = false;
+        for(var j = 0, lenJ = m[1].length; j < lenJ; ++j) {
+            c = m[1][j];
+            if(c == '\'' || c == '"') {
+                if(str === false) {
+                    str = c;
+                    content += c;
+                    continue;
+                } else if((c == '\'' && str == '\'') || (c == '"' && str == '"')) {
+                    str = false;
+                    content += c;
+                    continue;
+                }
+            } else if(str === false && (c == '[' || c == '{')) {
+                ++count;
+            } else if(str === false && (c == ']' || c == '}')) {
+                --count;
+            } else if(str === false && count == 0 && c == ',') {
+                res.push(processValue(content));
+                content = "";
+                continue;
+            }
+
+            content += c;
+        }
+
+        if(content.length > 0)
+            { res.push(processValue(content)); }
+        return res;
+    } else if(m = val.match(regex$1["map"])){
+        var count = 0, c = ' ';
+        var res = [];
+        var content = "";
+        var str = false;
+        for(var j = 0, lenJ = m[1].length; j < lenJ; ++j) {
+            c = m[1][j];
+            if(c == '\'' || c == '"') {
+                if(str === false) {
+                    str = c;
+                    content += c;
+                    continue;
+                } else if((c == '\'' && str == '\'') || (c == '"' && str == '"')) {
+                    str = false;
+                    content += c;
+                    continue;
+                }
+            } else if(str === false && (c == '[' || c == '{')) {
+                ++count;
+            } else if(str === false && (c == ']' || c == '}')) {
+                --count;
+            } else if(str === false && count == 0 && c == ',') {
+                res.push(content);
+                content = "";
+                continue;
+            }
+
+            content += c;
+        }
+
+        if(content.length > 0)
+            { res.push(content); }
+
+        var newRes = {};
+        for(var j = 0, lenJ = res.length; j < lenJ; ++j) {
+            if(m = res[j].match(regex$1["key_value"])) {
+                newRes[m[1]] = processValue(m[2]);
+            }
+        }
+
+        return newRes;
+    } else
+        { return val; }
+}
+
+function processFoldedBlock(block) {
+    var lines = block.lines;
+    var children = block.children;
+    var str = lines.join(" ");
+    var chunks = [str];
+    for(var i = 0, len = children.length; i < len; ++i) {
+        chunks.push(processFoldedBlock(children[i]));
+    }
+    return chunks.join("\n");
+}
+
+function processLiteralBlock(block) {
+    var lines = block.lines;
+    var children = block.children;
+    var str = lines.join("\n");
+    for(var i = 0, len = children.length; i < len; ++i) {
+        str += processLiteralBlock(children[i]);
+    }
+    return str;
+}
+
+function processBlock(blocks) {
+    var m = null;
+    var res = {};
+    var lines = null;
+    var children = null;
+    var currentObj = null;
+
+    var level = -1;
+
+    var processedBlocks = [];
+
+    var isMap = true;
+
+    for(var j = 0, lenJ = blocks.length; j < lenJ; ++j) {
+
+        if(level != -1 && level != blocks[j].level)
+            { continue; }
+
+        processedBlocks.push(j);
+
+        level = blocks[j].level;
+        lines = blocks[j].lines;
+        children = blocks[j].children;
+        currentObj = null;
+
+        for(var i = 0, len = lines.length; i < len; ++i) {
+            var line = lines[i];
+
+            if(m = line.match(regex$1["key"])) {
+                var key = m[1];
+
+                if(key[0] == '-') {
+                    key = key.replace(regex$1["item"], "");
+                    if (isMap) {
+                        isMap = false;
+                        if (typeof(res.length) === "undefined") {
+                            res = [];
+                        }
+                    }
+                    if(currentObj != null) { res.push(currentObj); }
+                    currentObj = {};
+                    isMap = true;
+                }
+
+                if(typeof m[2] != "undefined") {
+                    var value = m[2].replace(regex$1["trim"], "");
+                    if(value[0] == '&') {
+                        var nb = processBlock(children);
+                        if(currentObj != null) { currentObj[key] = nb; }
+                        else { res[key] = nb; }
+                        reference_blocks[value.substr(1)] = nb;
+                    } else if(value[0] == '|') {
+                        if(currentObj != null) { currentObj[key] = processLiteralBlock(children.shift()); }
+                        else { res[key] = processLiteralBlock(children.shift()); }
+                    } else if(value[0] == '*') {
+                        var v = value.substr(1);
+                        var no = {};
+
+                        if(typeof reference_blocks[v] == "undefined") {
+                            errors.push("Reference '" + v + "' not found!");
+                        } else {
+                            for(var k in reference_blocks[v]) {
+                                no[k] = reference_blocks[v][k];
+                            }
+
+                            if(currentObj != null) { currentObj[key] = no; }
+                            else { res[key] = no; }
+                        }
+                    } else if(value[0] == '>') {
+                        if(currentObj != null) { currentObj[key] = processFoldedBlock(children.shift()); }
+                        else { res[key] = processFoldedBlock(children.shift()); }
+                    } else {
+                        if(currentObj != null) { currentObj[key] = processValue(value); }
+                        else { res[key] = processValue(value); }
+                    }
+                } else {
+                    if(currentObj != null) { currentObj[key] = processBlock(children); }
+                    else { res[key] = processBlock(children); }
+                }
+            } else if(line.match(/^-\s*$/)) {
+                if (isMap) {
+                    isMap = false;
+                    if (typeof(res.length) === "undefined") {
+                        res = [];
+                    }
+                }
+                if(currentObj != null) { res.push(currentObj); }
+                currentObj = {};
+                isMap = true;
+                continue;
+            } else if(m = line.match(/^-\s*(.*)/)) {
+                if(currentObj != null)
+                    { currentObj.push(processValue(m[1])); }
+                else {
+                    if (isMap) {
+                        isMap = false;
+                        if (typeof(res.length) === "undefined") {
+                            res = [];
+                        }
+                    }
+                    res.push(processValue(m[1]));
+                }
+                continue;
+            }
+        }
+
+        if(currentObj != null) {
+            if (isMap) {
+                isMap = false;
+                if (typeof(res.length) === "undefined") {
+                    res = [];
+                }
+            }
+            res.push(currentObj);
+        }
+    }
+
+    for(var j = processedBlocks.length - 1; j >= 0; --j) {
+        blocks.splice.call(blocks, processedBlocks[j], 1);
+    }
+
+    return res;
+}
+
+function semanticAnalysis(blocks) {
+    var res = processBlock(blocks.children);
+    return res;
+}
+
+function preProcess(src) {
+    var m;
+    var lines = src.split("\n");
+
+    var r = regex$1["comment"];
+
+    for(var i in lines) {
+        if(m = lines[i].match(r)) {
+/*                var cmt = "";
+            if(typeof m[3] != "undefined")
+                lines[i] = m[1];
+            else if(typeof m[3] != "undefined")
+                lines[i] = m[3];
+            else
+                lines[i] = "";
+                */
+            if(typeof m[3] !== "undefined") {
+                lines[i] = m[0].substr(0, m[0].length - m[3].length);
+            }
+        }
+    }
+
+    return lines.join("\n");
+}
+
+function load(str) {
+    errors = [];
+    reference_blocks = [];
+    processing_time = (new Date()).getTime();
+    var pre = preProcess(str);
+    var doc = parser$1(pre);
+    var res = semanticAnalysis(doc);
+    processing_time = (new Date()).getTime() - processing_time;
+
+    return res;
+}
+
+/**
+ * Fork https://github.com/egoist/docute/blob/master/src/utils/front-matter.js
+ */
+/* eslint-disable */
+var optionalByteOrderMark = '\\ufeff?';
+var pattern = '^(' +
+  optionalByteOrderMark +
+  '(= yaml =|---)' +
+  '$([\\s\\S]*?)' +
+  '(?:\\2|\\.\\.\\.)' +
+  '$' +
+  '' +
+  '(?:\\n)?)';
+// NOTE: If this pattern uses the 'g' flag the `regex` variable definition will
+// need to be moved down into the functions that use it.
+var regex = new RegExp(pattern, 'm');
+
+function extractor (string) {
+  string = string || '';
+
+  var lines = string.split(/(\r?\n)/);
+  if (lines[0] && /= yaml =|---/.test(lines[0])) {
+    return parse(string)
+  } else {
+    return { attributes: {}, body: string }
+  }
+}
+
+function parse (string) {
+  var match = regex.exec(string);
+
+  if (!match) {
+    return {
+      attributes: {},
+      body: string
+    }
+  }
+
+  var yaml = match[match.length - 1].replace(/^\s+|\s+$/g, '');
+  var attributes = load(yaml) || {};
+  var body = string.replace(match[0], '');
+
+  return { attributes: attributes, body: body, frontmatter: yaml }
+}
+
+var install = function (hook, vm) {
+  hook.beforeEach(function (content) {
+    var ref = extractor(content);
+    var attributes = ref.attributes;
+    var body = ref.body;
+
+    Docsify.util.merge(vm.config, attributes.config);
+
+    return body
+  });
+};
+
+window.$docsify.plugins = [].concat(install, window.$docsify.plugins);
+
+}());

lib/plugins/zoom-image.js

@@ -0,0 +1,304 @@
+this.D = this.D || {};
+(function () {
+'use strict';
+
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+
+
+
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var zoomImage = createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+  module.exports = factory();
+}(commonjsGlobal, (function () { 'use strict';
+
+var windowWidth = function () { return document.documentElement.clientWidth; };
+var windowHeight = function () { return document.documentElement.clientHeight; };
+
+var elemOffset = function (elem) {
+  var rect = elem.getBoundingClientRect();
+  var docElem = document.documentElement;
+  var win = window;
+  return {
+    top: rect.top + win.pageYOffset - docElem.clientTop,
+    left: rect.left + win.pageXOffset - docElem.clientLeft
+  }
+};
+
+var once = function (elem, type, handler) {
+  var fn = function (e) {
+    e.target.removeEventListener(type, fn);
+    handler();
+  };
+  elem.addEventListener(type, fn);
+};
+
+var Size = function Size(w, h) {
+  this.w = w;
+  this.h = h;
+};
+
+var ZoomImage = function ZoomImage(img, offset) {
+  this.img = img;
+  this.preservedTransform = img.style.transform;
+  this.wrap = null;
+  this.overlay = null;
+  this.offset = offset;
+};
+
+ZoomImage.prototype.forceRepaint = function forceRepaint () {
+  var _ = this.img.offsetWidth;
+  return
+};
+
+ZoomImage.prototype.zoom = function zoom () {
+  var size = new Size(this.img.naturalWidth, this.img.naturalHeight);
+
+  this.wrap = document.createElement('div');
+  this.wrap.classList.add('zoom-img-wrap');
+  this.img.parentNode.insertBefore(this.wrap, this.img);
+  this.wrap.appendChild(this.img);
+
+  this.img.classList.add('zoom-img');
+  this.img.setAttribute('data-action', 'zoom-out');
+
+  this.overlay = document.createElement('div');
+  this.overlay.classList.add('zoom-overlay');
+  document.body.appendChild(this.overlay);
+
+  this.forceRepaint();
+  var scale = this.calculateScale(size);
+
+  this.forceRepaint();
+  this.animate(scale);
+
+  document.body.classList.add('zoom-overlay-open');
+};
+
+ZoomImage.prototype.calculateScale = function calculateScale (size) {
+  var maxScaleFactor = size.w / this.img.width;
+
+  var viewportWidth = (windowWidth() - this.offset);
+  var viewportHeight = (windowHeight() - this.offset);
+  var imageAspectRatio = size.w / size.h;
+  var viewportAspectRatio = viewportWidth / viewportHeight;
+
+  if (size.w < viewportWidth && size.h < viewportHeight) {
+    return maxScaleFactor
+  } else if (imageAspectRatio < viewportAspectRatio) {
+    return (viewportHeight / size.h) * maxScaleFactor
+  }
+  return (viewportWidth / size.w) * maxScaleFactor
+};
+
+ZoomImage.prototype.animate = function animate (scale) {
+  var imageOffset = elemOffset(this.img);
+  var scrollTop = window.pageYOffset;
+
+  var viewportX = (windowWidth() / 2);
+  var viewportY = scrollTop + (windowHeight() / 2);
+
+  var imageCenterX = imageOffset.left + (this.img.width / 2);
+  var imageCenterY = imageOffset.top + (this.img.height / 2);
+
+  var tx = viewportX - imageCenterX;
+  var ty = viewportY - imageCenterY;
+  var tz = 0;
+
+  var imgTr = "scale(" + scale + ")";
+  var wrapTr = "translate3d(" + tx + "px, " + ty + "px, " + tz + "px)";
+
+  this.img.style.transform = imgTr;
+  this.wrap.style.transform = wrapTr;
+};
+
+ZoomImage.prototype.dispose = function dispose () {
+  if (this.wrap === null || this.wrap.parentNode === null) {
+    return
+  }
+  this.img.classList.remove('zoom-img');
+  this.img.setAttribute('data-action', 'zoom');
+
+  this.wrap.parentNode.insertBefore(this.img, this.wrap);
+  this.wrap.parentNode.removeChild(this.wrap);
+
+  document.body.removeChild(this.overlay);
+  document.body.classList.remove('zoom-overlay-transitioning');
+};
+
+ZoomImage.prototype.close = function close () {
+    var this$1 = this;
+
+  document.body.classList.add('zoom-overlay-transitioning');
+  this.img.style.transform = this.preservedTransform;
+  if (this.img.style.length === 0) {
+    this.img.removeAttribute('style');
+  }
+  this.wrap.style.transform = 'none';
+
+  once(this.img, 'transitionend', function () {
+    this$1.dispose();
+    // remove class should happen after dispose. Otherwise,
+    // a new click event could fire and create a duplicate ZoomImage for
+    // the same <img> element.
+    document.body.classList.remove('zoom-overlay-open');
+  });
+};
+
+/**
+ * Pure JavaScript implementation of zoom.js.
+ *
+ * Original preamble:
+ * zoom.js - It's the best way to zoom an image
+ * @version v0.0.2
+ * @link https://github.com/fat/zoom.js
+ * @license MIT
+ *
+ * Needs a related CSS file to work. See the README at
+ * https://github.com/nishanths/zoom.js for more info.
+ *
+ * This is a fork of the original zoom.js implementation by @fat.
+ * Copyrights for the original project are held by @fat. All other copyright
+ * for changes in the fork are held by Nishanth Shanmugham.
+ *
+ * Copyright (c) 2013 @fat
+ * The MIT License. Copyright © 2016 Nishanth Shanmugham.
+ */
+
+var current = null;
+var offset = 80;
+var initialScrollPos = -1;
+var initialTouchPos = -1;
+
+function handleScroll() {
+  if (initialScrollPos === -1) {
+    initialScrollPos = window.pageYOffset;
+  }
+
+  var deltaY = Math.abs(initialScrollPos - window.pageYOffset);
+  if (deltaY >= 40) {
+    closeCurrent();
+  }
+}
+
+function handleKeyup(e) {
+  if (e.keyCode === 27) {
+    closeCurrent();
+  }
+}
+
+function handleTouchStart(e) {
+  var t = e.touches[0];
+  if (t === null) {
+    return
+  }
+
+  initialTouchPos = t.pageY;
+  e.target.addEventListener('touchmove', handleTouchMove);
+}
+
+function handleTouchMove(e) {
+  var t = e.touches[0];
+  if (t === null) {
+    return
+  }
+
+  if (Math.abs(t.pageY - initialTouchPos) > 10) {
+    closeCurrent();
+    e.target.removeEventListener('touchmove', handleTouchMove);
+  }
+}
+
+function handleClick() {
+  closeCurrent();
+}
+
+function addCloseListeners() {
+  document.addEventListener('scroll', handleScroll);
+  document.addEventListener('keyup', handleKeyup);
+  document.addEventListener('touchstart', handleTouchStart);
+  document.addEventListener('click', handleClick, true);
+}
+
+function removeCloseListeners() {
+  document.removeEventListener('scroll', handleScroll);
+  document.removeEventListener('keyup', handleKeyup);
+  document.removeEventListener('touchstart', handleTouchStart);
+  document.removeEventListener('click', handleClick, true);
+}
+
+function closeCurrent(force) {
+  if (current === null) {
+    return
+  }
+  if (force) {
+    current.dispose();
+  } else {
+    current.close();
+  }
+  removeCloseListeners();
+  current = null;
+}
+
+function prepareZoom(e) {
+  if (document.body.classList.contains('zoom-overlay-open')) {
+    return
+  }
+
+  if (e.metaKey || e.ctrlKey) {
+    window.open((e.target.getAttribute('data-original') || e.target.src), '_blank');
+    return
+  }
+
+  if (e.target.width >= windowWidth() - offset) {
+    return
+  }
+
+  closeCurrent(true);
+
+  current = new ZoomImage(e.target, offset);
+  current.zoom();
+
+  addCloseListeners();
+}
+
+var zoom = function (el) {
+  el.setAttribute('data-action', 'zoom');
+  el.addEventListener('click', prepareZoom);
+  return function () { return el.removeEventListener('click', prepareZoom); }
+};
+
+return zoom;
+
+})));
+});
+
+var style = "img[data-action=\"zoom\"] {\n  cursor: pointer;\n  cursor: -webkit-zoom-in;\n  cursor: zoom-in;\n}\n.zoom-img,\n.zoom-img-wrap {\n  position: relative;\n  z-index: 666;\n  transition: -webkit-transform 300ms cubic-bezier(.2,0,.2,1);\n  transition: transform 300ms cubic-bezier(.2,0,.2,1);\n  transition: transform 300ms cubic-bezier(.2,0,.2,1), -webkit-transform 300ms cubic-bezier(.2,0,.2,1);\n}\n.zoom-overlay {\n  z-index: 420;\n  background: #fff;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.zoom-overlay-open .zoom-overlay {\n  opacity: 1;\n}\n.zoom-overlay-open {\n  cursor: pointer;\n  cursor: -webkit-zoom-out;\n  cursor: zoom-out;\n}\n.zoom-overlay-transitioning {\n  cursor: default;\n}\n.zoom-overlay-open.zoom-overlay-transitioning .zoom-overlay{\n  opacity: 0;\n}\n";
+
+function install (hook) {
+  var dom = Docsify.dom;
+  var destroys;
+
+  // add style
+  dom.appendTo(dom.head, dom.create('style', style));
+
+  hook.doneEach(function (_) {
+    var images = dom.findAll('img:not(.emoji)');
+
+    if (Array.isArray(destroys) && destroys.length) {
+      destroys.forEach(function (o) { return o(); });
+      destroys = [];
+    }
+
+    destroys = images.map(zoomImage);
+  });
+}
+
+$docsify.plugins = [].concat(install, $docsify.plugins);
+
+}());

lib/plugins/zoom-image.min.js

@@ -0,0 +1 @@
+this.D=this.D||{},function(){"use strict";function t(t,e){return e={exports:{}},t(e,e.exports),e.exports}function e(t){var e,n=Docsify.dom;n.appendTo(n.head,n.create("style",i)),t.doneEach(function(t){var i=n.findAll("img:not(.emoji)");Array.isArray(e)&&e.length&&(e.forEach(function(t){return t()}),e=[]),e=i.map(o)})}var n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},o=t(function(t,e){!function(e,n){t.exports=n()}(n,function(){function t(){g===-1&&(g=window.pageYOffset);var t=Math.abs(g-window.pageYOffset);t>=40&&a()}function e(t){27===t.keyCode&&a()}function n(t){var e=t.touches[0];null!==e&&(y=e.pageY,t.target.addEventListener("touchmove",o))}function o(t){var e=t.touches[0];null!==e&&Math.abs(e.pageY-y)>10&&(a(),t.target.removeEventListener("touchmove",o))}function i(){a()}function r(){document.addEventListener("scroll",t),document.addEventListener("keyup",e),document.addEventListener("touchstart",n),document.addEventListener("click",i,!0)}function s(){document.removeEventListener("scroll",t),document.removeEventListener("keyup",e),document.removeEventListener("touchstart",n),document.removeEventListener("click",i,!0)}function a(t){null!==h&&(t?h.dispose():h.close(),s(),h=null)}function c(t){if(!document.body.classList.contains("zoom-overlay-open"))return t.metaKey||t.ctrlKey?void window.open(t.target.getAttribute("data-original")||t.target.src,"_blank"):void(t.target.width>=m()-v||(a(!0),h=new p(t.target,v),h.zoom(),r()))}var m=function(){return document.documentElement.clientWidth},u=function(){return document.documentElement.clientHeight},d=function(t){var e=t.getBoundingClientRect(),n=document.documentElement,o=window;return{top:e.top+o.pageYOffset-n.clientTop,left:e.left+o.pageXOffset-n.clientLeft}},l=function(t,e,n){var o=function(t){t.target.removeEventListener(e,o),n()};t.addEventListener(e,o)},f=function(t,e){this.w=t,this.h=e},p=function(t,e){this.img=t,this.preservedTransform=t.style.transform,this.wrap=null,this.overlay=null,this.offset=e};p.prototype.forceRepaint=function(){this.img.offsetWidth},p.prototype.zoom=function(){var t=new f(this.img.naturalWidth,this.img.naturalHeight);this.wrap=document.createElement("div"),this.wrap.classList.add("zoom-img-wrap"),this.img.parentNode.insertBefore(this.wrap,this.img),this.wrap.appendChild(this.img),this.img.classList.add("zoom-img"),this.img.setAttribute("data-action","zoom-out"),this.overlay=document.createElement("div"),this.overlay.classList.add("zoom-overlay"),document.body.appendChild(this.overlay),this.forceRepaint();var e=this.calculateScale(t);this.forceRepaint(),this.animate(e),document.body.classList.add("zoom-overlay-open")},p.prototype.calculateScale=function(t){var e=t.w/this.img.width,n=m()-this.offset,o=u()-this.offset,i=t.w/t.h,r=n/o;return t.w<n&&t.h<o?e:i<r?o/t.h*e:n/t.w*e},p.prototype.animate=function(t){var e=d(this.img),n=window.pageYOffset,o=m()/2,i=n+u()/2,r=e.left+this.img.width/2,s=e.top+this.img.height/2,a=o-r,c=i-s,l=0,f="scale("+t+")",p="translate3d("+a+"px, "+c+"px, "+l+"px)";this.img.style.transform=f,this.wrap.style.transform=p},p.prototype.dispose=function(){null!==this.wrap&&null!==this.wrap.parentNode&&(this.img.classList.remove("zoom-img"),this.img.setAttribute("data-action","zoom"),this.wrap.parentNode.insertBefore(this.img,this.wrap),this.wrap.parentNode.removeChild(this.wrap),document.body.removeChild(this.overlay),document.body.classList.remove("zoom-overlay-transitioning"))},p.prototype.close=function(){var t=this;document.body.classList.add("zoom-overlay-transitioning"),this.img.style.transform=this.preservedTransform,0===this.img.style.length&&this.img.removeAttribute("style"),this.wrap.style.transform="none",l(this.img,"transitionend",function(){t.dispose(),document.body.classList.remove("zoom-overlay-open")})};var h=null,v=80,g=-1,y=-1,w=function(t){return t.setAttribute("data-action","zoom"),t.addEventListener("click",c),function(){return t.removeEventListener("click",c)}};return w})}),i='img[data-action="zoom"] {\n  cursor: pointer;\n  cursor: -webkit-zoom-in;\n  cursor: zoom-in;\n}\n.zoom-img,\n.zoom-img-wrap {\n  position: relative;\n  z-index: 666;\n  transition: -webkit-transform 300ms cubic-bezier(.2,0,.2,1);\n  transition: transform 300ms cubic-bezier(.2,0,.2,1);\n  transition: transform 300ms cubic-bezier(.2,0,.2,1), -webkit-transform 300ms cubic-bezier(.2,0,.2,1);\n}\n.zoom-overlay {\n  z-index: 420;\n  background: #fff;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.zoom-overlay-open .zoom-overlay {\n  opacity: 1;\n}\n.zoom-overlay-open {\n  cursor: pointer;\n  cursor: -webkit-zoom-out;\n  cursor: zoom-out;\n}\n.zoom-overlay-transitioning {\n  cursor: default;\n}\n.zoom-overlay-open.zoom-overlay-transitioning .zoom-overlay{\n  opacity: 0;\n}\n';$docsify.plugins=[].concat(e,$docsify.plugins)}();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "3.2.0",
+  "version": "3.4.1",
   "description": "A magical documentation generator.",
   "main": "lib/docsify.js",
   "files": [
@@ -40,11 +40,13 @@
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^7.0.0",
     "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-uglify": "^1.0.1",
     "serve-static": "^1.11.1"
   },
   "dependencies": {
     "marked": "^0.3.6",
-    "prismjs": "^1.5.1"
+    "prismjs": "^1.5.1",
+    "zoom-image": "^0.1.4"
   }
 }

src/core/util/dom.js

@@ -10,7 +10,10 @@ const cacheNode = {}
  */
 export function getNode (el, noCache = false) {
   if (typeof el === 'string') {
-    el = noCache ? find(el) : (cacheNode[el] || find(el))
+    if (typeof window.Vue !== 'undefined') {
+      return find(el)
+    }
+    el = noCache ? find(el) : (cacheNode[el] || (cacheNode[el] = find(el)))
   }
 
   return el

src/plugins/external-script.js

@@ -0,0 +1,21 @@
+function handleExternalScript () {
+  const container = Docsify.dom.getNode('#main')
+  const script = Docsify.dom.find(container, 'script')
+
+  if (script && script.src) {
+    const newScript = document.createElement('script')
+
+    ;['src', 'async', 'defer'].forEach(attribute => {
+      newScript[attribute] = script[attribute]
+    })
+
+    script.parentNode.removeChild(script)
+    container.appendChild(newScript)
+  }
+}
+
+const install = function (hook) {
+  hook.doneEach(handleExternalScript)
+}
+
+window.$docsify.plugins = [].concat(install, window.$docsify.plugins)

src/plugins/zoom-image.js

@@ -0,0 +1,23 @@
+import zoom from 'zoom-image'
+import style from 'zoom-image/css/zoom-image.css'
+
+function install (hook) {
+  const dom = Docsify.dom
+  let destroys
+
+  // add style
+  dom.appendTo(dom.head, dom.create('style', style))
+
+  hook.doneEach(_ => {
+    const images = dom.findAll('img:not(.emoji)')
+
+    if (Array.isArray(destroys) && destroys.length) {
+      destroys.forEach(o => o())
+      destroys = []
+    }
+
+    destroys = images.map(zoom)
+  })
+}
+
+$docsify.plugins = [].concat(install, $docsify.plugins)

src/themes/basic/_coverpage.css

@@ -11,16 +11,16 @@ section.cover {
   }
 
   &.has-mask .mask {
-    position: absolute;
-    size: 100%;
     background-color: $color-bg;
     opacity: .8;
+    position: absolute;
+    size: 100%;
   }
 
   .cover-main {
     flex: 1;
-    text-align: center;
     margin: -20px 16px 0;
+    text-align: center;
     z-index: 1;
   }
 
@@ -34,65 +34,65 @@ section.cover {
   }
 
   p {
-    margin: 1em 0;
     line-height: 1.5rem;
+    margin: 1em 0;
   }
 
   h1 {
-    text-align: center;
-    font-size: 2.5rem;
-    position: relative;
-    margin: .625rem 0 2.5rem;
-    font-weight: 300;
     color: inherit;
+    font-size: 2.5rem;
+    font-weight: 300;
+    margin: .625rem 0 2.5rem;
+    position: relative;
+    text-align: center;
 
     a {
       display: block;
     }
 
     small {
-      position: absolute;
       bottom: -.4375rem;
       font-size: 1rem;
+      position: absolute;
     }
   }
 
   blockquote {
-    text-align: center;
     font-size: 1.5rem;
+    text-align: center;
   }
 
   ul {
-    max-width: 500px;
+    line-height: 1.8;
     list-style-type: none;
     margin: 1em auto;
+    max-width: 500px;
     padding: 0;
-    line-height: 1.8;
   }
 
   .cover-main > p:last-child a {
-    border-radius: 2em;
-    border-width: 1px;
-    border-style: solid;
     border-color: var(--theme-color, $color-primary);
+    border-radius: 2em;
+    border-style: solid;
+    border-width: 1px;
     box-sizing: border-box;
     color: var(--theme-color, $color-primary);
+    display: inline-block;
     font-size: 1.05em;
     letter-spacing: 0.1em;
+    margin-right: 1em;
     padding: 0.75em 2em;
     text-decoration: none;
     transition: all 0.15s ease;
-    margin-right: 1em;
-    display: inline-block;
 
     &:last-child {
-      margin-right: 0;
       background-color: var(--theme-color, $color-primary);
       color: #fff;
+      margin-right: 0;
 
       &:hover {
-        opacity: .8;
         color: inherit;
+        opacity: .8;
       }
     }
 

src/themes/basic/_layout.css

@@ -1,25 +1,25 @@
 * {
-  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-text-size-adjust: none;
   -webkit-touch-callout: none;
-  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
 }
 
 body:not(.ready) {
   overflow: hidden;
 
-  [data-cloak] {
+  [data-cloak], nav {
     display: none;
   }
 }
 
 div#app {
-  text-align: center;
   font-size: 30px;
   font-weight: lighter;
   margin: 40vh auto;
+  text-align: center;
 
   &:empty::before {
     content: "Loading...";
@@ -59,12 +59,12 @@ html, body {
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  color: $color-text;
   font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
   font-size: 15px;
   letter-spacing: 0;
   margin: 0;
   overflow-x: hidden;
-  color: $color-text;
 }
 
 img {
@@ -72,24 +72,24 @@ img {
 }
 
 kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  margin-bottom : 3px;
-  font-size: 12px !important;
-  line-height: 12px;
-  vertical-align: middle;
   border: solid 1px #ccc;
   border-radius: 3px;
+  display: inline-block;
+  font-size: 12px !important;
+  line-height: 12px;
+  margin-bottom : 3px;
+  padding: 3px 5px;
+  vertical-align: middle;
 }
 
 /* navbar */
 nav.app-nav {
+  left: 0;
+  margin: 25px 60px 0 0;
   position: absolute;
   right: 0;
-  left: 0;
-  z-index: 10;
-  margin: 25px 60px 0 0;
   text-align: right;
+  z-index: 10;
 
   &.no-badge {
     margin-right: 25px;
@@ -105,15 +105,15 @@ nav.app-nav {
   }
 
   ul, li {
-    list-style: none;
     display: inline-block;
+    list-style: none;
     margin: 0;
   }
 
   a {
+    color: inherit;
     font-size: 16px;
     text-decoration: none;
-    color: inherit;
     transition: color .3s;
 
     &:hover {
@@ -121,41 +121,41 @@ nav.app-nav {
     }
 
     &.active {
-      color: var(--theme-color, $color-primary);
       border-bottom: 2px solid var(--theme-color, $color-primary);
+      color: var(--theme-color, $color-primary);
     }
   }
 
   /* navbar dropdown */
   li {
-    position: relative;
     display: inline-block;
     margin: 0 1em;
     padding: 5px 0;
+    position: relative;
 
     ul {
-      display: none;
-      box-sizing: border-box;
-      max-height: calc(100vh - 61px);
-      overflow-y: scroll;
-      position: absolute;
-      top: 100%;
-      right: -15px;
       background-color: #fff;
-      padding: 10px 0;
       border: 1px solid #ddd;
       border-bottom-color: #ccc;
-      text-align: left;
       border-radius: 4px;
+      box-sizing: border-box;
+      display: none;
+      max-height: calc(100vh - 61px);
+      overflow-y: scroll;
+      padding: 10px 0;
+      position: absolute;
+      right: -15px;
+      text-align: left;
+      top: 100%;
       white-space: nowrap;
 
       li {
         display: block;
         font-size: 14px;
+        line-height: 1em;
         margin: 0;
         margin: 8px 14px;
         white-space: nowrap;
-        line-height: 1em;
       }
 
       a {
@@ -178,12 +178,12 @@ nav.app-nav {
 
 /* github corner */
 .github-corner {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  text-decoration: none;
   border-bottom: 0;
+  position: fixed;
+  right: 0;
+  text-decoration: none;
+  top: 0;
+  z-index: 1;
 
   &:hover .octo-arm {
     animation:octocat-wave 560ms ease-in-out;
@@ -191,23 +191,23 @@ nav.app-nav {
 
   svg {
     color: $color-bg;
+    fill: var(--theme-color, $color-primary);
     height: 80px;
     width: 80px;
-    fill: var(--theme-color, $color-primary);
   }
 }
 
 /* main */
 main {
   display: block;
-  size: 100vw 100%;
   position: relative;
+  size: 100vw 100%;
 }
 
 .anchor {
+  display: inline-block;
   text-decoration: none;
   transition: all .3s;
-  display: inline-block;
 
   span {
     color: $color-text;
@@ -220,19 +220,19 @@ main {
 
 /* sidebar */
 .sidebar {
+  border-right: 1px solid rgba(0, 0, 0, .07);
   overflow-y: auto;
   padding: 40px 0;
   position: absolute 0 * 0 0;
   transition: transform 250ms ease-out;
   width: $sidebar-width;
   z-index: 20;
-  border-right: 1px solid rgba(0, 0, 0, .07);
 
   > h1 {
-    text-align: center;
     margin: 0 auto 1em;
     font-size: 1.5em;
     font-weight: 300;
+    text-align: center;
 
     a {
       color: inherit;
@@ -255,8 +255,8 @@ main {
   }
 
   ul li a {
-    display: block;
     border-bottom: none;
+    display: block;
   }
 
   ul li ul {
@@ -284,17 +284,17 @@ main {
 /* sidebar toggle */
 .sidebar-toggle {
   background-color: transparent;
+  background-color: rgba($color-bg, .8);
   border: 0;
   outline: none;
+  outline: none;
+  padding: 10px;
   position: absolute * * 0 0;
   text-align: center;
   transition: opacity .3s;
   width: 30px;
-  z-index: 30;
-  outline: none;
   width: calc($sidebar-width - 16px);
-  padding: 10px;
-  background-color: rgba($color-bg, .8);
+  z-index: 30;
 
   .sidebar-toggle-button:hover {
     opacity: .4;
@@ -303,8 +303,8 @@ main {
   span {
     background-color: var(--theme-color, $color-primary);
     display: block;
-    size: 16px 2px;
     margin-bottom: 4px;
+    size: 16px 2px;
   }
 }
 
@@ -316,17 +316,17 @@ body.sticky {
 
 /* main content */
 .content {
-  position: absolute 0 0 0 $sidebar-width;
   padding-top: 20px;
+  position: absolute 0 0 0 $sidebar-width;
   transition: left 250ms ease;
 }
 
 /* markdown content found on pages */
 .markdown-section {
-  position: relative;
   margin: 0 auto;
   max-width: 800px;
   padding: 20px 15px 40px 15px;
+  position: relative;
 
   > * {
     box-sizing: border-box;
@@ -340,28 +340,28 @@ body.sticky {
 
 .markdown-section hr {
   border: none;
-  margin: 2em 0;
   border-bottom: 1px solid #eee;
+  margin: 2em 0;
 }
 
 .markdown-section table {
-  display: block;
-  width: 100%;
-  overflow: auto;
-  border-spacing: 0;
   border-collapse: collapse;
+  border-spacing: 0;
+  display: block;
   margin-bottom: 1em;
+  overflow: auto;
+  width: 100%;
 }
 
 .markdown-section th {
+  border: 1px solid #ddd;
   font-weight: bold;
   padding: 6px 13px;
-  border: 1px solid #ddd;
 }
 
 .markdown-section td {
-  padding: 6px 13px;
   border: 1px solid #ddd;
+  padding: 6px 13px;
 }
 
 .markdown-section tr {
@@ -372,28 +372,28 @@ body.sticky {
 }
 
 .markdown-section p.tip {
-  padding: 12px 24px 12px 30px;
-  margin: 2em 0;
-  border-left: 4px solid #f66;
   background-color: #f8f8f8;
-  position: relative;
   border-bottom-right-radius: 2px;
+  border-left: 4px solid #f66;
   border-top-right-radius: 2px;
+  margin: 2em 0;
+  padding: 12px 24px 12px 30px;
+  position: relative;
 
   &:before {
-    position: absolute;
-    top: 14px;
-    left: -12px;
     background-color: #f66;
+    border-radius: 100%;
     color: $color-bg;
     content: "!";
-    size: 20px;
-    border-radius: 100%;
-    text-align: center;
-    line-height: 20px;
-    font-weight: bold;
     font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
     font-size: 14px;
+    font-weight: bold;
+    left: -12px;
+    line-height: 20px;
+    position: absolute;
+    size: 20px;
+    text-align: center;
+    top: 14px;
   }
 
   code {
@@ -406,9 +406,9 @@ body.sticky {
 }
 
 .markdown-section p.warn {
-  padding: 1em;
   background: rgba($color-primary, 0.1);
   border-radius: 2px;
+  padding: 1em;
 }
 
 body.close {
@@ -460,8 +460,8 @@ body.close {
   }
 
   .sidebar-toggle {
-    width: auto;
     background-color: transparent;
+    width: auto;
   }
 
   body.close {
@@ -470,9 +470,9 @@ body.close {
     }
 
     .sidebar-toggle {
-      width: calc($sidebar-width - 16px);
       background-color: rgba($color-bg, .8);
       transition: 1s background-color;
+      width: calc($sidebar-width - 16px);
     }
 
     .content {

src/themes/buble.css

@@ -20,8 +20,8 @@ $sidebar-width: 16em;
 
   li {
     list-style: none;
-    padding: 0.2em 0 0.2em 1em;
     margin: 0;
+    padding: 0.2em 0 0.2em 1em;
   }
 
   ul li ul {
@@ -29,11 +29,11 @@ $sidebar-width: 16em;
   }
 
   li.active {
-    background-color: #eee;
-
     a {
       color: #333;
     }
+
+    background-color: #eee;
   }
 }
 
@@ -42,8 +42,8 @@ $sidebar-width: 16em;
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-  font-weight: 400;
   color: #333;
+  font-weight: 400;
 }
 
 .markdown-section a {
@@ -54,30 +54,29 @@ $sidebar-width: 16em;
 .markdown-section p,
 .markdown-section ul,
 .markdown-section ol {
-  word-spacing: 0.05em;
   line-height: 1.6em;
   margin: 0 0 1em 0;
+  word-spacing: 0.05em;
 }
 
 .markdown-section h1 {
-  margin: 0 0 1em;
   font-size: 2em;
   font-weight: 500;
+  margin: 0 0 1em;
 }
 
 .markdown-section h2 {
-  padding: 1rem 0 0 0;
-  margin: 0 0 1rem 0;
   font-size: 1.8em;
   font-weight: 400;
+  margin: 0 0 1rem 0;
+  padding: 1rem 0 0 0;
 }
 
 .markdown-section h3 {
-  margin: 52px 0 1.2em;
   font-size: 1.5em;
+  margin: 52px 0 1.2em;
 }
 
-
 .markdown-section h4 {
   font-size: 1.25em;
 }
@@ -87,8 +86,8 @@ $sidebar-width: 16em;
 }
 
 .markdown-section h6 {
-  font-size: 1em;
   color: #777;
+  font-size: 1em;
 }
 
 .markdown-section figure,
@@ -104,13 +103,13 @@ $sidebar-width: 16em;
 }
 
 .markdown-section li {
-  margin: 0;
   line-height: 1.5;
+  margin: 0;
 }
 
 .markdown-section blockquote {
-  color: #858585;
   border-left: 4px solid var(--theme-color, $color-primary);
+  color: #858585;
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -130,29 +129,29 @@ $sidebar-width: 16em;
 
 .markdown-section code {
   background-color: #f9f9f9;
-  padding: 0.2em 0.4em;
   border-radius: 3px;
-  white-space: pre;
   font-family: Inconsolata;
+  padding: 0.2em 0.4em;
+  white-space: pre;
 }
 
 .markdown-section pre {
   background-color: #f9f9f9;
   border-left: 2px solid #eee;
-  padding: 8px;
-  margin: 0 0 1em 0;
   font-family: Inconsolata;
-  padding: 0 10px 12px 0;
   font-size: 16px;
+  margin: 0 0 1em 0;
+  padding: 8px;
+  padding: 0 10px 12px 0;
   overflow: auto;
   word-wrap: normal;
 }
 
 /* code highlight */
+.token.cdata,
 .token.comment,
-.token.prolog,
 .token.doctype,
-.token.cdata {
+.token.prolog {
   color: #93a1a1; /* base1 */
 }
 
@@ -218,15 +217,15 @@ $sidebar-width: 16em;
 }
 
 .markdown-section pre>code {
+  background-color: #f8f8f8;
+  border-radius: 2px;
   display: block;
   font-family: Inconsolata;
-  overflow: inherit;
-  max-width: inherit;
-  position: relative;
-  background-color: #f8f8f8;
-  padding: 20px 0.8em 20px;
   line-height: 1.1em;
-  border-radius: 2px;
+  max-width: inherit;
+  overflow: inherit;
+  padding: 20px 0.8em 20px;
+  position: relative;
 }
 
 .markdown-section code::after, .markdown-section code::before {
@@ -234,7 +233,7 @@ $sidebar-width: 16em;
 }
 
 code .token {
-  min-height: 1.5em;
   -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
+  min-height: 1.5em;
 }

src/themes/dark.css

@@ -14,8 +14,8 @@ body {
 
 /* sidebar */
 .sidebar {
-  color: #c8c8c8;
   background-color: $color-bg;
+  color: #c8c8c8;
 
   li {
     margin: 6px 15px;
@@ -23,11 +23,11 @@ body {
 
   ul li a {
     color: #c8c8c8;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    text-decoration: none;
     font-size: 14px;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &:hover {
       text-decoration: underline;
@@ -50,8 +50,8 @@ body {
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-  font-weight: 600;
   color: #2c3e50;
+  font-weight: 600;
 }
 
 .markdown-section a {
@@ -60,8 +60,8 @@ body {
 }
 
 .markdown-section h1 {
-  margin: 0 0 1em;
   font-size: 2em;
+  margin: 0 0 1em;
 }
 
 .markdown-section h2 {
@@ -70,8 +70,8 @@ body {
 }
 
 .markdown-section h3 {
-  margin: 40px 0 .6em;
   font-size: 1.5em;
+  margin: 40px 0 .6em;
 }
 
 .markdown-section h4 {
@@ -83,8 +83,8 @@ body {
 }
 
 .markdown-section h6 {
-  font-size: 1em;
   color: #777;
+  font-size: 1em;
 }
 
 .markdown-section figure,
@@ -107,8 +107,8 @@ body {
 }
 
 .markdown-section blockquote {
-  color: #858585;
   border-left: 4px solid var(--theme-color, $color-primary);
+  color: #858585;
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -127,14 +127,14 @@ body {
 }
 
 .markdown-section code {
+  background-color: #282828;
   border-radius: 2px;
   color: #657b83;
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
+  font-size: 0.8em;
   margin: 0 2px;
   padding: 3px 5px;
   white-space: nowrap;
-  font-size: 0.8em;
-  font-family: 'Roboto Mono', Monaco, courier, monospace;
-  background-color: #282828;
 }
 
 .markdown-section pre {
@@ -144,9 +144,9 @@ body {
   font-family: 'Roboto Mono', Monaco, courier, monospace;
   line-height: 1.5em;
   margin: 1.2em 0;
+  overflow: auto;
   padding: 0 1.4em;
   position: relative;
-  overflow: auto;
   word-wrap: normal;
 }
 
@@ -257,10 +257,10 @@ body {
   font-size: 0.8em;
   line-height: inherit;
   margin: 0 2px;
+  max-width: inherit;
   overflow: inherit;
   padding: 2.2em 5px;
   white-space: inherit;
-  max-width: inherit;
 }
 
 .markdown-section code::after, .markdown-section code::before {
@@ -268,9 +268,9 @@ body {
 }
 
 code .token {
-  min-height: 1.5em;
-  -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  min-height: 1.5em;
 }
 
 pre::after {
@@ -293,7 +293,7 @@ pre::after {
 }
 
 input[type="search"] {
-  border-color: #4f4f4f;
   background: #4f4f4f;
+  border-color: #4f4f4f;
   color: #c8c8c8;
 }

src/themes/vue.css

@@ -14,8 +14,8 @@ body {
 
 /* sidebar */
 .sidebar {
-  color: #364149;
   background-color: $color-bg;
+  color: #364149;
 
   li {
     margin: 6px 0 6px 15px;
@@ -23,12 +23,12 @@ body {
 
   ul li a {
     color: #505d6b;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    text-decoration: none;
     font-size: 14px;
     font-weight: normal;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &:hover {
       text-decoration: underline;
@@ -40,9 +40,9 @@ body {
   }
 
   ul li.active>a {
+    border-right: 2px solid;
     color: var(--theme-color, $color-primary);
     font-weight: 600;
-    border-right: 2px solid;
   }
 }
 
@@ -61,8 +61,8 @@ body {
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-  font-weight: 600;
   color: #2c3e50;
+  font-weight: 600;
 }
 
 .markdown-section a {
@@ -71,8 +71,8 @@ body {
 }
 
 .markdown-section h1 {
-  margin: 0 0 1em;
   font-size: 2em;
+  margin: 0 0 1em;
 }
 
 .markdown-section h2 {
@@ -81,8 +81,8 @@ body {
 }
 
 .markdown-section h3 {
-  margin: 40px 0 .6em;
   font-size: 1.5em;
+  margin: 40px 0 .6em;
 }
 
 .markdown-section h4 {
@@ -94,8 +94,8 @@ body {
 }
 
 .markdown-section h6 {
-  font-size: 1em;
   color: #777;
+  font-size: 1em;
 }
 
 .markdown-section figure,
@@ -118,8 +118,8 @@ body {
 }
 
 .markdown-section blockquote {
-  color: #858585;
   border-left: 4px solid var(--theme-color, $color-primary);
+  color: #858585;
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -138,14 +138,14 @@ body {
 }
 
 .markdown-section code {
+  background-color: #f8f8f8;
   border-radius: 2px;
   color: #e96900;
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
+  font-size: 0.8em;
   margin: 0 2px;
   padding: 3px 5px;
   white-space: nowrap;
-  font-size: 0.8em;
-  font-family: 'Roboto Mono', Monaco, courier, monospace;
-  background-color: #f8f8f8;
 }
 
 .markdown-section pre {
@@ -155,9 +155,9 @@ body {
   font-family: 'Roboto Mono', Monaco, courier, monospace;
   line-height: 1.5em;
   margin: 1.2em 0;
+  overflow: auto;
   padding: 0 1.4em;
   position: relative;
-  overflow: auto;
   word-wrap: normal;
 }
 
@@ -268,10 +268,10 @@ body {
   font-size: 0.8em;
   line-height: inherit;
   margin: 0 2px;
+  max-width: inherit;
   overflow: inherit;
   padding: 2.2em 5px;
   white-space: inherit;
-  max-width: inherit;
 }
 
 .markdown-section code::after, .markdown-section code::before {
@@ -279,9 +279,9 @@ body {
 }
 
 code .token {
-  min-height: 1.5em;
-  -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  min-height: 1.5em;
 }
 
 pre::after {