Vuepress: Cannot access page headers that are not h2 or h3

[lesliecdubs]

• [x] I confirm that this is an issue rather than a question.

Bug report

Currently, header levels are hard-coded in VuePress core.

This limits our ability to access header levels beyond h3.

Our use case for this is a custom table of contents component that we are displaying on every page of our site. Our content uses h4s.

We don't want header levels below h3 to show up in our table of contents; however, we'd like for the preceding h3 to maintain the active indicator once a user has scrolled past an h4.

What is expected?

There should be some way to customize the header levels that are stored in this.$page.headers.

What is actually happening?

Header levels stored in this.$page.headers are hard-coded to only include h2 and h3.

cc @shortdiv

[kefranabg]

Hi @lesliecdubs,

Thanks for the report.

If I correctly understand, the only thing you need is including h4 headers data in $page.headers so you can display these levels on your table of contents right?

---

const headers = extractHeaders(
   this._strippedContent,
   ['h2', 'h3', 'h4', 'h5', 'h6'],
   markdown
)

Would that solve your problem?

[shortdiv]

Jumping in here, since @lesliecdubs and I worked on this, yeah, that would solve the problem! The other option would be pulling in the desired headers from the vuepress config.

[kefranabg]

See #1945