Implement support for setting a customized sidebar item name from the markdown content

Author: Jacco-V

docs/helpers.md

@@ -127,6 +127,12 @@ Only when you set both the `routerMode: 'history'` and `externalLinkTarget: '_se
 ### Hello, world! :id=hello-world
 ```
 
+## Customise item name for sidebar
+
+```md
+### How would I write a "hello, world" example? :sidebar="Hello, world?"
+```
+
 ## Markdown in html tag
 
 You need to insert a space between the html and markdown content.

src/core/render/compiler.js

@@ -233,12 +233,14 @@ export class Compiler {
         nextToc.ignoreAllSubs = true;
       }
 
+      const title = config.sidebar || str;
       const slug = slugify(config.id || str);
       const url = router.toURL(router.getCurrentPath(), { id: slug });
+      nextToc.title = removeAtag(title);
       nextToc.slug = url;
       _self.toc.push(nextToc);
 
-      return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${level}>`;
+      return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${title}</span></a></h${level}>`;
     };
 
     origin.code = highlightCodeCompiler({ renderer });