shaku-code-annotate-shiki

釈(Shaku)- elucidate, explain

This module enables you to annotate your code snippet with separation from normal comments, makes it easier to explain the code. It uses shiki as backbone and inspired by shiki-twoslash.

Take a look at the live demo from

1. Shaku playground
2. demo with Astro.
3. demo with Next.js.

Usage

import { getShakuHighlighters } from "shaku-code-annotate-shiki";

// 1. get highlighters of one theme or multiple themes
const highlighters = await getShakuHighlighters({
  langs: [lang],
  // theme: 'github-light'
  themes: ["github-light", "github-dark"],
});

// 2. for each theme generate HTML from code
const html = highlighters
  .map(
    (highlighter) =>
      highlighter.codeToShakuHtml({
        code,
        options: {
          // you can disable shaku syntax by following flag
          // isShakuSyntaxEnabled: false,

          // by default, shaku escapes, but you can use following combination
          // to do custom markdown parsing
          useDangerousRawHtml: true,
          markdownToHtmlAndSanitize: (code) => html
          lang,
        },
      }).html
  )
  .join("\n");

Plugins

Generally it is better for you to choose the right plugin for your markdown engine.

1. Remark - remark-shaku-code-annotate
2. Marked - marked-shaku-code-annotate