nuxt / nuxt/content

Add option to preserve original heading markup in TOC sidebar

Open
#2,842 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
3.7k
Forks
746
Avg merge
1d 16h
Merged PRs (30d)
3

Description

Is your feature request related to a problem? Please describe

Sometimes on uses markup in headers like code sections or emph/bold...or where this is most apparent: strikethrough (foo). Another think which often gets added to headers are badges/pill. Most of the time it would make sense to also show them in the TOC.

If these are displayed in the sidebar without their markup they can unexpectedly look different, have a completely different meaning (if strikethrough is omitted), or are just harder to spot (badges).

Describe the solution you'd like

It should be possible to preserve show the entries in the TOC in the same way they are in the original headers, just with a smaller font size.

Describe alternatives you've considered

Not using markup in headings any more or living with the style getting lost. For emph, bold, and code styling this is somewhat acceptable as they text without styling is semantically the same. Losing strikethrough, however, would lead to a different meaning. The only option is to stop using it but this restricts how one can author their content.
Additionally, for stuff like badges there is no satisfactory workaround.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files or tests are named. Start by locating the TOC sidebar and heading-rendering entry points, then reproduce headings containing code, emphasis, bold, strikethrough, and badges. Done means the sidebar preserves the original heading markup at a smaller font size without breaking existing TOC behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown, typescript
Domain
content, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.