Slidev Scholarly Snippets

VS Code extension for quickly inserting Slidev Theme Scholarly layouts and components.

Features

🎯 Secondary Side Bar Panel

The extension adds a dedicated panel in the VS Code Secondary Side Bar with six sections:

• Layouts - Slide layouts organized by category:
  • Structure - cover, default, intro, section, center, auto-center, auto-size, toc, end
  • Content - two-cols, image-left/right, bullets, figure, split-image
  • Emphasis - quote, fact, statement, focus
  • Academic - compare, methodology, results, timeline, agenda, acknowledgments, references
• Components - Vue components and syntax sugar
• Templates - Quick-start presentation templates
• Themes - Apply themeConfig presets and surface modes (colorTheme, fontTheme, contentMode, chromeMode, sectionMode)
• References - Browse BibTeX citations and internal anchors, then insert cite keys or #anchor-id
• CLI - Run Scholarly CLI actions directly from sidebar:
  • Create - init and template list
  • Theme - apply/list themes, apply preset combos, list layouts/components
  • Snippets - append/show/list Scholarly snippets and append workflows
  • Tools - doctor and help
• Preview - Click the 👁️ icon on any layout, component, or theme to see a visual preview

Click any item to insert content at the cursor or update frontmatter.

⌨️ Snippets

Type the prefix and press Tab to expand snippets:

⚡ Smart Completion (New)

In Markdown files, Scholarly-specific suggestions now appear while typing (without memorizing all prefixes):

• layout: -> layout candidates such as cover, default, methodology
• colorTheme: / fontTheme: -> themeConfig value candidates
• contentMode: -> content surface mode candidates (light, dark)
• chromeMode: / sectionMode: -> surface mode candidates (light, dark, match, inverse)
• colorMode: -> legacy alias candidates for compatibility
• < -> component candidates such as Theorem, Block, Steps
• ::: -> syntax sugar directive candidates such as theorem, block, columns
• ](# / href="# / to="# -> internal anchor ids from the current Markdown document
• ss- / scholarly- -> snippet candidates from built-in snippet library

If suggestions do not pop up automatically, press Ctrl+Space (Cmd+Space on macOS if available) to trigger completion.

🔗 Internal Anchors

The Command Palette now includes:

• Insert Internal Anchor to create a new anchor using ::anchor{#id}, {#id}, or id="id"
• Insert Internal Anchor Reference to pick an existing anchor from the current Markdown file and insert #anchor-id

You can also type ss-anchor to insert a standalone anchor snippet.

👁️ Visual Previews (New)

The extension now features a dedicated Preview panel. Simply click the eye icon (👁️) next to any Layout, Component, or Theme in the sidebar to view a high-quality visualization of how it looks in the rendered slides.

🧩 GUI Builder (New)

For users who prefer a low-code workflow, run Open GUI Builder from the Command Palette or from the Templates view title. The builder opens a VS Code webview where you can:

• drag Scholarly layouts into a slide list
• reorder or delete generated slides
• edit common fields such as title, body, bullets, image path, and caption
• choose color and font themes
• generate a new Markdown deck or insert the generated Markdown into the active editor

The builder intentionally outputs regular Slidev Markdown, so advanced users can continue refining the deck in VS Code after the GUI creates the first draft.

🧪 Dev Mode (Performance Testing)

For extension performance diagnostics, enable dev mode:

• Command Palette: Slidev Scholarly: Toggle Dev Mode
• Settings:
  • slidevScholarly.devMode.enabled (boolean)
  • slidevScholarly.devMode.slowThresholdMs (number, default: 25)

When enabled:

• A Scholarly Dev status-bar indicator appears
• The Slidev Scholarly output channel prints timing logs
• Slow operations are marked as SLOW when exceeding your threshold

For local extension-host debugging, use .vscode/launch.json -> Run Extension (Dev Mode).

Layout Snippets

Layouts are organized into four categories. Use category-specific prefixes (ss-structure-*, ss-content-*, ss-emphasis-*, ss-academic-*) or the shorter ss-* prefix.

The ss-* prefixes are the canonical snippet names shown in completion. Legacy scholarly-* aliases are still accepted by the extension's smart completion for compatibility.

Structure Layouts

Content Layouts

Emphasis Layouts

Academic Layouts

Utility

Component Snippets

Installation

From VSIX (Local)

1. Build the extension:

   cd vscode-extension
   npm install
   npm run compile
   npx vsce package
   

2. Install in VS Code:

   • Open VS Code
   • Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
   • Type "Install from VSIX"
   • Select the generated .vsix file

From Marketplace (Coming Soon)

Search for "Slidev Scholarly Snippets" in the VS Code Extensions marketplace.

Usage

1. Open a Markdown file (.md)
2. Use one of these methods:

• Secondary Side Bar: Click the Slidev Scholarly view in the right sidebar
• Snippets: Type ss- and select from autocomplete
• Command Palette: Cmd+Shift+P → "Slidev Scholarly"

Example

Start a new presentation by typing ss-frontmatter:

---
theme: scholarly
footerMiddle: Conference Name
lang: en
themeConfig:
  colorTheme: classic-blue
  fontTheme: classic
  outlineToc: true
  outlineTocOpen: false
bibFile: ./references.bib
bibStyle: apa
authors:
  - name: Author Name
    institution: Institution
    email: email@example.com
---

# Presentation Title

Subtitle

Then add slides with ss-section, ss-default, etc.

If outlineToc is enabled, the footer TOC in live play mode uses the same section grouping as the toc layout. On desktop play mode, hovering or focusing a TOC item also shows a slide preview.

Requirements

• VS Code 1.106.0 or higher
• Slidev Theme Scholarly installed in your project

License

MIT