Install markdown-it-attrs plugin

README.md

@@ -10,6 +10,7 @@ Source code of my personal and hobby website, [Leilukin's Hub](https://leilukin.
 - [eleventy-plugin-metagen](https://www.npmjs.com/package/eleventy-plugin-metagen)
 - [eleventy-plugin-embed-everything](https://www.npmjs.com/package/eleventy-plugin-embed-everything)
 - [markdown-it-anchor](https://www.npmjs.com/package/markdown-it-anchor)
+- [markdown-it-attrs](https://github.com/arve0/markdown-it-attrs)
 - [Table of Contents (nesting) Eleventy Plugin](https://www.npmjs.com/package/eleventy-plugin-nesting-toc)
 
 ## Self-hosted Assets

eleventy.config.js

@@ -1,4 +1,4 @@
-// Installed Plug-ins
+// Installed Plugins
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
@@ -10,9 +10,10 @@ const embedEverything = require("eleventy-plugin-embed-everything");
 // Configure slug filter
 const slugify = require("slugify");
 
-// Configure markdown-it plug-ins
+// Configure markdown-it plugins
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
+const markdownItAttr = require("markdown-it-attrs");
 
 module.exports = function (eleventyConfig) {
     // Copy files
@@ -40,11 +41,8 @@ module.exports = function (eleventyConfig) {
         });
     });
 
-    // Configure markdown-it plug-ins
+    // Configure markdown-it plugins
-    eleventyConfig.setLibrary(
+    eleventyConfig.setLibrary('md', markdownIt().use(markdownItAnchor))
-        'md',
-        markdownIt().use(markdownItAnchor)
-    )
     const linkAfterHeader = markdownItAnchor.permalink.linkAfterHeader({
         class: "heading-anchor",
         symbol: "<span hidden>#</span>",
@@ -57,12 +55,10 @@ module.exports = function (eleventyConfig) {
                 lower: true,
                 strict: true,
                 remove: /["]/g,
-        }),
+            }),
         tabIndex: false,
         permalink(slug, opts, state, idx) {
-            state.tokens.splice(
+            state.tokens.splice(idx, 0,
-                idx,
-                0,
                 Object.assign(new state.Token("div_open", "div", 1), {
                     // Add class "header-wrapper [h1 or h2 or h3]"
                     attrs: [["class", `heading-wrapper ${state.tokens[idx].tag}`]],
@@ -70,9 +66,7 @@ module.exports = function (eleventyConfig) {
                 })
             );
 
-            state.tokens.splice(
+            state.tokens.splice(idx + 4, 0,
-                idx + 4,
-                0,
                 Object.assign(new state.Token("div_close", "div", -1), {
                     block: true,
                 })
@@ -85,7 +79,9 @@ module.exports = function (eleventyConfig) {
     /* Markdown Overrides */
     let markdownLibrary = markdownIt({
         html: true,
-    }).use(markdownItAnchor, markdownItAnchorOptions);
+    })
+        .use(markdownItAnchor, markdownItAnchorOptions)
+        .use(markdownItAttr);
 
     /* This is the part that tells 11ty to swap to our custom config */
     eleventyConfig.setLibrary("md", markdownLibrary);

package.json

@@ -21,6 +21,7 @@
     "eleventy-plugin-nesting-toc": "^1.3.0",
     "install": "^0.13.0",
     "markdown-it-anchor": "^8.6.7",
+    "markdown-it-attrs": "^4.1.6",
     "slugify": "^1.6.6"
   }
 }