diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index ccce9b7ae6..673d41b5c6 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -92,6 +92,10 @@ const config: Config = {
         autoCollapseCategories: true,
       },
     },
+    tableOfContents: {
+      minHeadingLevel: 2,
+      maxHeadingLevel: 4,
+    },
     image: "img/social-card.jpg",
     headTags: [
       {
diff --git a/src/theme/DocItem/TOC/useFilteredToc.ts b/src/theme/DocItem/TOC/useFilteredToc.ts
index ed9d5f0ab6..fb2039e63d 100644
--- a/src/theme/DocItem/TOC/useFilteredToc.ts
+++ b/src/theme/DocItem/TOC/useFilteredToc.ts
@@ -36,7 +36,7 @@ function getFilteredToc(originalToc: readonly TOCItem[]): readonly TOCItem[] {
     const filteredToc: TOCItem[] = [];
 
     uniqueIds.forEach((id) => {
-        const headingEl = markdownEl.querySelector(`#${id}`);
+        const headingEl = markdownEl.querySelector(`#${CSS.escape(id)}`);
 
         if (headingEl) {
             filteredToc.push(originalToc.find((item) => item.id === id));