Configuring markdown-it

[valtlai]

It should be possible to configure markdown-it, for example, to add plugins or to modify renderers.

Maybe something like:

import lume from "https://deno.land/x/lume/mod.js";
import markdown from "https://deno.land/x/lume/plugins/markdown.js";
import markdownItContainer from "https://jspm.dev/markdown-it-container";
  
const site = lume();

site.use(markdown({
  modify (md) {
    // Add a markdown-it plugin
    md.use(markdownItContainer);

    // Customize a renderer
    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
	// ...
    };
  }
}));

export default site;

[oscarotero]

I have thought about this several times, but I didn't decided a proper way to do it. One idea is adding an option to disable default plugins, so you can add it later with your own config options. For example:

const site = lume({ disable: ["markdown"] });

site.use(markdown(/** Your config here */));

But I guess most users want to configure these plugins, not disable them. So another idea is being able to pass options to the default plugins in the lume factory:

const site = lume({
  plugins: {
    markdown: {
      plugins: [markdownItContainer],
    }
  }
});

Another idea is providing a container in which all plugins can save their dependencies in order to configure them. For example:

const site = lume();

const markdownIt = site.deps.get("markdown-it");

This could be used by other plugins like pug, postcss, etc. But I'm not convinced because it's useful only for the default plugins, not other plugins that the user can configure on register.

And other idea is do nothing, due the user always can create an empty Site instance, without plugins. The mod.js module is only a convenient way to create a site with some good defaults. But this code could be used in _config.js file directly:

import Site from "https://deno.land/x/lume/site.js";
import markdown from "https://deno.land/x/lume/plugins/markdown.js";

const site = new Site(options);

site.use(markdown())

return site;

For now, the way to access to the markdownIt instance, is getting the property engine from the template engine:

const mdEngine = site.engines.get(".md");
const md = mdEngine.engine;
md.use(markdownItContainer);

[oscarotero]

I've added a second argument here to configure the default plugins, so you can pass options to markdown (or any other plugin) by:

const site = lume({}, {
   markdown: {
    options: { html: false },
    plugins: [plugin1, plugin2]
  }
})

[valtlai]

That’s very nice. Thanks!