-> v1.5.0

CHANGELOG.md

@@ -1,14 +1,25 @@
+## 1.5.0
+
+### Bug fixes
+- Fix slugify.
+- Fix nav highlight.
+
+### Features
+- Initialize the configuration by `window.$docsify`.
+- Markdown parser is configurable.
+
 ## 1.4.3
+### Bug fixes
+- Tweak style.
+
+## 1.4.2
 
 ### Bug fixes
 - Fix toggle button style.
 - Support `mailto`, `tel`, etc. href type
-
-
-## 1.4.2
-### Bug fixes
 - Fix scroll to top.
 
+
 ## 1.4.1
 ### Bug fixes
 - Fix generate slug.

README.md

@@ -19,7 +19,7 @@
 - [CLI](https://github.com/QingWei-Li/docsify-cli)
 
 ## Features
-- Simple and lightweight (~12kb gzipped)
+- Simple and lightweight (~13kB gzipped)
 - Multiple themes
 - Not build static html files
 
@@ -51,6 +51,7 @@ These open-source projects are using docsify to generate their sites. Pull reque
 
 - [docsify](https://docsify.js.org) - A magical documentation site generator.
 - [Snipaste](https://docs.snipaste.com/) - A new way to boost your productivity.
+- [puck](https://puck.zz173.com/) - A small & magical php framework.
 
 ## Similar projects
 - [docute](https://github.com/egoist/docute) - 📜 Effortlessly documentation done right
@@ -67,11 +68,20 @@ These open-source projects are using docsify to generate their sites. Pull reque
 
 ## Development
 
+### prepare
 ```shell
 npm i && npm run dev
 open http://localhost:3000
 ```
 
+### More Language Highlight
+
+```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>
+```
+
 ## License
 MIT
 

docs/README.md

@@ -60,7 +60,11 @@ docsify serve docs
 
 Read more [docsify-cli](https://github.com/QingWei-Li/docsify-cli)
 
-## Themes
+
+
+## More
+
+### Themes
 Currently available `vue.css` and `buble.css`
 ```html
 <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
@@ -74,8 +78,6 @@ Minified files
 <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
 ```
 
-## More
-
 ### Multiple pages
 If you need other pages, directly create the markdown file, such as `guide.md` is `/#/guide`.
 
@@ -131,31 +133,75 @@ Currently the background of cover page is generated randomly. We can customize t
 ![color](#f0f0f0)
 ```
 
+### Markdown parser
 
-### Options
+Docsify uses [marked](https://github.com/chjj/marked) to parse markdown, we can configure it
 
-#### repo
+```js
+window.$docsify = {
+  markdown: {
+    smartypants: true
+  }
+}
+```
+
+And can even be completely customized
+
+```js
+window.$docsify = {
+  markdown: function(marked) {
+    // ...
+
+    return marked
+  }
+}
+```
+
+## Options
+
+You can add configuration by script tag attributes or `window.$docsify`.
+
+### repo
 Display the [GitHub Corner](http://tholman.com/github-corners/) widget.
 
 ```html
 <script src="//unpkg.com/docsify" data-repo="your/repo"></script>
 ```
 
-#### max-level
+
+```js
+window.$docsify = {
+  repo: 'your/repo'
+}
+```
+
+### max-level
 TOC level.
 
 ```html
 <script src="//unpkg.com/docsify" data-max-level="6"></script>
 ```
 
-#### el
+```js
+window.$docsify = {
+  maxLevel: 6
+}
+```
+
+### el
 Root element.
 
 ```html
 <script src="//unpkg.com/docsify" data-el="#app"></script>
 ```
 
-#### sidebar-toggle
+```js
+window.$docsify = {
+  el: '#app'
+}
+```
+
+### sidebar-toggle
 
 Sidebar with toggle
 
@@ -163,7 +209,13 @@ Sidebar with toggle
 <script src="//unpkg.com/docsify" data-sidebar-toggle></script>
 ```
 
-#### sidebar
+```js
+window.$docsify = {
+  sidebarToggle: true
+}
+```
+
+### sidebar
 
 Custom sidebar. If it's set, the TOC will be disabled. Bind global variables on the `data-sidebar`.
 
@@ -187,7 +239,13 @@ Custom sidebar. If it's set, the TOC will be disabled. Bind global variables on
 ```
 
 
-#### load-sidebar
+```js
+window.$docsify = {
+  sidebar: 'sidebar'
+}
+```
+
+### load-sidebar
 
 Load sidebar markdown file. If it is configured, load the current directory `_sidebar.md` by default. If the file isn't exist, sidebar will appear as a TOC.
 ** you should add `.nojekyll` into docs folder to prevent GitHub Pages from ignoring the `_sidebar.md`**
@@ -202,6 +260,12 @@ You can specify a file:
 <script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
 ```
 
+```js
+window.$docsify = {
+  loadSidebar: '_sidebar.md'
+}
+```
+
 The contents of the file can be:
 
 ```markdown
@@ -211,14 +275,9 @@ The contents of the file can be:
   - [Getting Started](/getting-started)
   - [Dynamic Route Matching](/dynamic-matching)
   - [Nested Routes](/nested-routes)
-  - [Programmatic Navigation](/navigation)
-  - [Named Routes](/named-routes)
-  - [Named Views](/named-views)
-  - [Redirect and Alias](/redirect-and-alias)
-  - [HTML5 History Mode](/history-mode)
 ```
 
-#### sub-max-level
+### sub-max-level
 
 Display TOC in the custom sidebar. The default value is 0.
 
@@ -227,10 +286,14 @@ Display TOC in the custom sidebar. The default value is 0.
 <script src="/lib/docsify.js" data-load-sidebar data-max-sub-level="4"></script>
 ```
 
-![image](https://cloud.githubusercontent.com/assets/7565692/21563209/a8894512-ceba-11e6-80eb-fef00b80625c.png)
 
+```js
+window.$docsify = {
+  maxSubLevel: 4
+}
+```
 
-#### load-navbar
+### load-navbar
 
 Load navbar markdown file. If it is configured, load the current directory `_navbar.md` by default.
 
@@ -244,6 +307,12 @@ You can specify a file:
 <script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
 ```
 
+```js
+window.$docsify = {
+  loadNavbar: '_navbar.md'
+}
+```
+
 The contents of the file can be:
 
 ```markdown
@@ -260,7 +329,7 @@ If you write a sub level list, it will generate a dropdown list.
   - [chinese](/zh-cn)
 ```
 
-#### router
+### router
 
 Hash router.
 
@@ -268,7 +337,14 @@ Hash router.
 <script src="/lib/docsify.js" data-router></script>
 ```
 
-#### auto2top
+```js
+window.$docsify = {
+  router: true
+}
+```
+
+
+### auto2top
 
 Scroll to the top on changing hash.
 
@@ -277,7 +353,13 @@ Scroll to the top on changing hash.
 <script src="/lib/docsify.js" data-auto2top></script>
 ```
 
-#### homepage
+```js
+window.$docsify = {
+  auto2top: true
+}
+```
+
+### homepage
 
 `README.md` will be rendered as a homepage for your website in the docs folder, but sometimes we want to specify another file as a homepage, or even use the `README.md` in your repo. We can use (need `data-router`):
 
@@ -288,7 +370,14 @@ Scroll to the top on changing hash.
 ```
 
 
-#### basePath
+```js
+window.$docsify = {
+  homepage: true
+}
+```
+
+
+### basePath
 
 If your HTML entry file and the markdown files are in different directories, we can use:
 
@@ -300,7 +389,14 @@ If your HTML entry file and the markdown files are in different directories, we
 ```
 
 
-#### coverpage
+```js
+window.$docsify = {
+  basePath: '/base/'
+}
+```
+
+
+### coverpage
 
 Generate cover page.
 
@@ -308,4 +404,10 @@ Generate cover page.
 <script src="/lib/docsify.js" data-coverpage></script>
 <!-- or -->
 <script src="/lib/docsify.js" data-coverpage="other.md"></script>
+```
+
+```js
+window.$docsify = {
+  coverpage: true
+}
 ```

docs/_coverpage.md

@@ -1,10 +1,10 @@
 ![logo](_media/icon.svg)
 
-# docsify <small>1.3.3</small>
+# docsify <small>1.5.0</small>
 
 > A magical documentation site generator.
 
-- Simple and lightweight (~12kb gzipped)
+- Simple and lightweight (~13kB gzipped)
 - Multiple themes
 - Not build static html files
 

docs/zh-cn.md

@@ -65,7 +65,10 @@ docsify serve docs
 
 更多选项参考 [docsify-cli](https://github.com/QingWei-Li/docsify-cli)
 
-## 主题
+
+## 更多功能
+
+### 主题
 目前提供 vue.css 和 buble.css，直接修改 `index.html` 里的 cdn 地址即可
 ```html
 <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
@@ -79,8 +82,6 @@ docsify serve docs
 <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
 ```
 
-## 更多功能
-
 ### 多页面
 `README.md` 作为主页面，如果需要其他页面，直接在文档目录下创建对应的 `*.md` 文件，例如创建一个 `guide.md` 那么对应的路由就是 `/#/guide`。
 
@@ -138,30 +139,77 @@ docsify serve docs
 ![color](#f0f0f0)
 ```
 
+### 自定义 Markdown parser
 
-### 配置参数
+默认使用 [marked](https://github.com/chjj/marked) 处理 markdown 部分，你可以修改默认配置
 
-#### repo
+```js
+window.$docsify = {
+  markdown: {
+    smartypants: true
+  }
+}
+```
+
+甚至可以完全定制化
+
+```js
+window.$docsify = {
+  markdown: function(marked) {
+    // ...
+
+    return marked
+  }
+}
+```
+
+
+## 配置参数
+
+你可以通过在标签上添加属性的方式，或者给 `window.$docsify` 传配置信息。
+
+### repo
 参考本文档的右上角的 GitHub 图标，如果要开启的话，将 `index.html` 里的 script 改成
 
 ```html
 <script src="//unpkg.com/docsify" data-repo="your/repo"></script>
 ```
 
-#### max-level
+
+```js
+window.$docsify = {
+  repo: 'your/repo'
+}
+```
+
+### max-level
 目录最大展开层级，默认值为 6
 
 ```html
 <script src="//unpkg.com/docsify" data-max-level="6"></script>
 ```
 
-#### el
+
+```js
+window.$docsify = {
+  maxLevel: 6
+}
+```
+
+### el
 替换节点元素，默认为 `#app`
 ```html
 <script src="//unpkg.com/docsify" data-el="#app"></script>
 ```
 
-#### sidebar-toggle
+
+```js
+window.$docsify = {
+  el: '#app'
+}
+```
+
+### sidebar-toggle
 
 Sidebar 开关按钮
 
@@ -169,7 +217,14 @@ Sidebar 开关按钮
 <script src="//unpkg.com/docsify" data-sidebar-toggle></script>
 ```
 
-#### sidebar
+
+```js
+window.$docsify = {
+  sidebarToggle: true
+}
+```
+
+### sidebar
 
 设置后 TOC 功能将不可用，适合导航较多的文档，`data-sidebar` 传入全局变量名。
 
@@ -192,7 +247,14 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-sidebar="sidebar"></script>
 ```
 
-#### load-sidebar
+
+```js
+window.$docsify = {
+  sidebar: 'sidebar'
+}
+```
+
+### load-sidebar
 
 读取侧边栏配置文件，如果配置，默认加载当前目录下的 `_sidebar.md`。如果文件不存在，会显示 TOC 作为侧边栏内容。如果你有二级目录，也应该放置一份配置文件。
 **如果用 `_` 开头作为文件名，你应该在文档目录下添加 `.nojekyll`，阻止 GitHub Pages 忽略下划线开头的文件。**
@@ -201,12 +263,19 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-load-sidebar></script>
 ```
 
+
 你可以指定侧边栏文件名
 
 ```html
 <script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
 ```
 
+```js
+window.$docsify = {
+  loadSidebar: '_sidebar.md'
+}
+```
+
 `_sidebar.md` 的内容可以是这样的
 
 ```markdown
@@ -216,14 +285,9 @@ Sidebar 开关按钮
   - [Getting Started](/getting-started)
   - [Dynamic Route Matching](/dynamic-matching)
   - [Nested Routes](/nested-routes)
-  - [Programmatic Navigation](/navigation)
-  - [Named Routes](/named-routes)
-  - [Named Views](/named-views)
-  - [Redirect and Alias](/redirect-and-alias)
-  - [HTML5 History Mode](/history-mode)
 ```
 
-#### sub-max-level
+### sub-max-level
 
 显示 TOC 在自定义的侧边栏里，默认最大显示 0 层。
 
@@ -232,10 +296,13 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-load-sidebar data-max-sub-level="4"></script>
 ```
 
-![image](https://cloud.githubusercontent.com/assets/7565692/21563209/a8894512-ceba-11e6-80eb-fef00b80625c.png)
+```js
+window.$docsify = {
+  maxSubLevel: 4
+}
+```
 
-
-#### load-navbar
+### load-navbar
 
 读取导航配置文件，如果配置，默认加载当前目录下的 `_navbar.md`。如果文件不存在，会显示 html 里定义的导航栏。
 
@@ -249,6 +316,12 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
 ```
 
+```js
+window.$docsify = {
+  loadNavbar: '_navbar.md'
+}
+```
+
 `_navbar.md` 的内容可以是这样
 
 ```markdown
@@ -265,7 +338,7 @@ Sidebar 开关按钮
 ```
 
 
-#### router
+### router
 
 开启 hash router 功能，同时多页面切换不会重新加载资源。资源路径会被替换成 `/#/` 的形式。
 
@@ -273,7 +346,13 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-router></script>
 ```
 
-#### auto2top
+```js
+window.$docsify = {
+  router: true
+}
+```
+
+### auto2top
 
 切换路由时自动跳转到页面顶部
 
@@ -282,7 +361,13 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-auto2top></script>
 ```
 
-#### homepage
+```js
+window.$docsify = {
+  auto2top: true
+}
+```
+
+### homepage
 
 默认情况下网站会将根目录下 `README.md` 作为首页渲染，但是有些时候我们想指定其他文件，甚至想直接将 repo 下的 README 作为首页。你可以这样做（需要设置 `data-router`）：
 
@@ -293,7 +378,13 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-homepage="Welcome.md"></script>
 ```
 
-#### basePath
+```js
+window.$docsify = {
+  homepage: true
+}
+```
+
+### basePath
 
 指定加载文档的路径，如果你的 HTML 入口文件和文档是放在不同地方，你可以设置：
 
@@ -304,7 +395,14 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-base-path="https://docsify.js.org/"></script>
 ```
 
-#### coverpage
+
+```js
+window.$docsify = {
+  basePath: '/base/'
+}
+```
+
+### coverpage
 
 生成封面，参考 [#封面](/zh-cn#封面).
 
@@ -314,3 +412,10 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-coverpage="other.md"></script>
 
 ```
+
+
+```js
+window.$docsify = {
+  coverpage: true
+}
+```

lib/docsify.js

@@ -118,6 +118,7 @@ function slugify (string) {
   var re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g;
   var maintainCase = false;
   var replacement = '-';
+
   slugify.occurrences = slugify.occurrences || {};
 
   if (typeof string !== 'string') { return '' }
@@ -143,6 +144,27 @@ function slugify (string) {
   return slug
 }
 
+slugify.clear = function () {
+  slugify.occurrences = {};
+};
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var merge = Object.assign || function (to) {
+  var arguments$1 = arguments;
+
+  for (var i = 1; i < arguments.length; i++) {
+    var from = Object(arguments$1[i]);
+
+    for (var key in from) {
+      if (hasOwnProperty.call(from, key)) {
+        to[key] = from[key];
+      }
+    }
+  }
+
+  return to
+};
+
 /**
  * Active sidebar when scroll
  * @link https://buble.surge.sh/
@@ -2369,7 +2391,10 @@ function corner (data) {
  * Render main content
  */
 function main (tpl) {
-  return ("<main>\n    " + tpl + "\n    <aside class=\"sidebar\"></aside>\n    <section class=\"content\">\n      <article class=\"markdown-section\"></article>\n    </section>\n  </main>")
+  var aside = tpl + "<aside class=\"sidebar\"></aside>";
+
+  return (isMobile() ? (aside + "<main>") : ("<main>" + aside)) +
+    "<section class=\"content\">\n      <article class=\"markdown-section\"></article>\n    </section>\n    </main>"
 }
 
 /**
@@ -2408,50 +2433,66 @@ function tree (toc, tpl) {
 }
 
 var OPTIONS$1 = {};
+var markdown = marked;
+var toc = [];
 var CACHE = {};
 
 var renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom);
   dom.innerHTML = content;
+  slugify.clear();
 
   return dom
 };
-var toc = [];
-var renderer = new marked.Renderer();
 
 /**
- * render anchor tag
- * @link https://github.com/chjj/marked#overriding-renderer-methods
+ * init render
+ * @param  {Object} options
  */
-renderer.heading = function (text, level) {
-  var slug = slugify(text);
-  var route = '';
+function init (options) {
+  OPTIONS$1 = options;
 
-  if (OPTIONS$1.router) {
-    route = "#/" + (getRoute());
+  var renderer = new marked.Renderer();
+  /**
+   * render anchor tag
+   * @link https://github.com/chjj/marked#overriding-renderer-methods
+   */
+  renderer.heading = function (text, level) {
+    var slug = slugify(text);
+    var route = '';
+
+    if (OPTIONS$1.router) {
+      route = "#/" + (getRoute());
+    }
+
+    toc.push({ level: level, slug: (route + "#" + (encodeURIComponent(slug))), title: text });
+
+    return ("<h" + level + " id=\"" + slug + "\"><a href=\"" + route + "#" + slug + "\" data-id=\"" + slug + "\" class=\"anchor\"><span>" + text + "</span></a></h" + level + ">")
+  };
+  // highlight code
+  renderer.code = function (code, lang) {
+    if ( lang === void 0 ) lang = '';
+
+    var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup)
+      .replace(/{{/g, '<span>{{</span>');
+
+    return ("<pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
+  };
+  renderer.link = function (href, title, text) {
+    if (OPTIONS$1.router && !/:/.test(href)) {
+      href = ("#/" + href).replace(/\/\//g, '/');
+    }
+
+    return ("<a href=\"" + href + "\" title=\"" + (title || '') + "\">" + text + "</a>")
+  };
+
+  if (typeof OPTIONS$1.markdown === 'function') {
+    markdown.setOptions({ renderer: renderer });
+    markdown = OPTIONS$1.markdown.call(this, markdown);
+  } else {
+    markdown.setOptions(merge({ renderer: renderer }, OPTIONS$1.markdown));
   }
-
-  toc.push({ level: level, slug: (route + "#" + (encodeURIComponent(slug))), title: text });
-
-  return ("<a href=\"" + route + "#" + slug + "\" data-id=\"" + slug + "\" class=\"anchor\"><h" + level + " id=\"" + slug + "\">" + text + "</h" + level + "></a>")
-};
-// highlight code
-renderer.code = function (code, lang) {
-  if ( lang === void 0 ) lang = '';
-
-  var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup)
-    .replace(/{{/g, '<span>{{</span>');
-
-  return ("<pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
-};
-renderer.link = function (href, title, text) {
-  if (OPTIONS$1.router && !/:/.test(href)) {
-    href = ("#/" + href).replace(/\/\//g, '/');
-  }
-
-  return ("<a href=\"" + href + "\" title=\"" + (title || '') + "\">" + text + "</a>")
-};
-marked.setOptions({ renderer: renderer });
+}
 
 /**
  * App
@@ -2480,7 +2521,7 @@ function renderApp (dom, replace) {
  * article
  */
 function renderArticle (content) {
-  renderTo('article', content ? marked(content) : 'not found');
+  renderTo('article', content ? markdown(content) : 'not found');
   if (!OPTIONS$1.sidebar && !OPTIONS$1.loadSidebar) { renderSidebar(); }
 
   if (content && typeof Vue !== 'undefined' && typeof Vuep !== 'undefined') {
@@ -2497,7 +2538,7 @@ function renderNavbar (content) {
   if (CACHE.navbar && CACHE.navbar === content) { return }
   CACHE.navbar = content;
 
-  if (content) { renderTo('nav', marked(content)); }
+  if (content) { renderTo('nav', markdown(content)); }
   activeLink('nav');
 }
 
@@ -2508,7 +2549,7 @@ function renderSidebar (content) {
   var html;
 
   if (content) {
-    html = marked(content);
+    html = markdown(content);
   } else if (OPTIONS$1.sidebar) {
     html = tree(OPTIONS$1.sidebar, '<ul>');
   } else {
@@ -2541,7 +2582,7 @@ function renderCover (content) {
   if (renderCover.rendered) { return }
 
   // render cover
-  var html = marked(content);
+  var html = markdown(content);
   var match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)"></p>$');
 
   // render background
@@ -2600,15 +2641,7 @@ function renderLoading (ref) {
   }
 }
 
-/**
- * Load Config
- * @param  {Object} options
- */
-function config (options) {
-  OPTIONS$1 = options;
-}
-
-var OPTIONS = {
+var OPTIONS = merge({
   el: '#app',
   repo: '',
   maxLevel: 6,
@@ -2622,7 +2655,7 @@ var OPTIONS = {
   coverpage: '',
   basePath: '',
   auto2top: false
-};
+}, window.$docsify);
 var script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
 
 // load configuration for script attribute
@@ -2638,7 +2671,7 @@ if (script) {
 }
 
 // load options
-config(OPTIONS);
+init(OPTIONS);
 
 var cacheRoute = null;
 var cacheXhr = null;
@@ -2698,7 +2731,10 @@ var Docsify = function () {
   var dom = document.querySelector(OPTIONS.el) || document.body;
   var replace = dom !== document.body;
   var main = function () {
-    mainRender(function (_) { return scrollIntoView(); });
+    mainRender(function (_) {
+      scrollIntoView();
+      activeLink('nav');
+    });
   };
 
   // Render app

package.json

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

src/index.js

@@ -1,8 +1,8 @@
-import { load, camel2kebab, isNil, getRoute } from './util'
-import { scrollIntoView } from './event'
+import { load, camel2kebab, isNil, getRoute, merge } from './util'
+import { scrollIntoView, activeLink } from './event'
 import * as render from './render'
 
-const OPTIONS = {
+const OPTIONS = merge({
   el: '#app',
   repo: '',
   maxLevel: 6,
@@ -16,7 +16,7 @@ const OPTIONS = {
   coverpage: '',
   basePath: '',
   auto2top: false
-}
+}, window.$docsify)
 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
 
 // load configuration for script attribute
@@ -32,7 +32,7 @@ if (script) {
 }
 
 // load options
-render.config(OPTIONS)
+render.init(OPTIONS)
 
 let cacheRoute = null
 let cacheXhr = null
@@ -92,7 +92,10 @@ const Docsify = function () {
   const dom = document.querySelector(OPTIONS.el) || document.body
   const replace = dom !== document.body
   const main = function () {
-    mainRender(_ => scrollIntoView())
+    mainRender(_ => {
+      scrollIntoView()
+      activeLink('nav')
+    })
   }
 
   // Render app

src/render.js

@@ -2,51 +2,67 @@ import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
 import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top, sticky } from './event'
-import { genTree, getRoute, isMobile, slugify } from './util'
+import { genTree, getRoute, isMobile, slugify, merge } from './util'
 
 let OPTIONS = {}
+let markdown = marked
+let toc = []
 const CACHE = {}
 
 const renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom)
   dom.innerHTML = content
+  slugify.clear()
 
   return dom
 }
-let toc = []
-const renderer = new marked.Renderer()
 
 /**
- * render anchor tag
- * @link https://github.com/chjj/marked#overriding-renderer-methods
+ * init render
+ * @param  {Object} options
  */
-renderer.heading = function (text, level) {
-  const slug = slugify(text)
-  let route = ''
+export function init (options) {
+  OPTIONS = options
 
-  if (OPTIONS.router) {
-    route = `#/${getRoute()}`
+  const renderer = new marked.Renderer()
+  /**
+   * render anchor tag
+   * @link https://github.com/chjj/marked#overriding-renderer-methods
+   */
+  renderer.heading = function (text, level) {
+    const slug = slugify(text)
+    let route = ''
+
+    if (OPTIONS.router) {
+      route = `#/${getRoute()}`
+    }
+
+    toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
+
+    return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
+  }
+  // highlight code
+  renderer.code = function (code, lang = '') {
+    const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
+      .replace(/{{/g, '<span>{{</span>')
+
+    return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
+  }
+  renderer.link = function (href, title, text) {
+    if (OPTIONS.router && !/:/.test(href)) {
+      href = `#/${href}`.replace(/\/\//g, '/')
+    }
+
+    return `<a href="${href}" title="${title || ''}">${text}</a>`
   }
 
-  toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
-
-  return `<a href="${route}#${slug}" data-id="${slug}" class="anchor"><h${level} id="${slug}">${text}</h${level}></a>`
-}
-// highlight code
-renderer.code = function (code, lang = '') {
-  const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
-    .replace(/{{/g, '<span>{{</span>')
-
-  return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
-}
-renderer.link = function (href, title, text) {
-  if (OPTIONS.router && !/:/.test(href)) {
-    href = `#/${href}`.replace(/\/\//g, '/')
+  if (typeof OPTIONS.markdown === 'function') {
+    markdown.setOptions({ renderer })
+    markdown = OPTIONS.markdown.call(this, markdown)
+  } else {
+    markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
   }
-
-  return `<a href="${href}" title="${title || ''}">${text}</a>`
 }
-marked.setOptions({ renderer })
 
 /**
  * App
@@ -75,7 +91,7 @@ export function renderApp (dom, replace) {
  * article
  */
 export function renderArticle (content) {
-  renderTo('article', content ? marked(content) : 'not found')
+  renderTo('article', content ? markdown(content) : 'not found')
   if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
 
   if (content && typeof Vue !== 'undefined' && typeof Vuep !== 'undefined') {
@@ -92,7 +108,7 @@ export function renderNavbar (content) {
   if (CACHE.navbar && CACHE.navbar === content) return
   CACHE.navbar = content
 
-  if (content) renderTo('nav', marked(content))
+  if (content) renderTo('nav', markdown(content))
   activeLink('nav')
 }
 
@@ -103,7 +119,7 @@ export function renderSidebar (content) {
   let html
 
   if (content) {
-    html = marked(content)
+    html = markdown(content)
   } else if (OPTIONS.sidebar) {
     html = tpl.tree(OPTIONS.sidebar, '<ul>')
   } else {
@@ -136,7 +152,7 @@ export function renderCover (content) {
   if (renderCover.rendered) return
 
   // render cover
-  let html = marked(content)
+  let html = markdown(content)
   const match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)"></p>$')
 
   // render background
@@ -190,12 +206,3 @@ export function renderLoading ({ loaded, total, step }) {
     }, 200)
   }
 }
-
-/**
- * Load Config
- * @param  {Object} options
- */
-export function config (options) {
-  OPTIONS = options
-}
-

src/themes/basic/_coverpage.css

@@ -20,7 +20,7 @@ section.cover {
   .cover-main {
     flex: 1;
     text-align: center;
-    margin: 0 16px;
+    margin: -20px 16px 0;
     z-index: 1;
   }
 
@@ -46,6 +46,10 @@ section.cover {
     font-weight: 300;
     color: inherit;
 
+    a {
+      display: block;
+    }
+
     small {
       position: absolute;
       bottom: -.4375rem;

src/themes/basic/_layout.css

@@ -31,6 +31,7 @@ body {
   letter-spacing: 0;
   margin: 0;
   overflow-x: hidden;
+  color: $color-text;
 }
 
 img {
@@ -159,14 +160,18 @@ nav {
 
 /* main */
 main {
-  size: 100% 100%;
+  size: 100vw 100%;
   position: relative;
 }
 
 .anchor {
   text-decoration: none;
   transition: all .3s;
-  display: block;
+  display: inline-block;
+
+  span {
+    color: $color-text;
+  }
 
   &:hover {
     text-decoration: underline;
@@ -313,6 +318,11 @@ body.close {
     top: 30px;
   }
 
+  main {
+    height: auto;
+    overflow-x: hidden;
+  }
+
   .sidebar {
     left: -$sidebar-width;
     transition: transform 250ms ease-out;
@@ -320,7 +330,8 @@ body.close {
 
   .content {
     left: 0;
-    min-width: 100vw;
+    max-width: 100vw;
+    position: static;
     transition: transform 250ms ease;
   }
 
@@ -330,6 +341,7 @@ body.close {
 
   .sidebar-toggle {
     width: auto;
+    background-color: transparent;
   }
 
   body.close {
@@ -339,6 +351,8 @@ body.close {
 
     .sidebar-toggle {
       width: calc($sidebar-width - 16px);
+      background-color: rgba($color-bg, .8);
+      transition: 1s background-color;
     }
 
     .content {
@@ -346,7 +360,7 @@ body.close {
     }
 
     nav, .github-corner {
-      transform: translateX($sidebar-width);
+      display: none;
     }
   }
 

src/themes/buble.css

@@ -2,14 +2,12 @@
 
 $color-primary: #0074D9;
 $color-bg: #fff;
+$color-text: #34495e;
 $sidebar-width: 16em;
 
 @import "basic/layout";
 @import "basic/coverpage";
 
-body {
-  color: #34495e;
-}
 /* sidebar */
 .sidebar {
   color: #364149;

src/themes/pure.css

@@ -1,4 +1,5 @@
 $color-primary: #000;
 $color-bg: #fff;
+$color-text: #000;
 $sidebar-width: 300px;
 @import "basic/layout";

src/themes/vue.css

@@ -2,6 +2,7 @@
 
 $color-primary: #42b983;
 $color-bg: #fff;
+$color-text: #34495e;
 $sidebar-width: 300px;
 
 @import "basic/layout";
@@ -9,7 +10,6 @@ $sidebar-width: 300px;
 
 body {
   background-color: $color-bg;
-  color: #34495e;
 }
 
 /* sidebar */

src/tpl.js

@@ -1,4 +1,4 @@
-
+import { isMobile } from './util'
 /**
  * Render github corner
  * @param  {Object} data
@@ -23,13 +23,13 @@ export function corner (data) {
  * Render main content
  */
 export function main (tpl) {
-  return `<main>
-    ${tpl}
-    <aside class="sidebar"></aside>
-    <section class="content">
+  const aside = `${tpl}<aside class="sidebar"></aside>`
+
+  return (isMobile() ? `${aside}<main>` : `<main>${aside}`) +
+    `<section class="content">
       <article class="markdown-section"></article>
     </section>
-  </main>`
+    </main>`
 }
 
 /**

src/util.js

@@ -110,6 +110,7 @@ export function slugify (string) {
   const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g
   const maintainCase = false
   const replacement = '-'
+
   slugify.occurrences = slugify.occurrences || {}
 
   if (typeof string !== 'string') return ''
@@ -134,3 +135,22 @@ export function slugify (string) {
 
   return slug
 }
+
+slugify.clear = function () {
+  slugify.occurrences = {}
+}
+
+const hasOwnProperty = Object.prototype.hasOwnProperty
+export const merge = Object.assign || function (to) {
+  for (let i = 1; i < arguments.length; i++) {
+    const from = Object(arguments[i])
+
+    for (const key in from) {
+      if (hasOwnProperty.call(from, key)) {
+        to[key] = from[key]
+      }
+    }
+  }
+
+  return to
+}