# shaku-code-annotate

> 釈(Shaku)- _elucidate, explain_

Latest version **0.1.4** (published 2023-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install shaku-code-annotate
pnpm add shaku-code-annotate
yarn add shaku-code-annotate
bun add shaku-code-annotate
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2023-12-02 |
| First published | 2023-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 455.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 249 |
| Maintainers | jserzanp |

## Links

- npm: https://www.npmjs.com/package/shaku-code-annotate
- Repository: https://github.com/JSerZANP/shaku
- Homepage: https://github.com/JSerZANP/shaku#readme
- Issues: https://github.com/JSerZANP/shaku/issues
- npm.io page: https://npm.io/package/shaku-code-annotate

## Dependencies (7)

- [mdast](https://npm.io/package/mdast.md) ^3.0.0
- [shiki](https://npm.io/package/shiki.md) ^0.14.2
- [remark](https://npm.io/package/remark.md) ^14.0.2
- [unified](https://npm.io/package/unified.md) ^10.1.2
- [remark-html](https://npm.io/package/remark-html.md) ^15.0.2
- [sanitize-html](https://npm.io/package/sanitize-html.md) ^2.10.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^4.1.2

## Recent versions

- 0.1.4 (latest) — 2023-12-02
- 0.1.3 — 2023-11-29
- 0.1.2 — 2023-11-26
- 0.1.1 — 2023-11-22
- 0.1.0 — 2023-11-17
- 0.0.9 — 2023-11-17
- 0.0.8 — 2023-06-19
- 0.0.7 — 2023-05-28
- 0.0.6 — 2023-05-24
- 0.0.5 — 2023-05-13
- 0.0.4 — 2023-05-13
- 0.0.3 — 2023-05-13
- 0.0.2 — 2023-05-13
- 0.0.1 — 2023-05-13

## README

# shaku-code-annotate

<ruby>釈<rp>(<rp><rt>Shaku</rt><rp>)<rp></ruby>- _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](https://github.com/shikijs/shiki) as backbone and inspired by [shiki-twoslash](https://shikijs.github.io/twoslash/).

![](./docs/static/shaku-code-annotate-screenshot.png)

Take a look at the live demo from

1. [Shaku playground](https://shaku-web.vercel.app)
2. [demo with Astro](https://stackblitz.com/edit/github-yunziv?file=src%2Fcontent%2Fblog%2Fshaku.mdx).
3. [demo with Next.js](https://stackblitz.com/edit/github-hrpoqm-zfq1kt?file=pages%2Findex.mdx).

## Usage

```ts
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](../remark-shaku-code-annotate/)
2. Marked - [marked-shaku-code-annotate](../marked-shaku-code-annotate/)

---
_Source: https://npm.io/package/shaku-code-annotate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._