Using shiki with 11ty

TLDR

Add this file to your project e.g. as libs/shiki.js:

js
const shiki = require('shiki');

module.exports = (eleventyConfig, options) => {
  // empty call to notify 11ty that we use this feature
  // eslint-disable-next-line no-empty-function
  eleventyConfig.amendLibrary('md', () => {});

  eleventyConfig.on('eleventy.before', async () => {
    const highlighter = await shiki.getHighlighter(options);
    eleventyConfig.amendLibrary('md', (mdLib) =>
      mdLib.set({
        highlight: (code, lang) => highlighter.codeToHtml(code, { lang }),
      })
    );
  });
};

And then add it as a plugin to your eleventyConfig:

js
module.exports = function(eleventyConfig) {

  eleventyConfig.addPlugin(require("libs/shiki.js"), { theme: "dark-plus" }); 

  // [...]
}

The not so short version

Let's start with an empty plugin:

js
module.exports = (eleventyConfig, options) => {
};

eleventyConfig is the current eleventyConfig like it's also passed into your .eleventy.js (or similar) file. options is just the second parameter you can add to your eleventyConfig.addPlugin(plugin, someOptions) call. The options just get passed through.

Since 11ty does not yet support async configuration functions, but shiki needs them, we need to do a small trick: 11ty hooks can be async. So let's piggyback off of the eleventy.before event.

js
const shiki = require('shiki'); 

module.exports = (eleventyConfig, options) => {
  eleventyConfig.on('eleventy.before', async () => { 
    const highlighter = await shiki.getHighlighter(options);
  }); 
};

Now we just need to replace the default syntax highlighter of our markdown library with our custom one:

js
const shiki = require('shiki');

module.exports = (eleventyConfig, options) => {
  eleventyConfig.on('eleventy.before', async () => {
    const highlighter = await shiki.getHighlighter(options);
    eleventyConfig.amendLibrary('md', (mdLib) => 
      mdLib.set({
        highlight: (code, lang) => highlighter.codeToHtml(code, { lang }),
      })
    ); 
  });
};

This is basically done, but we need to add one empty eleventyConfig.amendLibrary() call, so eleventy knows that we want to change the library and actually calls our amend function:

js
const shiki = require('shiki');

module.exports = (eleventyConfig, options) => {
  
  // empty call to notify 11ty that we use this feature
  // eslint-disable-next-line no-empty-function
  eleventyConfig.amendLibrary('md', () => {});
  
  eleventyConfig.on('eleventy.before', async () => {
    const highlighter = await shiki.getHighlighter(options);
    eleventyConfig.amendLibrary('md', (mdLib) =>
      mdLib.set({
        highlight: (code, lang) => highlighter.codeToHtml(code, { lang }),
      })
    );
  });
};

If you now want to know where to look next, take a look at the shiki project page.