update

README.md

@@ -5,15 +5,34 @@
 Shaku is a family of tools to help write technical blogs,
 out of my frustration while writing articles for my personal blog - [jser.dev](https://jser.dev).
 
-## Tools
+## Packages
+
+### Core
 
 1. [shaku-code-annotate-core](./packages/shaku-code-annotate-core/) - core parser of Shaku. Tokenizer not included.
-2. [shaku-code-annotate-shiki](./packages/shaku-code-annotate-shiki/) - Shaku syntax highlighter based on Shiki.
-3. [shaku-code-annotate-sugar-high](./packages/shaku-code-annotate-sugar-high/) - Shaku syntax highlighter based on Sugar High.
-4. [remark-shaku-code-annotate](./packages/remark-shaku-code-annotate/) - plugin for remark.
-5. [marked-shaku-code-annotate](./packages/marked-shaku-code-annotate/) - plugin for marked.
-6. [Shaku Playground](https://shaku-web.vercel.app/playground) - a playground to try out shaku-code-annotate.
-7. [Shaku Snippet](https://shaku-web.vercel.app/snippet) - generate beautiful code snippet screenshots with annotation.
+
+### [email protected]
+
+Recommended implementation based on [Shiki Transformer](https://shiki.matsu.io/guide/transformers)
+
+1. [shaku-code-annotate-shiki-transformer](./packages/shaku-code-annotate-shiki-transformer/) - Shaku syntax transformer for [email protected]
+
+### [email protected]
+
+Legacy implementation by wrapping shiki.
+
+1. [shaku-code-annotate-shiki](./packages/shaku-code-annotate-shiki/) - Shaku syntax highlighter based on Shiki.
+2. [remark-shaku-code-annotate](./packages/remark-shaku-code-annotate/) - plugin for remark.
+3. [marked-shaku-code-annotate](./packages/marked-shaku-code-annotate/) - plugin for marked.
+
+### Sugar High
+
+1. [shaku-code-annotate-sugar-high](./packages/shaku-code-annotate-sugar-high/) - Shaku syntax highlighter based on Sugar High.
+
+## Tools
+
+1. [Shaku Playground](https://shaku-web.vercel.app/playground) - a playground to try out shaku-code-annotate.
+2. [Shaku Snippet](https://shaku-web.vercel.app/snippet) - generate beautiful code snippet screenshots with annotation.
 
 ## Dev tools
 

packages/shaku-code-annotate-shiki-transformer/README.md

@@ -4,6 +4,10 @@ This is a [Shiki Transformer](https://shiki.matsu.io/guide/transformers) to supp
 
 You can use this transformer anywhere shiki is supported with simple integration.
 
+## Live demos
+
+1. Astro + Shaku demo : [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-yunziv-kcb1ow?file=astro.config.mjs)
+
 ## Usage
 
 ```ts
@@ -18,18 +22,19 @@ const unifiedProcessor = unified()
 const code = await codeToHtml("foo\bar", {
   lang: "js",
   theme: "vitesse-light",
-  includeExplanation: true,
   transformers: [
-    shakuCodeAnnotateShikiTransformer({
-      useDangerousRawHtml: true,
-      markdownToHtmlAndSanitize: (code) =>
-        unifiedProcessor.processSync(code).toString(),
-    }),
+    shakuCodeAnnotateShikiTransformer(),
+    // if you want markdown support in the annotation
+    // shakuCodeAnnotateShikiTransformer({
+    //   useDangerousRawHtml: true,
+    //   markdownToHtmlAndSanitize: (code) =>
+    //     unifiedProcessor.processSync(code).toString(),
+    // }),
   ],
 });
 ```
 
-Or in a rehype plugin
+Or in a rehype plugin.
 
 ```ts
 import { unified } from "unified";
@@ -42,23 +47,17 @@ const file = await unified()
   .use(remarkParse)
   .use(remarkRehype)
   .use(rehypeShiki, {
-    includeExplanation: true,
     transformers: [
-      shakuCodeAnnotateShikiTransformer({
-        useDangerousRawHtml: true,
-        markdownToHtmlAndSanitize: (code) =>
-          unifiedProcessor.processSync(code).toString(),
-      }),
+      shakuCodeAnnotateShikiTransformer(),
+      // if you want markdown support in the annotation
+      // shakuCodeAnnotateShikiTransformer({
+      //   useDangerousRawHtml: true,
+      //   markdownToHtmlAndSanitize: (code) =>
+      //     unifiedProcessor.processSync(code).toString(),
+      // }),
     ],
     theme: "vitesse-light",
   })
   .use(rehypeStringify)
   .process(await fs.readFile("./input.md"));
 ```
-
-## Demos
-
-## Caveat
-
-1. `includeExplanation` is required in transformer setup.
-2. `includeExplanation` doesn't work well if `themes` is set, I'm looking to patch Shiki for this.