home / skills / andrelandgraf / fullstackrecipes / shiki-code-blocks

shiki-code-blocks skill

safe

This skill highlights code blocks using Shiki with SSR support and automatic theme switching for seamless developer experience.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill shiki-code-blocks

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

413 B

---
name: shiki-code-blocks
description: Syntax highlight code blocks with Shiki. Supports server-side rendering in RSC and automatic light/dark theme switching.
---

# Shiki Code Blocks

Syntax highlight code blocks with Shiki. Supports server-side rendering in RSC and automatic light/dark theme switching.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shiki-code-blocks
```

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.

FAQ

Does this work with server components (RSC)?

Yes. The skill supports server-side rendering so highlighted output can be generated in RSC and sent as ready HTML.

How does theme switching work?

It detects the user's preferred color scheme and switches themes automatically; you can also supply an explicit light/dark theme override.