slidev-code-blocks

Render syntax-highlighted code blocks with line numbers in Slidev presentations.

34|1|Updated Jan 25, 2026

Search Tags:#syntax highlighting #code blocks #slidev #snippets #line numbers #shiki

Ready to run

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-code-blocks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slidev-code-blocks
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/code/slidev-code-blocks
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-code-blocks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps presenters render and style code blocks in Slidev using Shiki, making code segments readable and visually appealing.

Core Features & Use Cases

Syntax Highlighting: Use Shiki to highlight code blocks in Slidev with themes.
Line Numbers & Highlighting: Enable line numbers and highlight specific lines or blocks.
Code Groups & Snippets: Create tabbed variants and import external snippets.
Use Case: In tech talks, display clean, colorized code samples to improve comprehension.

Quick Start

Use the slidev-code-blocks skill to render a TypeScript code block with line numbers on a slide.

Frequently Asked Questions about slidev-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 Slidev?▼

Syntax highlighting in Slidev is applied using Shiki to render code blocks with language-specific themes. This makes code segments readable and visually appealing for presentation slides.

Can I highlight specific lines or show line numbers in Slidev code blocks?▼

Yes, you can enable line numbers and highlight specific lines or blocks within Slidev code blocks. This is configured using a frontmatter-driven approach for your presentation slides.

How do I create tabbed code variants or import external snippets in Slidev?▼

Slidev supports creating tabbed code groups and importing external snippets for your presentations. This allows you to display multiple code variants cleanly within a single slide.

Do I need extra dependencies to use Shiki syntax highlighting in Slidev?▼

No extra runtime dependencies are required to use Shiki syntax highlighting in Slidev. It operates as a self-contained unit relying on standard Markdown rendering and optional references.

What is the best way to display code samples in tech talks using Slidev?▼

The best way to display code samples in tech talks is using Shiki highlighting in Slidev to show clean, colorized code. This improves audience comprehension during tutorials and demonstrations.