Merge pull request #23 from djangocon/markdown-shortcode

Adds Markdown shortcode

eleventy.config.js

@@ -1,10 +1,11 @@
 const path = require('path');
 
 const Image = require('@11ty/eleventy-img');
-const markdownIt = require("markdown-it");
 
 const setupCollections = require('./lib/collections');
 const setupFeed = require('./lib/feed');
+const markdown = require('./lib/markdown');
+const outdent = require('outdent');
 
 module.exports = (config) => {
   setupCollections(config);
@@ -66,16 +67,14 @@ module.exports = (config) => {
     return Image.generateHTML(metadata, imageAttributes);
   });
 
+  config.addPairedShortcode("markdown", function(content = "") {
+    return markdown.render(content);
+  });
+
   /*
     Filters
   */
   config.addFilter("markdown", function(content = "") {
-    let markdown = markdownIt({
-      html: true,
-      breaks: true,
-      linkify: true
-    });
-
     return markdown.render(content);
   });
 
@@ -87,6 +86,8 @@ module.exports = (config) => {
     excerpt_separator: "<!-- excerpt -->"
   });
 
+  config.setLibrary("md", markdown);
+
   return {
     dir: {
       input: "src",
@@ -96,7 +97,6 @@ module.exports = (config) => {
 
     // Use Liquid for templating
     // https://www.11ty.dev/docs/languages/liquid/
-    htmlTemplateEngine: "liquid",
-    markdownTemplateEngine: "liquid"
+    htmlTemplateEngine: "liquid"
   }
 };

lib/markdown.js

@@ -0,0 +1,17 @@
+const markdownIt = require("markdown-it");
+const markdownItAnchor = require("markdown-it-anchor");
+
+const markdown = markdownIt({
+    html: true,
+    breaks: true,
+    linkify: true
+  })
+  .use(markdownItAnchor, {
+    // The level option defines the minimum level of headings to apply anchors to.
+    // 1 applies to all headings. 2 will apply to h2 and below, etc.
+    level: 1,
+    // The slugify option is a function that transforms the heading text into a URL fragment identifier.
+    slugify: markdownItAnchor.defaults.slugify
+});
+
+module.exports = markdown;

package.json

@@ -33,8 +33,8 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-img": "^4.0.2",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.18",
     "concurrently": "^8.2.2",
@@ -47,5 +47,9 @@
     "postcss-import": "^16.0.1",
     "tailwindcss": "^3.4.1",
     "yaml": "^2.4.1"
+  },
+  "dependencies": {
+    "markdown-it-anchor": "^9.0.1",
+    "outdent": "^0.8.0"
   }
 }

src/_layouts/post.html

@@ -20,7 +20,7 @@ <h1 class="text-3xl font-bold font-heading lg:text-5xl text-balance">{{ title }}
         </figure>
       {% endif %}
 
-      {{ content }}
+      {{ content | markdown }}
     </div>
   </div>
 </article>