From 22580b710807c2e7ce28849ca3596114b8c1224d Mon Sep 17 00:00:00 2001
From: Jacco-V <info@netsilik.nl>
Date: Wed, 22 Jun 2022 18:09:50 +0200
Subject: [PATCH] Implement support for setting a customized sidebar item name
 from the markdown content

---
 docs/helpers.md             | 6 ++++++
 src/core/render/compiler.js | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/helpers.md b/docs/helpers.md
index 6bd8a069df..356df6ec09 100644
--- a/docs/helpers.md
+++ b/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.
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 255c496423..7a4adc9f16 100644
--- a/src/core/render/compiler.js
+++ b/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 });