shaku-code-annotate

釈(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";

// 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,
        meta: "annotate",
        // by default Shaku falls back to shiki if meta doesn't contain "annotate"
        // you can turn this off by following option
        // fallbackToShiki: false
        parseBasicMarkdown: (code) => code,
        options: {
          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