shiki-code-blocks

Highlight code blocks in Next.js and MDX content using Shiki.

20|3|Updated Nov 30, 2025

Search Tags:#markdown #next.js #mdx #code-blocks #syntax-highlighting #shiki

Ready to run

npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill shiki-code-blocks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shiki-code-blocks
Source: https://github.com/andrelandgraf/fullstackrecipes/tree/main/templates/fullstackrecipe/.agents/skills/shiki-code-blocks
Command: npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill shiki-code-blocks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers want consistent, language-aware code presentation in content across server-side rendering (RSC) and client contexts without manual styling.

Core Features & Use Cases

Automatic syntax highlighting for code blocks using Shiki.
Server-side rendering compatibility and automatic light/dark theme switching.
Works with Markdown and MDX content in Next.js apps and documentation sites.

Quick Start

Install and configure Shiki-based code block highlighting in your project, then wrap code blocks in Markdown with language hints to enable rendering.

Frequently Asked Questions about shiki-code-blocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add syntax highlighting to code blocks in Next.js MDX?▼

You can add syntax highlighting to MDX code blocks in Next.js by using Shiki to parse language hints and apply server-side rendering with automatic light and dark theme switching.

Does Shiki support server-side rendering for syntax highlighting?▼

Yes, Shiki supports server-side rendering (RSC) for syntax highlighting, allowing you to render code blocks consistently across both server and client rendering contexts in Next.js.

How do I switch light and dark themes for code blocks in Markdown?▼

To switch light and dark themes for Markdown code blocks, configure Shiki-based highlighting to automatically apply theme switching across your Next.js pages and MDX content.

What do I need to render Shiki code blocks in a Next.js app?▼

To render Shiki code blocks in a Next.js app, you need Shiki installed and a compatible Markdown renderer to parse and render code blocks with language-specific syntax highlighting.

Why use Shiki for syntax highlighting in MDX instead of other approaches?▼

Use Shiki for MDX syntax highlighting to achieve consistent, language-aware code presentation across server-side rendering and client contexts without requiring manual styling.