Add markdown-it plugins to Stati

Footnotes, containers and emoji, and the plugin that has to go through configure instead.

SNP 073 #513 Filed stati markdown

shell
npm install -D markdown-it-footnote markdown-it-container markdown-it-emoji
typescript
// stati.config.ts
import { defineConfig } from '@stati/core';
import { full as emoji } from 'markdown-it-emoji';

export default defineConfig({
  // site and the rest…
  markdown: {
    plugins: [
      'footnote', // markdown-it-footnote
      ['container', 'tip'], // markdown-it-container, and its argument
      ['container', 'warning'],
    ],
    configure(md) {
      // markdown-it-emoji 3 has no default export, so it can't go in plugins
      md.use(emoji);
    },
  },
});
markdown
::: tip
Every page in `site/` is a Markdown file.
:::

A footnote,[^1] and an emoji :tada:

[^1]: The note itself.
  • Stati puts markdown-it- in front of each name and loads the package from your project, so install the plugins yourself.
  • In an array, the second item goes to the plugin: options for most of them, the container's name for markdown-it-container, which wraps the block in <div class="tip">.
  • Stati uses the package's default export. A plugin without one, like markdown-it-emoji 3, or one that isn't installed, only logs "Failed to load markdown plugin" and the build carries on without it. Check the output once after adding one.
  • configure runs after plugins and gets the markdown-it instance, so it can change its options too: md.set({ breaks: true }).

In the Stati docs: Markdown plugins and Custom configuration.