skills.rest
yoanbernabeu
yoanbernabeuCOMMUNITY
Explore all skills by this author →
Website𝕏@yOyO38GitHub

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
One-click install
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-code-blocks
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ChrisTowlesChrisTowles
4

slidev

Create and edit Slidev presentation slides with Markdown and YAML frontmatter.

Community
Intermediate
hiyeshuhiyeshu
205

codeck-export

Export HTML presentation decks to PDF and PPTX with automated quality checks.

Community
Advanced
hsiangjenlihsiangjenli

slidev-theme-neversink

Create Slidev presentations with the Neversink theme using Markdown and Vue components.

Community
Intermediate
shanraisshanshanraisshan
64.2k

presentation-styling

Provide CSS classes and HTML patterns for styling presentation slides.

Community
Basic