Enhanced Markdown Rendering with markdown-it Plugins

Markdown is a really great tool every writer should be familiar with. And it's amazing to see its development since the first time John Gruber proposed it to us in 2004. Especially GitHub flavored markdown has turned markdown into a favorite for many writers and developers.

Eleventy uses markdown-it as its default renderer and a sensible set of default settings. While tables and strike throug are already included, for some other [markdown syntax extensions] you might want to add more markdown-it plugins.

Markdown Syntax extensions

Markdown syntax extentions add capabilietes to markdown that were not part of the original markdown proprosal. Here are some examples:

Setting up Markdown-it Plugins in

Lets install the required packages:

npm install --save-dev markdown-it-kbd markdown-it-mark markdown-it-ins

Now we add out plugins to the eleventy.config.js by amending the Mardown Library

import markdownItIns from 'markdown-it-ins';
import markdownItKbd from 'markdown-it-kbd';
import markdownItMark from 'markdown-it-mark';

export default function (eleventyConfig) {
  eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownItKbd));
  eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownItMark));
  eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownItIns));
}

Styling

Add CSS for the new elements:

/* Keyboard keys */
kbd {
  padding: 0.2em 0.4em;
  background: var(--color-kbd-bg);
  border: 1px solid var(--color-kbd-border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Marked text */
mark {
  background: var(--color-mark-bg);
  padding: 0.1em 0.2em;
}

Resources

• Eleventy Markdown Setting
• markdown-it documentation
• Eleventy markdown configuration
• List of markdown-it plugins