fix md render

Author: tangjinzhou

package-lock.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",

package.json

@@ -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>

site/components/api.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>

site/components/demo.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 {

site/components/demoBox.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,

site/components/md.vue

@@ -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')