shiki-code-blocks_skill

Overview

This skill provides server-ready syntax highlighting for code blocks using Shiki. It renders highlighted code both server-side (RSC) and client-side with automatic light/dark theme switching. The implementation is TypeScript-friendly and optimized for production use in full-stack web AI apps.

How this skill works

The skill uses Shiki to tokenize and style source code, producing HTML or pre-rendered nodes on the server (RSC) so pages are delivered with highlighted code already applied. It detects the user's color scheme and switches themes automatically, while offering a fallback for client-side hydration. Integrations include easy insertion into component libraries and markdown renderers.

When to use it

• You need consistent, high-quality code highlighting across server and client.
• You want server-side rendering (RSC) for SEO and performance benefits.
• You need automatic light/dark theme support matching user preferences.
• You are building documentation, blogs, or developer-facing UI with TypeScript components.
• You require production-ready patterns and step-by-step recipes for full-stack apps.

Best practices

• Pre-render highlighted code on the server to minimize client work and improve load times.
• Bundle only required Shiki themes and languages to reduce asset size.
• Expose a simple component or helper that accepts language, code, and theme override props.
• Provide a safe HTML output and sanitize any user-provided code before rendering.
• Test theme switching and hydration behavior across browsers and devices.

Example use cases

• Rendering markdown blog posts with server-side highlighted code blocks.
• Embedding code samples within documentation sites that respect system dark/light mode.
• Integrating with a component library to display interactive code sandboxes.
• Generating static site pages with pre-highlighted code during build time.
• Providing highlighted snippets in tutorial steps and AI-driven examples.