Shiki Code Blocks

andrelandgraf/fullstackrecipes

This handles syntax highlighting with Shiki, which means you get the same color themes VS Code uses but in your web app. The big wins here are server-side rendering support for React Server Components and automatic theme switching between light and dark modes without client-side flickering. You'd reach for this when you're building docs, a blog with code samples, or any site where you need beautiful code blocks that don't flash unstyled content on load. Shiki is slower than most highlighters because it uses real TextMate grammars, but doing it server-side solves that problem entirely.

skills.sh installs

241

GitHub stars

23

last updated

Aug 21, 2026

curl https://fullstackrecipes.com/recipes/shiki-code-blocks.md

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Backend & APIs

1administering-linuxancoleman/ai-design-componentsManage Linux systems covering systemd services, process management, filesystems, networking, performance tuning, and troubleshooting. Use when deploying applica240skills.sh installs

2appsec-expertmartinholovsky/claude-skills-generatorElite Application Security engineer specializing in secure SDLC, OWASP Top 10 2025, SAST/DAST/SCA integration, threat modeling (STRIDE), and vulnerability remed240skills.sh installs

3lazycat-advanced-routingwhoamihappyhacking/lazycat-skills处理懒猫微服(Lazycat MicroServer)应用的高级路由、多域名配置、TCP/UDP四层转发(ingress)、跨域处理以及使用 app-proxy 进行复杂代理规则配置的专业指南。240skills.sh installs

4senior-architectborghei/claude-skillsSystem architecture design and review. Use when designing architecture, evaluating microservices vs monolith, writing ADRs, choosing a database, planning for sc239skills.sh installs

5mastrapedronauck/skillsComprehensive Mastra framework guide. Teaches how to find current documentation, verify API signatures, and build agents and workflows. Covers documentation loo239skills.sh installs

6tailwindcss-performancejosiahsiegel/claude-plugin-marketplaceTailwind CSS performance optimization including v4 improvements. PROACTIVELY activate for: (1) Tailwind v4 Oxide engine performance, (2) Lightning CSS minificat237skills.sh installs