markdown-it-anchor

eleventy.config.js

@@ -1,7 +1,10 @@
-import { attrs } from "@mdit/plugin-attrs";
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
+
+import { attrs } from "@mdit/plugin-attrs";
 import { markdownitLinkAttributes } from 'markdown-it-link-attributes';
+import markdownitIdAttributes from "markdown-it-anchor";
+
 import path from "node:path";
 
 import pluginFilters from "./_config/filters.js";
@@ -11,7 +14,7 @@ export default async function (eleventyConfig) {
 	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(attrs));
 
 	/* Markdown apply target="_blank" to all external links */
-	const milaOptions = {
+	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitLinkAttributes, {
     matcher(href) {
       return href.match(/^https?:\/\//);
     },
@@ -19,8 +22,13 @@ export default async function (eleventyConfig) {
       target: "_blank",
       rel: "external",
     },
-  };
-	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitLinkAttributes, milaOptions));
+  }));
+
+	/* Markdown apply ID attributes to headers */
+	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitIdAttributes, {
+		level: [2, 3, 4],
+		tabIndex: false,
+	}));
 
 	/* Bundles */
 	/* CSS */