Heading Anchors

Add anchor links to headings in the content.

The HeadingAnchorExtension generates anchor links for all headings in the content and adds them as clickable '#' symbols to the headings.

Content like this:

content/example.md
## Example Subheading

Will be rendered as:

Heading Anchor Example

Clicking on the '#' symbol will navigate to /example#example-subheading, which is the anchor link for the heading.

Usage

To use the HeadingAnchorExtension, add it to the extensions list of the ContentApp component:

ContentApp(
  ...
  extensions: [
    HeadingAnchorExtension(),
  ],
);

The extension takes the following properties to customize the behavior:

maxHeaderDepthint

The maximum header depth to generate anchors for. Defaults to 3.