add a anchor visible sign on non-H1 headers

Author: fharper

.eleventy.js

@@ -37,19 +37,28 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(syntaxHighlight);
 
-  //Slugify (add strict mode)
-  const markdownItAnchorOptions = {
-    level: [1, 2, 3],
+  //Replace Markdown with custom configurations
+  const md = markdownIt({
+    html: true,
+    linkify: true,
+    typographer: true
+  }).use(markdownItAnchor, {
+    level: [2, 3, 4, 5, 6],
     slugify: (str) =>
       slugify(str, {
         lower: true,
         strict: true,
         remove: /["]/g,
       }),
-    };
+    permalink: markdownItAnchor.permalink.linkInsideHeader({
+      symbol: ' #',
+      placement: 'after',
+      ariaHidden: true,
+      class: 'header-anchor',
+    }),
+  });
 
-  //Replace Markdown with custom configurations
-  eleventyConfig.setLibrary("md", markdownIt().use(markdownItAnchor, markdownItAnchorOptions))
+  eleventyConfig.setLibrary("md", md);
 
   //Search: pageFind
   eleventyConfig.on('eleventy.after', () => {

package.json

@@ -42,6 +42,8 @@
   },
   "dependencies": {
     "eleventy-plugin-youtube-embed": "^1.11.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-attrs": "^4.3.1",
     "remove": "^0.1.5",
     "slugify": "^1.6.6"
   },

src/css/main.css

@@ -57,3 +57,18 @@
   text-decoration: none;
   color: #7f7f7f;
 }
+
+.header-anchor {
+  text-decoration: none;
+  margin-left: 0.25em;
+  font-weight: normal;
+  visibility: hidden;
+}
+
+h2:hover .header-anchor,
+h3:hover .header-anchor,
+h4:hover .header-anchor,
+h5:hover .header-anchor,
+h6:hover .header-anchor {
+  visibility: visible;
+}