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

slidev-monaco-editor

Integrates Monaco Editor into Slidev for interactive live coding blocks with TypeScript or JavaScript.

34|1|Updated Jan 25, 2026
Search Tags:#typescript#javascript#interactive#slidev#code-blocks#monaco-editor#live-coding
One-click install
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-monaco-editor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slidev-monaco-editor
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/code/slidev-monaco-editor
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-monaco-editor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables integrating Monaco Editor into Slidev presentations, turning static slides into interactive code demos with live editing and execution capabilities.

Core Features & Use Cases

  • Live coding blocks: Editable, syntax-highlighted code blocks within Slidev.
  • Monaco Runner & Autorun: Run code directly in the presentation and optionally auto-run on load.
  • Custom setup: Configure editor height, themes, and run behavior via setup/monaco.ts.

Quick Start

Use the Monaco Editor skill to convert your code blocks into live, editable slides in Slidev.

Frequently Asked Questions about slidev-monaco-editor

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

FAQPage Schema
How do I add live code editing to a Slidev presentation?▼

To add live code editing to a Slidev presentation, you integrate Monaco Editor using setup/monaco.ts, enabling editable, syntax-highlighted code blocks with execution capabilities directly within your slides.

Can I run TypeScript and JavaScript code directly in Slidev slides?▼

Yes, you can run TypeScript and JavaScript code directly in Slidev slides by configuring code blocks with monaco-run options, which allows real-time execution and auto-running on load during presentations.

How do I configure Monaco Editor height and themes in Slidev?▼

You configure Monaco Editor height and themes in Slidev by specifying options in a custom setup/monaco.ts file, applying settings to monaco, monaco-run, and monaco-diff code blocks to control run behavior and display.

Does Slidev support interactive code demonstrations for live coding?▼

Slidev supports interactive code demonstrations for live coding by embedding Monaco Editor, which transforms static slides into executable code demos with real-time editing and syntax highlighting.

What is the difference between monaco-run and monaco-diff code blocks in Slidev?▼

Monaco-run code blocks execute live TypeScript or JavaScript code with autorun capabilities, while monaco-diff code blocks display code differences, both configured via setup/monaco.ts to control presentation behavior.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
lanejlanej
40

presenterm

Convert Markdown files into interactive terminal presentations with themes, diagrams, and exports.

Community
Intermediate
yoanbernabeuyoanbernabeu
34

slidev-code-blocks

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

Community
Basic
DanSnowDanSnow
2

md-to-runbook

Convert Markdown documentation into Atuin Runbook (.atrb) YAML format.

Community
Intermediate