function ventoHeadingAnchors
ventoHeadingAnchors(userOptions?: HeadingAnchorsOptions): (pages: Page[]) => void

Adds ID and anchor links to heading elements in Vento-rendered pages.

This processor:

  • Adds unique id attributes to headings
  • Optionally adds tabindex attributes for keyboard navigation
  • Inserts anchor links (# symbols) for deep linking
  • Handles duplicate headings with numbered suffixes
  • Only processes pages rendered with specified template engines (default: Vento)

Examples

Example 1

// In your Lume _config.ts:
import { ventoHeadingAnchors } from "hibana/mod.ts";

const site = lume();

// Add heading anchors to Vento pages (matches markdown-it style by default)
site.process([".html"], ventoHeadingAnchors({
  level: 2,              // Start at h2
  maxLevel: 4,           // End at h4
}));

// Or customize for different style (e.g., visible # symbol outside)
site.process([".html"], ventoHeadingAnchors({
  anchorPosition: "outside",  // Place anchor after heading text
  anchorSymbol: "#",          // Visible # symbol
}));

Example 2

<!-- Input -->
<h2>Introduction</h2>
<h3>Getting Started</h3>

<!-- Output (default: anchorPosition "inside", no symbol) -->
<h2 id="introduction" tabindex="-1">
  <a href="#introduction" class="header-anchor" aria-label="Permalink">Introduction</a>
</h2>
<h3 id="getting-started" tabindex="-1">
  <a href="#getting-started" class="header-anchor" aria-label="Permalink">Getting Started</a>
</h3>

<!-- Styled with CSS ::before for link icon (like markdown-it-toc-done-right) -->

Parameters

optional
userOptions: HeadingAnchorsOptions

Configuration options

Return Type

(pages: Page[]) => void

A Lume processor function

Usage

import { ventoHeadingAnchors } from ".";