From 6eada5a2f75e8d1e2b6329f055a14f782406dc1f Mon Sep 17 00:00:00 2001
From: Johannes Rappen <jrappen@outlook.com>
Date: Thu, 9 Mar 2017 22:19:07 +0100
Subject: [PATCH 1/3] update english docs

---
 docs/README.md             | 14 ++++++-------
 docs/_sidebar.md           | 20 +++++++++----------
 docs/cdn.md                | 15 +++++++++-----
 docs/configuration.md      | 26 +++++++------------------
 docs/cover.md              | 15 +++++++-------
 docs/custom-navbar.md      | 40 ++++++++++++++++++++++++++++++--------
 docs/deploy.md             | 12 ++++++------
 docs/helpers.md            | 11 ++++++-----
 docs/language-highlight.md | 12 +++++-------
 docs/markdown.md           |  2 +-
 docs/more-pages.md         |  7 +++----
 docs/plugins.md            | 27 +++++++++++++------------
 docs/pwa.md                |  8 +++++---
 docs/quickstart.md         | 20 +++++++++----------
 docs/sw.js                 |  1 +
 docs/themes.md             | 23 +++++++++++++---------
 docs/vue.md                | 20 ++++++++++++-------
 docs/write-a-plugin.md     |  5 ++---
 docs/zh-cn/_sidebar.md     | 10 +++++-----
 19 files changed, 159 insertions(+), 129 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 4d407d77..1873d46c 100644
--- a/docs/README.md
+++ b/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
 
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 9d1885b7..c41ac66a 100644
--- a/docs/_sidebar.md
+++ b/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)
@@ -13,10 +13,10 @@
   - [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)
\ No newline at end of file
+- [Changelog](/changelog)
diff --git a/docs/cdn.md b/docs/cdn.md
index 1e0b2ec8..63f318ba 100644
--- a/docs/cdn.md
+++ b/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.
-
diff --git a/docs/configuration.md b/docs/configuration.md
index c418aaf6..f5880f0a 100644
--- a/docs/configuration.md
+++ b/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,7 +161,6 @@ window.$docsify = {
 }
 ```
 
-
 ## coverpage
 
 - Type: `Boolean|String`
@@ -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,7 +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.
diff --git a/docs/cover.md b/docs/cover.md
index 87bd4951..4d7a4eaf 100644
--- a/docs/cover.md
+++ b/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)
 ```
diff --git a/docs/custom-navbar.md b/docs/custom-navbar.md
index ed755399..5c436bea 100644
--- a/docs/custom-navbar.md
+++ b/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,10 +52,10 @@ 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)
@@ -68,4 +69,27 @@ 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/)
+```
diff --git a/docs/deploy.md b/docs/deploy.md
index ed25b028..8641bb90 100644
--- a/docs/deploy.md
+++ b/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)
 
diff --git a/docs/helpers.md b/docs/helpers.md
index 85a7035c..fe636b2e 100644
--- a/docs/helpers.md
+++ b/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
diff --git a/docs/language-highlight.md b/docs/language-highlight.md
index 22a5700c..2bd8a3cc 100644
--- a/docs/language-highlight.md
+++ b/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.
diff --git a/docs/markdown.md b/docs/markdown.md
index a45f188b..a50411a3 100644
--- a/docs/markdown.md
+++ b/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 = {
diff --git a/docs/more-pages.md b/docs/more-pages.md
index 70686687..59ceb33d 100644
--- a/docs/more-pages.md
+++ b/docs/more-pages.md
@@ -16,7 +16,6 @@ For example, the directory structure is as follows:
 
 Matching routes
 
-
 ```text
 docs/README.md        => http://domain.com
 docs/guide.md         => http://domain.com/guide
@@ -38,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`:
@@ -56,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 -->
@@ -67,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>
 ```
diff --git a/docs/plugins.md b/docs/plugins.md
index 8c5f8bcd..225a684f 100644
--- a/docs/plugins.md
+++ b/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,25 +53,29 @@ 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
@@ -80,7 +83,7 @@ The default is to support parsing emoji. For example `:100:` will be parsed to :
 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.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
 ```
 
 ## Zoom image
@@ -88,5 +91,5 @@ If the script on the page is an external one (imports a js file via `src` attrib
 Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image).
 
 ```html
-<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
 ```
diff --git a/docs/pwa.md b/docs/pwa.md
index 7cf0200f..e8d1c74d 100644
--- a/docs/pwa.md
+++ b/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*
 
diff --git a/docs/quickstart.md b/docs/quickstart.md
index 845ea184..7e3df390 100644
--- a/docs/quickstart.md
+++ b/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).
diff --git a/docs/sw.js b/docs/sw.js
index 1e4aaeb7..92df1f45 100644
--- a/docs/sw.js
+++ b/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'
diff --git a/docs/themes.md b/docs/themes.md
index ed5ae40a..7c69069e 100644
--- a/docs/themes.md
+++ b/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>
 
diff --git a/docs/vue.md b/docs/vue.md
index b9714ee4..4eaa1fea 100644
--- a/docs/vue.md
+++ b/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/).
diff --git a/docs/write-a-plugin.md b/docs/write-a-plugin.md
index 71a74a53..045cd615 100644
--- a/docs/write-a-plugin.md
+++ b/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 = {
     }
   ]
 }
-```
\ No newline at end of file
+```
diff --git a/docs/zh-cn/_sidebar.md b/docs/zh-cn/_sidebar.md
index d9376b4a..1802cf66 100644
--- a/docs/zh-cn/_sidebar.md
+++ b/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)
\ No newline at end of file
+- [Changelog](zh-cn/changelog)

From 0b1fc2343f6a0a43b2550fa195fc4c08f67fa70f Mon Sep 17 00:00:00 2001
From: Johannes Rappen <jrappen@outlook.com>
Date: Thu, 9 Mar 2017 22:19:57 +0100
Subject: [PATCH 2/3] update main markdown files

---
 CHANGELOG.md | 109 +++++++--------
 HISTORY.md   | 368 ++++++++++++++++++++++++++++++++++-----------------
 README.md    |  27 ++--
 3 files changed, 314 insertions(+), 190 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20185491..5295581f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,86 +1,75 @@
+# 3.4.0 / 2017-03-09
 
-3.4.0 / 2017-03-09
-==================
+* feat(zoom-image): add plugin
 
-  * feat(zoom-image): add plugin
+# 3.3.0 / 2017-03-07
 
-3.3.0 / 2017-03-07
-==================
+* add front-matter plugin
+* add external-script plugin
+* Fix nav showing while loading ([#112](https://github.com/QingWei-Li/docsify/issues/112))
+* Fix a typo ([#111](https://github.com/QingWei-Li/docsify/issues/111))
+* Update changelog
 
-  * add front-matter plugin
-  * add external-script plugin
-  * Fix nav showing while loading (#112)
-  * Fix a typo (#111)
-  * Update changelog
+# 3.2.0 / 2017-02-28
 
-3.2.0 / 2017-02-28
-==================
+* 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)
 
-  * 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.1.2 / 2017-02-27
 
-3.1.2 / 2017-02-27
-==================
+* fix(search): dont search nameLink, fixed [#102](https://github.com/QingWei-Li/docsify/issues/102)
 
-  * fix(search): dont search nameLink, fixed [#102](https://github.com/QingWei-Li/docsify/issues/102)
+# 3.1.1 / 2017-02-24
 
-3.1.1 / 2017-02-24
-==================
+* 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)
 
-  * 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.1.0 / 2017-02-22
 
-3.1.0 / 2017-02-22
-==================
+* fix(search): incorrect anchor link, fixed [#90](https://github.com/QingWei-Li/docsify/issues/90)
+* feat(emoji): add emoji plugin
 
-  * fix(search): incorrect anchor link, fixed [#90](https://github.com/QingWei-Li/docsify/issues/90)
-  * feat(emoji): add emoji plugin
+# 3.0.5 / 2017-02-21
 
-3.0.5 / 2017-02-21
-==================
+* 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)
 
-  * 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.4 / 2017-02-20
 
-3.0.4 / 2017-02-20
-==================
+* fix(render): execute script
+* fix(render): disable rendering sub list when loadSidebar is false
 
-  * fix(render): execute script
-  * fix(render): disable rendering sub list when loadSidebar is false
+# 3.0.3 / 2017-02-19
 
-3.0.3 / 2017-02-19
-==================
+* fixed look of links in blockquote
+* fix(scroll) highlight bug
 
-  * fixed look of links in blockquote
-  * fix(scroll) highlight bug
+# 3.0.2 / 2017-02-19
 
-3.0.2 / 2017-02-19
-==================
+* fix(search): add lazy input
+* fix(compiler): link
 
-  * fix(search): add lazy input
-  * fix(compiler): link
+# 3.0.1 / 2017-02-19
 
-3.0.1 / 2017-02-19
-==================
+* fix(route): empty alias
 
-  * fix(route): empty alias
-
-3.0.0 / 2017-02-19
-==================
+# 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`)
diff --git a/HISTORY.md b/HISTORY.md
index 6c9358ee..77331edd 100644
--- a/HISTORY.md
+++ b/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
\ No newline at end of file
+
+* Add buble.css
diff --git a/README.md b/README.md
index b8695115..6b722a62 100644
--- a/README.md
+++ b/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

From 262bf139641e2c9717a2f07ce8266896455a466e Mon Sep 17 00:00:00 2001
From: Johannes Rappen <jrappen@outlook.com>
Date: Thu, 9 Mar 2017 22:22:35 +0100
Subject: [PATCH 3/3] order css source alphabetically

---
 src/themes/basic/_coverpage.css |  40 +++++-----
 src/themes/basic/_layout.css    | 134 ++++++++++++++++----------------
 src/themes/buble.css            |  53 +++++++------
 src/themes/dark.css             |  36 ++++-----
 src/themes/vue.css              |  36 ++++-----
 5 files changed, 149 insertions(+), 150 deletions(-)

diff --git a/src/themes/basic/_coverpage.css b/src/themes/basic/_coverpage.css
index 743d8806..9d5aa7f2 100644
--- a/src/themes/basic/_coverpage.css
+++ b/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;
       }
     }
 
diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
index f95bcf33..e8593030 100644
--- a/src/themes/basic/_layout.css
+++ b/src/themes/basic/_layout.css
@@ -1,10 +1,10 @@
 * {
-  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) {
@@ -16,10 +16,10 @@ body:not(.ready) {
 }
 
 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 {
diff --git a/src/themes/buble.css b/src/themes/buble.css
index 3cb84d21..f70e6c0e 100644
--- a/src/themes/buble.css
+++ b/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;
 }
diff --git a/src/themes/dark.css b/src/themes/dark.css
index 2a69641d..5ee25855 100644
--- a/src/themes/dark.css
+++ b/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;
 }
diff --git a/src/themes/vue.css b/src/themes/vue.css
index 4c3d03f7..818123df 100644
--- a/src/themes/vue.css
+++ b/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 {