mirror of
https://github.com/facebook/docusaurus.git
synced 2025-12-31 07:32:53 +00:00
156 lines
87 KiB
HTML
156 lines
87 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-guides/markdown-features/toc" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.2.1">
|
||
<title data-rh="true">Headings and Table of contents | Docusaurus</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://docusaurus.io/docs/markdown-features/toc"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" property="og:locale:alternate" content="fr"><meta data-rh="true" property="og:locale:alternate" content="pt_BR"><meta data-rh="true" property="og:locale:alternate" content="ko"><meta data-rh="true" property="og:locale:alternate" content="zh_CN"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Headings and Table of contents | Docusaurus"><meta data-rh="true" name="description" content="Customizing headings and table-of-contents in Markdown"><meta data-rh="true" property="og:description" content="Customizing headings and table-of-contents in Markdown"><link data-rh="true" rel="icon" href="/img/docusaurus.ico"><link data-rh="true" rel="canonical" href="https://docusaurus.io/docs/markdown-features/toc"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/markdown-features/toc" hreflang="en"><link data-rh="true" rel="alternate" href="https://docusaurus.io/fr/docs/markdown-features/toc" hreflang="fr"><link data-rh="true" rel="alternate" href="https://docusaurus.io/pt-BR/docs/markdown-features/toc" hreflang="pt-BR"><link data-rh="true" rel="alternate" href="https://docusaurus.io/ko/docs/markdown-features/toc" hreflang="ko"><link data-rh="true" rel="alternate" href="https://docusaurus.io/zh-CN/docs/markdown-features/toc" hreflang="zh-CN"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/markdown-features/toc" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://X1Z85QJPUV-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Docusaurus RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Docusaurus Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/blog/feed.json" title="Docusaurus JSON Feed">
|
||
|
||
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E5CR2Q1NRE"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-E5CR2Q1NRE",{})</script>
|
||
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" title="Docusaurus" href="/opensearch.xml">
|
||
<link rel="alternate" type="application/rss+xml" href="/changelog/rss.xml" title="Docusaurus changelog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/changelog/atom.xml" title="Docusaurus changelog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/changelog/feed.json" title="Docusaurus changelog JSON Feed">
|
||
|
||
|
||
|
||
<link rel="icon" href="/img/docusaurus.png">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="theme-color" content="rgb(37, 194, 160)">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="#000">
|
||
<link rel="apple-touch-icon" href="/img/docusaurus.png">
|
||
<link rel="mask-icon" href="/img/docusaurus.png" color="rgb(62, 204, 94)">
|
||
<meta name="msapplication-TileImage" content="/img/docusaurus.png">
|
||
<meta name="msapplication-TileColor" content="#000">
|
||
|
||
|
||
|
||
<link rel="alternate" type="application/rss+xml" href="/tests/blog/rss.xml" title="Docusaurus Tests Blog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/tests/blog/atom.xml" title="Docusaurus Tests Blog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/tests/blog/feed.json" title="Docusaurus Tests Blog JSON Feed">
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/katex/katex.min.css"><link rel="stylesheet" href="/assets/css/styles.76313542.css">
|
||
<script src="/assets/js/runtime~main.e1b4125a.js" defer="defer"></script>
|
||
<script src="/assets/js/main.5c3bbcf1.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_UHvc" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_cTOO" role="banner"><div class="announcementBarPlaceholder_Lqfg"></div><div class="content_ttnW announcementBarContent_PjqA">🎉️ <b><a target="_blank" href="https://docusaurus.io/blog/releases/3.2">Docusaurus v3.2</a> is out!</b> 🥳️</div><button type="button" aria-label="Close" class="clean-btn close closeButton_nmpN announcementBarClose_UFLi"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_uAgx"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"></div><b class="navbar__title text--truncate">Docusaurus</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Docs</a><a class="navbar__item navbar__link" href="/docs/cli">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/showcase">Showcase</a><a class="navbar__item navbar__link" href="/community/support">Community</a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/docs">Canary 🚧</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/markdown-features/toc">Canary 🚧</a></li><li><hr class="dropdown-separator"></li><li class="dropdown-archived-versions"><b>Archived versions</b></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.3.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.3.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.2.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.2.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.1.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.1.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.0.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.0.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://v1.docusaurus.io" target="_blank" rel="noopener noreferrer" class="dropdown__link">1.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><hr class="dropdown-separator"></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_tqOs"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>English</a><ul class="dropdown__menu"><li><a href="/docs/markdown-features/toc" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English</a></li><li><a href="/fr/docs/markdown-features/toc" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="fr">Français</a></li><li><a href="/pt-BR/docs/markdown-features/toc" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="pt-BR">Português (Brasil)</a></li><li><a href="/ko/docs/markdown-features/toc" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="ko">한국어</a></li><li><a href="/zh-CN/docs/markdown-features/toc" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="zh-CN">中文（中国）</a></li><li><hr style="margin: 0.3rem 0;"></li><li><a href="https://github.com/facebook/docusaurus/issues/3526" target="_blank" rel="noopener noreferrer" class="dropdown__link">Help Us Translate<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_bT41 colorModeToggle_UolE"><button class="clean-btn toggleButton_x9TT toggleButtonDisabled_Dj8q" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_dnYY"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_OBbf"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_dDCC"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_PEsc"><div class="docsWrapper_lLmf"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_PuQw" type="button"></button><div class="docRoot_kBZ6"><aside class="theme-doc-sidebar-container docSidebarContainer_S51O"><div class="sidebarViewport_K3q9"><div class="sidebar_vtcw sidebarWithHideableNavbar_tZ9s"><a tabindex="-1" class="sidebarLogo_UK0N" href="/"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"><b>Docusaurus</b></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_rWGR menuWithAnnouncementBar_Pf08"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs">Introduction</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/getting-started">Getting Started</a><button aria-label="Collapse sidebar category 'Getting Started'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/configuration">Configuration</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/playground">Playground</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/typescript-support">TypeScript Support</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/docs/category/guides">Guides</a><button aria-label="Collapse sidebar category 'Guides'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/creating-pages">Pages</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/docs/docs-introduction">Docs</a><button aria-label="Expand sidebar category 'Docs'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/blog">Blog</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/docs/markdown-features">Markdown Features</a><button aria-label="Collapse sidebar category 'Markdown Features'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/react">MDX and React</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/tabs">Tabs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/code-blocks">Code blocks</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/admonitions">Admonitions</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/markdown-features/toc">Headings and Table of contents</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/assets">Assets</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/links">Markdown links</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/plugins">MDX Plugins</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/math-equations">Math Equations</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/diagrams">Diagrams</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/head-metadata">Head metadata</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/styling-layout">Styling and Layout</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/swizzling">Swizzling</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/static-assets">Static Assets</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/search">Search</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/browser-support">Browser support</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/seo">SEO</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/using-plugins">Using Plugins</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/deployment">Deployment</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/docs/i18n/introduction">Internationalization</a><button aria-label="Expand sidebar category 'Internationalization'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/whats-next">What's next?</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/advanced">Advanced Guides</a><button aria-label="Expand sidebar category 'Advanced Guides'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/migration">Upgrading</a><button aria-label="Expand sidebar category 'Upgrading'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PUyN"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_DI0B"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_EfwR"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_n6xZ"><div class="docItemContainer_RhpI"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Wvrh" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_uaSn"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/category/guides"><span itemprop="name">Guides</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/markdown-features"><span itemprop="name">Markdown Features</span></a><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Headings and Table of contents</span><meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_BEWm theme-doc-toc-mobile tocMobile_NSfz"><button type="button" class="clean-btn tocCollapsibleButton_IbtT">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Headings and Table of contents</h1>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="markdown-headings">Markdown headings<a href="#markdown-headings" class="hash-link" aria-label="Direct link to Markdown headings" title="Direct link to Markdown headings"></a></h2>
|
||
<p>You can use regular Markdown headings.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token title important punctuation" style="color:#393A34;font-weight:bold">##</span><span class="token title important" style="color:#0550AE;font-weight:bold"> Level 2 title</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token title important punctuation" style="color:#393A34;font-weight:bold">###</span><span class="token title important" style="color:#0550AE;font-weight:bold"> Level 3 title</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token title important punctuation" style="color:#393A34;font-weight:bold">####</span><span class="token title important" style="color:#0550AE;font-weight:bold"> Level 4 title</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Each Markdown heading will appear as a table of contents entry.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="heading-ids">Heading IDs<a href="#heading-ids" class="hash-link" aria-label="Direct link to Heading IDs" title="Direct link to Heading IDs"></a></h3>
|
||
<p>Each heading has an ID that can be automatically generated or explicitly specified. Heading IDs allow you to link to a specific document heading in Markdown or JSX:</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token url" style="color:#36acaa">[</span><span class="token url content" style="color:#36acaa">link</span><span class="token url" style="color:#36acaa">](</span><span class="token url" style="color:#36acaa">#heading-id</span><span class="token url" style="color:#36acaa">)</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">Link</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">to</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">#heading-id</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">link</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#116329">Link</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>By default, Docusaurus will generate heading IDs for you, based on the heading text. For example, <code>### Hello World</code> will have ID <code>hello-world</code>.</p>
|
||
<p>Generated IDs have <strong>some limitations</strong>:</p>
|
||
<ul>
|
||
<li>The ID might not look good</li>
|
||
<li>You might want to <strong>change or translate</strong> the text without updating the existing ID</li>
|
||
</ul>
|
||
<p>A special Markdown syntax lets you set an <strong>explicit heading id</strong>:</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token title important punctuation" style="color:#393A34;font-weight:bold">###</span><span class="token title important" style="color:#0550AE;font-weight:bold"> Hello World {#my-explicit-id}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="theme-admonition theme-admonition-tip admonition_o5H7 alert alert--success"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_Knsx"><p>Use the <strong><a href="/docs/cli#docusaurus-write-heading-ids-sitedir"><code>write-heading-ids</code></a></strong> CLI command to add explicit IDs to all your Markdown documents.</p></div></div>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Avoid colliding IDs</div><div class="admonitionContent_Knsx"><p>Generated heading IDs will be guaranteed to be unique on each page, but if you use custom IDs, make sure each one appears exactly once on each page, or there will be two DOM elements with the same ID, which is invalid HTML semantics, and will lead to one heading being unlinkable.</p></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="table-of-contents-heading-level">Table of contents heading level<a href="#table-of-contents-heading-level" class="hash-link" aria-label="Direct link to Table of contents heading level" title="Direct link to Table of contents heading level"></a></h2>
|
||
<p>Each Markdown document displays a table of contents on the top-right corner. By default, this table only shows h2 and h3 headings, which should be sufficient for an overview of the page structure. In case you need to change the range of headings displayed, you can customize the minimum and maximum heading level — either per page or globally.</p>
|
||
<p>To set the heading level for a particular page, use the <code>toc_min_heading_level</code> and <code>toc_max_heading_level</code> front matter.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">myDoc.md</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token front-matter-block punctuation" style="color:#393A34">---</span><span class="token front-matter-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token front-matter-block"></span><span class="token front-matter-block front-matter yaml language-yaml comment" style="color:#6B6B6B;font-style:italic"># Display h2 to h5 headings</span><span class="token front-matter-block front-matter yaml language-yaml"></span><br></span><span class="token-line" style="color:#393A34"><span class="token front-matter-block front-matter yaml language-yaml"></span><span class="token front-matter-block front-matter yaml language-yaml key atrule" style="color:#22863A">toc_min_heading_level</span><span class="token front-matter-block front-matter yaml language-yaml punctuation" style="color:#393A34">:</span><span class="token front-matter-block front-matter yaml language-yaml"> </span><span class="token front-matter-block front-matter yaml language-yaml number" style="color:#005CC5">2</span><span class="token front-matter-block front-matter yaml language-yaml"></span><br></span><span class="token-line" style="color:#393A34"><span class="token front-matter-block front-matter yaml language-yaml"></span><span class="token front-matter-block front-matter yaml language-yaml key atrule" style="color:#22863A">toc_max_heading_level</span><span class="token front-matter-block front-matter yaml language-yaml punctuation" style="color:#393A34">:</span><span class="token front-matter-block front-matter yaml language-yaml"> </span><span class="token front-matter-block front-matter yaml language-yaml number" style="color:#005CC5">5</span><span class="token front-matter-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token front-matter-block"></span><span class="token front-matter-block punctuation" style="color:#393A34">---</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>To set the heading level for <em>all</em> pages, use the <a href="/docs/api/themes/configuration#table-of-contents"><code>themeConfig.tableOfContents</code></a> option.</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus.config.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">themeConfig</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">tableOfContents</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">minHeadingLevel</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">2</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">maxHeadingLevel</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">5</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>If you've set the options globally, you can still override them locally via front matter.</p>
|
||
<div class="theme-admonition theme-admonition-note admonition_o5H7 alert alert--secondary"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_Knsx"><p>The <code>themeConfig</code> option would apply to all TOC on the site, including <a href="#inline-table-of-contents">inline TOC</a>, but front matter options only affect the top-right TOC. You need to use the <code>minHeadingLevel</code> and <code>maxHeadingLevel</code> props to customize each <code><TOCInline /></code> component.</p></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="inline-table-of-contents">Inline table of contents<a href="#inline-table-of-contents" class="hash-link" aria-label="Direct link to Inline table of contents" title="Direct link to Inline table of contents"></a></h2>
|
||
<p>It is also possible to display an inline table of contents directly inside a Markdown document, thanks to MDX.</p>
|
||
<p>The <code>toc</code> variable is available in any MDX document and contains all the headings of an MDX document. By default, only <code>h2</code> and <code>h3</code> headings are displayed in the TOC. You can change which heading levels are visible by setting <code>minHeadingLevel</code> or <code>maxHeadingLevel</code> for individual <code>TOCInline</code> components.</p>
|
||
<!-- -->
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">TOCInline</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@theme/TOCInline'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">TOCInline</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">toc</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#24292E">toc</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#22863A"> </span><span class="token tag punctuation" style="color:#393A34">/></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<!-- -->
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tableOfContentsInline_2sru"><ul class="table-of-contents"><li><a href="#markdown-headings">Markdown headings</a><ul><li><a href="#heading-ids">Heading IDs</a></li></ul></li><li><a href="#table-of-contents-heading-level">Table of contents heading level</a></li><li><a href="#inline-table-of-contents">Inline table of contents</a></li><li><a href="#customizing-table-of-contents-generation">Customizing table of contents generation</a></li><li><a href="#example-section-1">Example Section 1</a><ul><li><a href="#example-subsection-1-a">Example Subsection 1 a</a></li><li><a href="#example-subsection-1-b">Example Subsection 1 b</a></li><li><a href="#example-subsection-1-c">Example Subsection 1 c</a></li></ul></li><li><a href="#example-section-2">Example Section 2</a><ul><li><a href="#example-subsection-2-a">Example Subsection 2 a</a></li><li><a href="#example-subsection-2-b">Example Subsection 2 b</a></li><li><a href="#example-subsection-2-c">Example Subsection 2 c</a></li></ul></li><li><a href="#example-section-3">Example Section 3</a><ul><li><a href="#example-subsection-3-a">Example Subsection 3 a</a></li><li><a href="#example-subsection-3-b">Example Subsection 3 b</a></li><li><a href="#example-subsection-3-c">Example Subsection 3 c</a></li></ul></li></ul></div></div></div>
|
||
<p>The <code>toc</code> global is just a list of heading items:</p>
|
||
<div class="language-ts codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-ts codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">declare</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> toc</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> value</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> id</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> level</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Note that the <code>toc</code> global is a flat array, so you can easily cut out unwanted nodes or insert extra nodes, and create a new TOC tree.</p>
|
||
<!-- -->
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">TOCInline</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@theme/TOCInline'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">TOCInline</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag comment" style="color:#6B6B6B;font-style:italic">// Only show h2 and h4 headings</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">toc</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#24292E">toc</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript method function property-access" style="color:#8250DF">filter</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript parameter" style="color:#953800">node</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript arrow operator" style="color:#D73A49">=></span><span class="token tag script language-javascript" style="color:#24292E"> node</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript property-access" style="color:#24292E">level</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript operator" style="color:#D73A49">===</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript number" style="color:#005CC5">2</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript operator" style="color:#D73A49">||</span><span class="token tag script language-javascript" style="color:#24292E"> node</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript property-access" style="color:#24292E">level</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript operator" style="color:#D73A49">===</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript number" style="color:#005CC5">4</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">minHeadingLevel</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#005CC5">2</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag comment" style="color:#6B6B6B;font-style:italic">// Show h4 headings in addition to the default h2 and h3 headings</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">maxHeadingLevel</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#005CC5">4</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#22863A"></span><span class="token tag punctuation" style="color:#393A34">/></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tableOfContentsInline_2sru"><ul class="table-of-contents"><li><a href="#markdown-headings">Markdown headings</a></li><li><a href="#table-of-contents-heading-level">Table of contents heading level</a></li><li><a href="#inline-table-of-contents">Inline table of contents</a></li><li><a href="#customizing-table-of-contents-generation">Customizing table of contents generation</a></li><li><a href="#example-section-1">Example Section 1</a><ul><li><a href="#example-subsubsection-1-a-i">Example subsubsection 1 a I</a></li><li><a href="#example-subsubsection-1-a-ii">Example subsubsection 1 a II</a></li><li><a href="#example-subsubsection-1-a-iii">Example subsubsection 1 a III</a></li><li><a href="#example-subsubsection-1-b-i">Example subsubsection 1 b I</a></li><li><a href="#example-subsubsection-1-b-ii">Example subsubsection 1 b II</a></li><li><a href="#example-subsubsection-1-b-iii">Example subsubsection 1 b III</a></li><li><a href="#example-subsubsection-1-c-i">Example subsubsection 1 c I</a></li><li><a href="#example-subsubsection-1-c-ii">Example subsubsection 1 c II</a></li><li><a href="#example-subsubsection-1-c-iii">Example subsubsection 1 c III</a></li></ul></li><li><a href="#example-section-2">Example Section 2</a><ul><li><a href="#example-subsubsection-2-a-i">Example subsubsection 2 a I</a></li><li><a href="#example-subsubsection-2-a-ii">Example subsubsection 2 a II</a></li><li><a href="#example-subsubsection-2-a-iii">Example subsubsection 2 a III</a></li><li><a href="#example-subsubsection-2-b-i">Example subsubsection 2 b I</a></li><li><a href="#example-subsubsection-2-b-ii">Example subsubsection 2 b II</a></li><li><a href="#example-subsubsection-2-b-iii">Example subsubsection 2 b III</a></li><li><a href="#example-subsubsection-2-c-i">Example subsubsection 2 c I</a></li><li><a href="#example-subsubsection-2-c-ii">Example subsubsection 2 c II</a></li><li><a href="#example-subsubsection-2-c-iii">Example subsubsection 2 c III</a></li></ul></li><li><a href="#example-section-3">Example Section 3</a><ul><li><a href="#example-subsubsection-3-a-i">Example subsubsection 3 a I</a></li><li><a href="#example-subsubsection-3-a-ii">Example subsubsection 3 a II</a></li><li><a href="#example-subsubsection-3-a-iii">Example subsubsection 3 a III</a></li><li><a href="#example-subsubsection-3-b-i">Example subsubsection 3 b I</a></li><li><a href="#example-subsubsection-3-b-ii">Example subsubsection 3 b II</a></li><li><a href="#example-subsubsection-3-b-iii">Example subsubsection 3 b III</a></li><li><a href="#example-subsubsection-3-c-i">Example subsubsection 3 c I</a></li><li><a href="#example-subsubsection-3-c-ii">Example subsubsection 3 c II</a></li><li><a href="#example-subsubsection-3-c-iii">Example subsubsection 3 c III</a></li></ul></li></ul></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="customizing-table-of-contents-generation">Customizing table of contents generation<a href="#customizing-table-of-contents-generation" class="hash-link" aria-label="Direct link to Customizing table of contents generation" title="Direct link to Customizing table of contents generation"></a></h2>
|
||
<p>The table-of-contents is generated by parsing the Markdown source with a <a href="/docs/markdown-features/plugins">Remark plugin</a>. There are known edge-cases where it generates false-positives and false-negatives.</p>
|
||
<p>Markdown headings within hideable areas will still show up in the TOC. For example, headings within <a href="/docs/markdown-features/tabs"><code>Tabs</code></a> and <a href="/docs/markdown-features#details"><code>details</code></a> will not be excluded.</p>
|
||
<p>Non-Markdown headings will not show up in the TOC. This can be used to your advantage to tackle the aforementioned issue.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">details</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">summary</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain">Some details containing headings</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">summary</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">h2</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">id</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">#heading-id</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain">I'm a heading that will not show up in the TOC</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">h2</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Some content...</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">details</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>The ability to ergonomically insert extra headings or ignore certain headings is a work-in-progress. If this feature is important to you, please report your use-case in <a href="https://github.com/facebook/docusaurus/issues/6201" target="_blank" rel="noopener noreferrer">this issue</a>.</p>
|
||
<hr>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_Knsx"><p>Below is just some dummy content to have more table of contents items available on the current page.</p></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-section-1">Example Section 1<a href="#example-section-1" class="hash-link" aria-label="Direct link to Example Section 1" title="Direct link to Example Section 1"></a></h2>
|
||
<p>Lorem ipsum</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-1-a">Example Subsection 1 a<a href="#example-subsection-1-a" class="hash-link" aria-label="Direct link to Example Subsection 1 a" title="Direct link to Example Subsection 1 a"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-a-i">Example subsubsection 1 a I<a href="#example-subsubsection-1-a-i" class="hash-link" aria-label="Direct link to Example subsubsection 1 a I" title="Direct link to Example subsubsection 1 a I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-a-ii">Example subsubsection 1 a II<a href="#example-subsubsection-1-a-ii" class="hash-link" aria-label="Direct link to Example subsubsection 1 a II" title="Direct link to Example subsubsection 1 a II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-a-iii">Example subsubsection 1 a III<a href="#example-subsubsection-1-a-iii" class="hash-link" aria-label="Direct link to Example subsubsection 1 a III" title="Direct link to Example subsubsection 1 a III"></a></h4>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-1-b">Example Subsection 1 b<a href="#example-subsection-1-b" class="hash-link" aria-label="Direct link to Example Subsection 1 b" title="Direct link to Example Subsection 1 b"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-b-i">Example subsubsection 1 b I<a href="#example-subsubsection-1-b-i" class="hash-link" aria-label="Direct link to Example subsubsection 1 b I" title="Direct link to Example subsubsection 1 b I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-b-ii">Example subsubsection 1 b II<a href="#example-subsubsection-1-b-ii" class="hash-link" aria-label="Direct link to Example subsubsection 1 b II" title="Direct link to Example subsubsection 1 b II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-b-iii">Example subsubsection 1 b III<a href="#example-subsubsection-1-b-iii" class="hash-link" aria-label="Direct link to Example subsubsection 1 b III" title="Direct link to Example subsubsection 1 b III"></a></h4>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-1-c">Example Subsection 1 c<a href="#example-subsection-1-c" class="hash-link" aria-label="Direct link to Example Subsection 1 c" title="Direct link to Example Subsection 1 c"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-c-i">Example subsubsection 1 c I<a href="#example-subsubsection-1-c-i" class="hash-link" aria-label="Direct link to Example subsubsection 1 c I" title="Direct link to Example subsubsection 1 c I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-c-ii">Example subsubsection 1 c II<a href="#example-subsubsection-1-c-ii" class="hash-link" aria-label="Direct link to Example subsubsection 1 c II" title="Direct link to Example subsubsection 1 c II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-1-c-iii">Example subsubsection 1 c III<a href="#example-subsubsection-1-c-iii" class="hash-link" aria-label="Direct link to Example subsubsection 1 c III" title="Direct link to Example subsubsection 1 c III"></a></h4>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-section-2">Example Section 2<a href="#example-section-2" class="hash-link" aria-label="Direct link to Example Section 2" title="Direct link to Example Section 2"></a></h2>
|
||
<p>Lorem ipsum</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-2-a">Example Subsection 2 a<a href="#example-subsection-2-a" class="hash-link" aria-label="Direct link to Example Subsection 2 a" title="Direct link to Example Subsection 2 a"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-a-i">Example subsubsection 2 a I<a href="#example-subsubsection-2-a-i" class="hash-link" aria-label="Direct link to Example subsubsection 2 a I" title="Direct link to Example subsubsection 2 a I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-a-ii">Example subsubsection 2 a II<a href="#example-subsubsection-2-a-ii" class="hash-link" aria-label="Direct link to Example subsubsection 2 a II" title="Direct link to Example subsubsection 2 a II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-a-iii">Example subsubsection 2 a III<a href="#example-subsubsection-2-a-iii" class="hash-link" aria-label="Direct link to Example subsubsection 2 a III" title="Direct link to Example subsubsection 2 a III"></a></h4>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-2-b">Example Subsection 2 b<a href="#example-subsection-2-b" class="hash-link" aria-label="Direct link to Example Subsection 2 b" title="Direct link to Example Subsection 2 b"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-b-i">Example subsubsection 2 b I<a href="#example-subsubsection-2-b-i" class="hash-link" aria-label="Direct link to Example subsubsection 2 b I" title="Direct link to Example subsubsection 2 b I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-b-ii">Example subsubsection 2 b II<a href="#example-subsubsection-2-b-ii" class="hash-link" aria-label="Direct link to Example subsubsection 2 b II" title="Direct link to Example subsubsection 2 b II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-b-iii">Example subsubsection 2 b III<a href="#example-subsubsection-2-b-iii" class="hash-link" aria-label="Direct link to Example subsubsection 2 b III" title="Direct link to Example subsubsection 2 b III"></a></h4>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-2-c">Example Subsection 2 c<a href="#example-subsection-2-c" class="hash-link" aria-label="Direct link to Example Subsection 2 c" title="Direct link to Example Subsection 2 c"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-c-i">Example subsubsection 2 c I<a href="#example-subsubsection-2-c-i" class="hash-link" aria-label="Direct link to Example subsubsection 2 c I" title="Direct link to Example subsubsection 2 c I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-c-ii">Example subsubsection 2 c II<a href="#example-subsubsection-2-c-ii" class="hash-link" aria-label="Direct link to Example subsubsection 2 c II" title="Direct link to Example subsubsection 2 c II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-2-c-iii">Example subsubsection 2 c III<a href="#example-subsubsection-2-c-iii" class="hash-link" aria-label="Direct link to Example subsubsection 2 c III" title="Direct link to Example subsubsection 2 c III"></a></h4>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-section-3">Example Section 3<a href="#example-section-3" class="hash-link" aria-label="Direct link to Example Section 3" title="Direct link to Example Section 3"></a></h2>
|
||
<p>Lorem ipsum</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-3-a">Example Subsection 3 a<a href="#example-subsection-3-a" class="hash-link" aria-label="Direct link to Example Subsection 3 a" title="Direct link to Example Subsection 3 a"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-a-i">Example subsubsection 3 a I<a href="#example-subsubsection-3-a-i" class="hash-link" aria-label="Direct link to Example subsubsection 3 a I" title="Direct link to Example subsubsection 3 a I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-a-ii">Example subsubsection 3 a II<a href="#example-subsubsection-3-a-ii" class="hash-link" aria-label="Direct link to Example subsubsection 3 a II" title="Direct link to Example subsubsection 3 a II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-a-iii">Example subsubsection 3 a III<a href="#example-subsubsection-3-a-iii" class="hash-link" aria-label="Direct link to Example subsubsection 3 a III" title="Direct link to Example subsubsection 3 a III"></a></h4>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-3-b">Example Subsection 3 b<a href="#example-subsection-3-b" class="hash-link" aria-label="Direct link to Example Subsection 3 b" title="Direct link to Example Subsection 3 b"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-b-i">Example subsubsection 3 b I<a href="#example-subsubsection-3-b-i" class="hash-link" aria-label="Direct link to Example subsubsection 3 b I" title="Direct link to Example subsubsection 3 b I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-b-ii">Example subsubsection 3 b II<a href="#example-subsubsection-3-b-ii" class="hash-link" aria-label="Direct link to Example subsubsection 3 b II" title="Direct link to Example subsubsection 3 b II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-b-iii">Example subsubsection 3 b III<a href="#example-subsubsection-3-b-iii" class="hash-link" aria-label="Direct link to Example subsubsection 3 b III" title="Direct link to Example subsubsection 3 b III"></a></h4>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsection-3-c">Example Subsection 3 c<a href="#example-subsection-3-c" class="hash-link" aria-label="Direct link to Example Subsection 3 c" title="Direct link to Example Subsection 3 c"></a></h3>
|
||
<p>Lorem ipsum</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-c-i">Example subsubsection 3 c I<a href="#example-subsubsection-3-c-i" class="hash-link" aria-label="Direct link to Example subsubsection 3 c I" title="Direct link to Example subsubsection 3 c I"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-c-ii">Example subsubsection 3 c II<a href="#example-subsubsection-3-c-ii" class="hash-link" aria-label="Direct link to Example subsubsection 3 c II" title="Direct link to Example subsubsection 3 c II"></a></h4>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="example-subsubsection-3-c-iii">Example subsubsection 3 c III<a href="#example-subsubsection-3-c-iii" class="hash-link" aria-label="Direct link to Example subsubsection 3 c III" title="Direct link to Example subsubsection 3 c III"></a></h4></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-toc.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_IMw_" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_OHCJ"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2023-10-14T00:46:03.000Z" itemprop="dateModified">Oct 14, 2023</time></b> by <b>Chongyi Zheng</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/markdown-features/admonitions"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Admonitions</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/markdown-features/assets"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Assets</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_RLlU thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#markdown-headings" class="table-of-contents__link toc-highlight">Markdown headings</a><ul><li><a href="#heading-ids" class="table-of-contents__link toc-highlight">Heading IDs</a></li></ul></li><li><a href="#table-of-contents-heading-level" class="table-of-contents__link toc-highlight">Table of contents heading level</a></li><li><a href="#inline-table-of-contents" class="table-of-contents__link toc-highlight">Inline table of contents</a></li><li><a href="#customizing-table-of-contents-generation" class="table-of-contents__link toc-highlight">Customizing table of contents generation</a></li><li><a href="#example-section-1" class="table-of-contents__link toc-highlight">Example Section 1</a><ul><li><a href="#example-subsection-1-a" class="table-of-contents__link toc-highlight">Example Subsection 1 a</a></li><li><a href="#example-subsection-1-b" class="table-of-contents__link toc-highlight">Example Subsection 1 b</a></li><li><a href="#example-subsection-1-c" class="table-of-contents__link toc-highlight">Example Subsection 1 c</a></li></ul></li><li><a href="#example-section-2" class="table-of-contents__link toc-highlight">Example Section 2</a><ul><li><a href="#example-subsection-2-a" class="table-of-contents__link toc-highlight">Example Subsection 2 a</a></li><li><a href="#example-subsection-2-b" class="table-of-contents__link toc-highlight">Example Subsection 2 b</a></li><li><a href="#example-subsection-2-c" class="table-of-contents__link toc-highlight">Example Subsection 2 c</a></li></ul></li><li><a href="#example-section-3" class="table-of-contents__link toc-highlight">Example Section 3</a><ul><li><a href="#example-subsection-3-a" class="table-of-contents__link toc-highlight">Example Subsection 3 a</a></li><li><a href="#example-subsection-3-b" class="table-of-contents__link toc-highlight">Example Subsection 3 b</a></li><li><a href="#example-subsection-3-c" class="table-of-contents__link toc-highlight">Example Subsection 3 c</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Learn</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs">Introduction</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/installation">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/migration">Migration from v1 to v2</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/feature-requests">Feature Requests</a></li><li class="footer__item"><a href="https://discordapp.com/invite/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/community/support">Help</a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" href="/changelog">Changelog</a></li><li class="footer__item"><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item">
|
||
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
|
||
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51">
|
||
</a>
|
||
</li><li class="footer__item">
|
||
<a href="https://argos-ci.com" target="_blank" rel="noreferrer noopener" aria-label="Covered by Argos">
|
||
<img src="https://argos-ci.com/badge.svg" alt="Covered by Argos" width="133" height="20">
|
||
</a>
|
||
</li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/cookie-policy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cookie Policy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.fb.com" rel="noopener noreferrer" class="footerLogoLink_CiM_"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--light_LEkC"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--dark_jnGk"></a></div><div class="footer__copyright">Copyright © 2024 Meta Platforms, Inc. Built with Docusaurus.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |