Shiki Code Blocks
- 192 installs
- 18 repo stars
- Updated June 8, 2026
- andrelandgraf/fullstackrecipes
Add Shiki syntax-highlighted code blocks to docs sites, blogs, or in-app examples with accurate themes and language support.
About
Guides agents to integrate Shiki code blocks in full-stack apps and docs: pick themes, register grammars, render highlighted HTML in Next or Vite, avoid hydration mismatches, and deliver readable, accessible snippets for tutorials, API references, and marketing pages.
- Shiki installation and bundling
- Theme and language registration
- MDX or React code block components
- SSR and client hydration patterns
- Accessible, copy-friendly markup
Shiki Code Blocks by the numbers
- 192 all-time installs (skills.sh)
- Ranked #867 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill shiki-code-blocksAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 192 |
|---|---|
| repo stars | ★ 18 |
| Last updated | June 8, 2026 |
| Repository | andrelandgraf/fullstackrecipes ↗ |
What it does
Add Shiki syntax-highlighted code blocks to docs sites, blogs, or in-app examples with accurate themes and language support.
Files
Shiki Code Blocks
Syntax highlight code blocks with Shiki. Supports server-side rendering in RSC and automatic light/dark theme switching.
curl https://fullstackrecipes.com/recipes/shiki-code-blocks.mdRelated skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k