fix md render

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",

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",

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>

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>

site/components/demoBox.vue

@@ -53,12 +53,11 @@ export default {
         `not have usTitle`,
       )
     }
-    const component = this.$slots.component[0]
+    let id = ['components', name.replace('-cn', ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
-    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)
     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/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,

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