From b7027ca779b4c951e6286d65f837567e2c52d09c Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Sat, 7 Apr 2018 17:38:39 +0800
Subject: [PATCH] fix md render

---
 package-lock.json           | 15 +++++++++++++++
 package.json                |  1 +
 site/components/api.vue     |  2 +-
 site/components/demo.vue    |  4 ++--
 site/components/demoBox.vue |  7 +++----
 site/components/md.vue      | 14 +++++++++++++-
 webpack.base.config.js      |  8 ++++++++
 7 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 00b205217..fdc502a87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9224,6 +9224,15 @@
                 "uc.micro": "1.0.3"
             }
         },
+        "markdown-it-anchor": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-4.0.0.tgz",
+            "integrity": "sha1-6H+1VD4BllrfcVBsa/ewSRhBt+M=",
+            "dev": true,
+            "requires": {
+                "string": "3.3.3"
+            }
+        },
         "markdown-table": {
             "version": "1.1.1",
             "resolved": "https://registry.npm.taobao.org/markdown-table/download/markdown-table-1.1.1.tgz",
@@ -15464,6 +15473,12 @@
             "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
             "dev": true
         },
+        "string": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/string/-/string-3.3.3.tgz",
+            "integrity": "sha1-XqIRzZLSKOGEKUmQpsyXs2anfLA=",
+            "dev": true
+        },
         "string-width": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
diff --git a/package.json b/package.json
index 599c94212..62cb1c6d5 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "less-loader": "^4.0.5",
     "less-plugin-npm-import": "^2.1.0",
     "markdown-it": "^8.4.0",
+    "markdown-it-anchor": "^4.0.0",
     "marked": "^0.3.7",
     "merge2": "^1.2.1",
     "mkdirp": "^0.5.1",
diff --git a/site/components/api.vue b/site/components/api.vue
index ae4673103..7d745eae3 100644
--- a/site/components/api.vue
+++ b/site/components/api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='markdown api-container' id="component-api">
+  <div class='markdown api-container'>
     <slot v-if="isZhCN" name="cn"></slot>
     <slot v-else></slot>
   </div>
diff --git a/site/components/demo.vue b/site/components/demo.vue
index a29921fac..8da74a971 100644
--- a/site/components/demo.vue
+++ b/site/components/demo.vue
@@ -48,9 +48,9 @@ export default {
             {lis}
             <li title='API' key='API'>
               <a
-                href='#component-api'
+                href='#api'
                 class={{
-                  current: window.location.hash === '#component-api',
+                  current: window.location.hash === '#api',
                 }}
               >API</a>
             </li>
diff --git a/site/components/demoBox.vue b/site/components/demoBox.vue
index 9dcc67acc..d1bd6519c 100644
--- a/site/components/demoBox.vue
+++ b/site/components/demoBox.vue
@@ -53,12 +53,11 @@ export default {
         `not have usTitle`,
       )
     }
-    const component = this.$slots.component[0]
-    const fileName = (component.context.$vnode.componentOptions.Ctor.extendOptions.__file.split('/demo/')[1] || '').replace('.md', '')
-    const id = ['components', name.replace('-cn', ''), 'demo', fileName].join('-').toLowerCase()
-    console.log(fileName)
+    let id = ['components', name.replace('-cn', ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
+
     if (this._store.store) {
       const { currentSubMenu } = this._store.store.getState()
+      id = `${id}-${currentSubMenu.length + 1}`
       this._store.store.setState({ currentSubMenu: [...currentSubMenu, { cnTitle, usTitle, id }] })
     }
     return {
diff --git a/site/components/md.vue b/site/components/md.vue
index 1f03c510f..0e00e56f6 100644
--- a/site/components/md.vue
+++ b/site/components/md.vue
@@ -4,8 +4,20 @@
 <script>
 import marked from 'marked'
 import { isZhCN } from '../util'
+var renderer = new marked.Renderer();
+renderer.heading = function(text, level) {
+  return '<h'
+    + level
+    + ' id="'
+    + text.replace(/[^\w]+/g, '-')
+    + '">'
+    + text
+    + '</h'
+    + level
+    + '>\n';
+};
 marked.setOptions({
-  renderer: new marked.Renderer(),
+  renderer,
   gfm: true,
   tables: true,
   breaks: true,
diff --git a/webpack.base.config.js b/webpack.base.config.js
index b3bf3d48d..1d0d4adc4 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -45,6 +45,14 @@ const md = require('markdown-it')('default', {
   html: true,
   breaks: true,
   highlight: renderHighlight,
+}).use(require('markdown-it-anchor'), {
+  level: 2,
+  // slugify: string => string,
+  permalink: true,
+  // renderPermalink: (slug, opts, state, permalink) => {},
+  permalinkClass: 'anchor',
+  permalinkSymbol: '#',
+  permalinkBefore: false,
 })
 // md.renderer.rules.fence = wrap(md.renderer.rules.fence)
 const cnReg = new RegExp('<(cn)(?:[^<]|<)+</\\1>', 'g')