https://github.com/JSerZANP/shaku
Shaku helps you write better technical articles with code annotation .etc
https://github.com/JSerZANP/shaku
annotation-tool code-annotation code-blocks documentation-tool remark-plugin syntax-highlighting
Last synced: 2 months ago
JSON representation
Shaku helps you write better technical articles with code annotation .etc
- Host: GitHub
- URL: https://github.com/JSerZANP/shaku
- Owner: JSerZANP
- License: mit
- Created: 2023-05-02T14:38:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T14:20:58.000Z (9 months ago)
- Last Synced: 2024-10-13T01:03:03.766Z (7 months ago)
- Topics: annotation-tool, code-annotation, code-blocks, documentation-tool, remark-plugin, syntax-highlighting
- Language: TypeScript
- Homepage: https://shaku-web.vercel.app
- Size: 1.1 MB
- Stars: 219
- Watchers: 1
- Forks: 5
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shaku
> 釈(Shaku)- _elucidate, explain_
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).
## Packages
### Core
1. [shaku-code-annotate-core](./packages/shaku-code-annotate-core/) - core parser of Shaku. Tokenizer not included.
### for Latest Shiki(1.x.x)
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]
### for Legacy Shiki(0.x.x)
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.
### for 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
Also with some dev tools if you are interested
1. [Shiki Token Inspector](https://shaku-web.vercel.app/shiki-token-inspector) - easily inspect the tokens generated by [shiki](https://github.com/shikijs/shiki).
2. [Sugar High Token Inspector](https://shaku-web.vercel.app/sugar-high-token-inspector) - easily inspect the tokens generated by [Sugar High](https://github.com/huozhi/sugar-high).
## Built with Shaku
Check out some cool stuff built with Shaku.
- [jser.dev blog](https://jser.dev/2024-03-20-how-does-useoptimisticwork-internally-in-react/) is using Shaku heavily to annotate code snippets.
- [jser.pro](https://jser.pro/ddir/quiz) has interactive React quizzes on top of Shaku.
- [bfe.dev](https://bigfrontend.dev/problem/39/discuss/2363?focus=26638) supports Shaku in its posts.
## Community
1. [Shaku Discord](https://discord.gg/bFh8EzW7kv)