slicode

Turn simple Markdown into beautiful Slidev presentations with animated code transitions.

screen.webm

Why not just Slidev?

Slidev is awesome — but you have to learn its syntax, layouts, Vue components, and config. slicode lets you skip all that. Write a plain Markdown file that reads well on its own, run one command, and get a polished presentation with animated code transitions, smooth morphing, and a sliding code panel — all out of the box.

Use slicode when you want to:

• Present your code without fighting with slide layout
• Go from README to talk in 30 seconds
• Keep your slides readable as a plain .md file

Quick Start

npx slicode example.md --open

Or install globally:

npm install -g slicode

Usage

slicode <input> [output-dir] [slidev-args...]

• input — local .md file or URL (direct link, GitHub file, or gist)
• output-dir — where to generate the Slidev project (default: output)
• Any extra arguments are passed directly to the Slidev CLI — all Slidev flags and subcommands work

# Local file
slicode example.md --open

# Direct URL
slicode https://example.com/talk.md --open

# GitHub file (auto-resolves to raw)
slicode https://github.com/just-ai/slicode/blob/main/example.md

# GitHub gist
slicode https://gist.github.com/user/abc123 --open

# Build static SPA
slicode example.md build

Markdown Format

Centered slides — heading without code/image

# Welcome

This text is centered on the slide.

Two-column slides — any heading + code or image

Heading and text on the left, code or image on the right:

## Getting Started

Here's a simple example.

​```python
print("hello")
​```

## Architecture

![diagram](https://example.com/diagram.png)

Consecutive sections with code merge into one slide with animated click-through states using Magic Move.

Themes

Set the theme in frontmatter:

---
theme: github-dark
---

Built-in themes

| Theme | Style | |-------|-------| | claude | Warm beige, serif headings (default) | | dark | Deep navy, Space Grotesk | | nord | Arctic light, IBM Plex | | ocean | Steel blue, Source Sans | | rose | Soft pink, DM Sans | | github | GitHub Light | | github-dark | GitHub Dark | | gemini | Google Gemini style | | jetbrains | JetBrains Light | | jetbrains-dark | JetBrains Darcula | | vscode | VS Code Dark Modern | | vscode-light | VS Code Light |

Custom overrides

Override any theme variable in frontmatter:

---
theme: claude
accent: #FF6600
bg: #FFFFF0
font-heading: Playfair Display, serif
font-code: Fira Code, monospace
google-fonts: Playfair+Display:wght@700&family=Fira+Code:wght@400
---

All available properties:

| Property | Description | |----------|-------------| | bg | Slide background color | | text | Primary text color | | text-secondary | Secondary text color | | accent | Accent color (headings, highlights) | | code-bg | Code panel background | | code-bg-light | Code panel lighter shade | | right-bg-from | Right column gradient start | | right-bg-to | Right column gradient end | | font-heading | Font for headings | | font-body | Font for body text | | font-code | Font for code blocks | | google-fonts | Google Fonts families to load |

Full Example

See example.md for a complete working presentation.

How It Works

slicode parses your Markdown and generates a standalone Slidev project:

• slides.md — presentation content with Vue transitions and Magic Move
• style.css — themed styles via CSS custom properties
• layouts/ — custom Vue layout components
• package.json — Slidev dependencies

The generated project is self-contained and can be deployed, exported to PDF, or shared independently.