diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 443356213..caed15561 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -74,17 +74,16 @@ export class Compiler {
       this.linkTarget === '_blank' ? config.externalLinkRel || 'noopener' : '';
     this.contentBase = router.getBasePath();
 
-    const renderer = this._initRenderer();
-    this.heading = renderer.heading;
+    this.renderer = this._initRenderer();
     let compile;
     const mdConf = config.markdown || {};
 
     if (isFn(mdConf)) {
-      compile = mdConf(marked, renderer);
+      compile = mdConf(marked, this.renderer);
     } else {
       marked.setOptions(
         Object.assign(mdConf, {
-          renderer: Object.assign(renderer, mdConf.renderer),
+          renderer: Object.assign(this.renderer, mdConf.renderer),
         }),
       );
       compile = marked;
@@ -318,12 +317,21 @@ export class Compiler {
     return treeTpl(tree);
   }
 
+  /**
+   * Compile the text to generate HTML heading element based on the level
+   * @param {*} text Text content, for now it is only from the _sidebar.md file
+   * @param {*} level Type of heading (h<level> tag), for now it is always 1
+   * @returns
+   */
   header(text, level) {
-    return this.heading(text, level);
-  }
-
-  article(text) {
-    return this.compile(text);
+    const tokenHeading = {
+      type: 'heading',
+      raw: text,
+      depth: level,
+      text: text,
+      tokens: [{ type: 'text', raw: text, text: text }],
+    };
+    return this.renderer.heading(tokenHeading);
   }
 
   /**
diff --git a/test/e2e/sidebar.test.js b/test/e2e/sidebar.test.js
index d41fe95cd..ff4526601 100644
--- a/test/e2e/sidebar.test.js
+++ b/test/e2e/sidebar.test.js
@@ -69,3 +69,89 @@ test.describe('Sidebar Tests', () => {
     expect(page.url()).toMatch(/\/test%3Efoo$/);
   });
 });
+
+test.describe('Configuration: autoHeader', () => {
+  test('autoHeader=false', async ({ page }) => {
+    const docsifyInitConfig = {
+      config: {
+        loadSidebar: '_sidebar.md',
+        autoHeader: false,
+      },
+      markdown: {
+        sidebar: `
+            - [QuickStartAutoHeader](quickstart.md)
+          `,
+      },
+      routes: {
+        '/quickstart.md': `
+            the content of quickstart space
+            ## In the main content there is no h1
+          `,
+      },
+    };
+
+    await docsifyInit(docsifyInitConfig);
+
+    await page.click('a[href="#/quickstart"]');
+    expect(page.url()).toMatch(/\/quickstart$/);
+    // not heading
+    await expect(page.locator('#quickstart')).toBeHidden();
+  });
+
+  test('autoHeader=true', async ({ page }) => {
+    const docsifyInitConfig = {
+      config: {
+        loadSidebar: '_sidebar.md',
+        autoHeader: true,
+      },
+      markdown: {
+        sidebar: `
+            - [QuickStartAutoHeader](quickstart.md )
+          `,
+      },
+      routes: {
+        '/quickstart.md': `
+            the content of quickstart space
+            ## In the main content there is no h1
+          `,
+      },
+    };
+
+    await docsifyInit(docsifyInitConfig);
+
+    await page.click('a[href="#/quickstart"]');
+    expect(page.url()).toMatch(/\/quickstart$/);
+
+    // auto generate default heading id
+    const autoHeader = page.locator('#quickstartautoheader');
+    expect(await autoHeader.innerText()).toContain('QuickStartAutoHeader');
+  });
+
+  test('autoHeader=true and custom headingId', async ({ page }) => {
+    const docsifyInitConfig = {
+      config: {
+        loadSidebar: '_sidebar.md',
+        autoHeader: true,
+      },
+      markdown: {
+        sidebar: `
+            - [QuickStartAutoHeader](quickstart.md ":id=quickstartId")
+          `,
+      },
+      routes: {
+        '/quickstart.md': `
+            the content of quickstart space
+            ## In the main content there is no h1
+          `,
+      },
+    };
+
+    await docsifyInit(docsifyInitConfig);
+
+    await page.click('a[href="#/quickstart"]');
+    expect(page.url()).toMatch(/\/quickstart$/);
+    // auto generate custom heading id
+    const autoHeader = page.locator('#quickstartId');
+    expect(await autoHeader.innerText()).toContain('QuickStartAutoHeader');
+  });
+});