https://github.com/hddevteam/cuemode

🎯 Professional teleprompter with Line Height Adjustment, Markdown Toggle, Mirror Flip, Focus Mode, 7 themes & 6-language support. L-key line spacing, D-key markdown toggle, M-key mirror flip, F-key focus mode, T-key theme cycling. Perfect for livestreams, tutorials & presentations.
https://github.com/hddevteam/cuemode

accessibility auto-scroll content-creation developer-tools education focus-mode fullscreen i18n line-height live-coding mirror-flip presentation productivity professional-teleprompter streaming teaching teleprompter themes typescript vscode-extension

Last synced: about 2 months ago
JSON representation

🎯 Professional teleprompter with Line Height Adjustment, Markdown Toggle, Mirror Flip, Focus Mode, 7 themes & 6-language support. L-key line spacing, D-key markdown toggle, M-key mirror flip, F-key focus mode, T-key theme cycling. Perfect for livestreams, tutorials & presentations.

• Host: GitHub
• URL: https://github.com/hddevteam/cuemode
• Owner: hddevteam
• License: mit
• Created: 2023-10-03T04:49:53.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2026-03-01T15:06:52.000Z (3 months ago)
• Last Synced: 2026-03-01T18:42:02.306Z (3 months ago)
• Topics: accessibility, auto-scroll, content-creation, developer-tools, education, focus-mode, fullscreen, i18n, line-height, live-coding, mirror-flip, presentation, productivity, professional-teleprompter, streaming, teaching, teleprompter, themes, typescript, vscode-extension
• Language: TypeScript
• Homepage: https://hddevteam.github.io/cuemode/
• Size: 12.7 MB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Roadmap: ROADMAP.md

Awesome Lists containing this project

README

          
# CueMode - Professional Developer Teleprompter

[![VS Code Marketplace](https://img.shields.io/visual-studio-marketplace/v/luckyXmobile.cuemode?style=flat-square&color=blue)](https://marketplace.visualstudio.com/items?itemName=luckyXmobile.cuemode)

[![Downloads](https://img.shields.io/visual-studio-marketplace/d/luckyXmobile.cuemode?style=flat-square&color=green)](https://marketplace.visualstudio.com/items?itemName=luckyXmobile.cuemode)

[![Rating](https://img.shields.io/visual-studio-marketplace/r/luckyXmobile.cuemode?style=flat-square&color=orange)](https://marketplace.visualstudio.com/items?itemName=luckyXmobile.cuemode)

[![GitHub](https://img.shields.io/github/license/hddevteam/cuemode?style=flat-square)](https://github.com/hddevteam/cuemode/blob/main/LICENSE)

[![GitHub Pages](https://img.shields.io/badge/docs-GitHub%20Pages-blue?style=flat-square)](https://hddevteam.github.io/cuemode/)

> **[中文文档](./README.zh-CN.md) | [GitHub Pages](https://hddevteam.github.io/cuemode/)**

**Transform VS Code into a professional teleprompter.** Perfect for coding livestreams, technical presentations, educational videos, and professional content creation. Features instant theme switching, enhanced focus mode, auto-scroll control, and distraction-free reading experience.

![Teleprompter Demo](./images/demo.gif)

### What's new in 3.0.3

- **Safer underscore parsing**: snake_case identifiers such as `light_is_on` now stay intact in markdown mode instead of being misread as italic emphasis.

- **Regression-tested fix**: parser-level and rendered-content tests now guard this markdown edge case against future regressions.

### What's new in 3.0.2

- **Cursor-aware editing return**: double-clicking text in CueMode now lands much closer to the real source line and character, including markdown-heavy content and Chinese text.

- **Teleprompter Mode (Cursor Position)**: reopen CueMode around the current editor cursor so you can continue reviewing from exactly where you are editing.

- **Smoother live sync**: source edits now use lightweight incremental webview updates, and hidden CueMode tabs refresh only when you return to them.

## 🎯 What is CueMode?

CueMode is a next-generation teleprompter extension that transforms your VS Code editor into a professional teleprompter solution. Now featuring **automatic UI management**, **instant theme cycling**, **enhanced focus mode**, **expanded internationalization**, and **professional-grade functionality** designed for developers, educators, and content creators.

**✨ Feature Highlights:**

- **🎯 Double-Click to Edit** - **NEW!** Click any text to jump to exact position in source for editing, with auto-selection and position memory

- **🎯 Automatic UI Management** - Distraction-free presentations with auto-hide sidebar/panel and smart restoration

- **🔤 Font Size Control** - Dynamic font adjustment with keyboard shortcuts (Ctrl+Shift+=/−, [ / ] keys)

- **📐 Differentiated Header Sizes** - Professional visual hierarchy for H1-H6 headers with responsive design

- **💬 HTML Comment Visibility** - Display markdown comments for speaker notes and presentation cues

- **📝 Selective Markdown Parsing** - Intelligent markdown formatting for presentations with D-key toggle

- **📏 Line Height Adjustment** - Professional line spacing control with L-key cycling (1.0, 1.2, 1.5, 1.8, 2.0)

- **🪞 M-Key Mirror Flip** - Professional horizontal text mirroring for teleprompter hardware setups

- **📍 Smart Status Indicators** - Visual feedback system with intelligent positioning to avoid UI conflicts

- **🎨 T-Key Theme Cycling** - Instant theme switching across all 7 professional themes during presentations

- **🔍 Enhanced F-Key Focus Mode** - Smart gradient blur algorithm with configurable focus lines (1-10) and opacity (0.1-0.8) for superior concentration

- **⚡ Enhanced Commands** - Quick theme changes and text preprocessing

- **📱 Smart Notifications** - Non-intrusive status bar feedback

- **🌐 Expanded Internationalization** - Support for 6 languages: English, Chinese, German, French, Japanese, Korean

- **🛠️ TypeScript Architecture** - Robust, maintainable codebase

- **🧪 Comprehensive Testing** - 190 passing test cases ensuring reliability

**Core Teleprompter Features:**

- **Auto-scrolling text** - Smooth, controllable scroll speed for natural reading

- **Large font display** - Optimized for distance reading and camera work

- **High contrast display** - Clear visibility in any lighting condition

- **Invisible controls** - Minimal UI interference during recording/presentation

- **Keyboard shortcuts** - Professional teleprompter controls (start/stop, speed adjustment)

Simply select your script text or open your presentation notes, activate "Teleprompter Mode" from the command palette, and start presenting with confidence.

## ✨ Professional Teleprompter Features

CueMode provides professional teleprompter functionality for modern content creators:

### 📺 **Professional Teleprompter Controls**

- **Auto-scroll functionality** - Smooth, customizable scrolling speed

- **Spacebar control** - One-key start/stop scrolling

- **Speed adjustment** - Real-time speed control with +/- keys

- **Direction switching** - Reverse scrolling with R key

- **Manual navigation** - Precise positioning with arrow keys

- **🆕 T-Key theme cycling** - Instant theme changes during presentations

- **🪞 Mirror flip mode** - Horizontal text mirroring for professional teleprompter setups

### 🎨 **Optimized Display**

- **Large fonts** - Perfect for distance reading

- **Centered layout** - Natural eye movement for camera work

- **High contrast themes** - Clear visibility in any lighting condition

- **Minimal interface** - Hidden controls that don't interfere with recording

### 🎭 **Professional Themes**

- **Classic** - Traditional teleprompter black background with white text

- **Inverted** - White background with black text for bright environments

- **Midnight Blue** - Professional studio appearance

- **Sunset** - Warm, comfortable reading experience

- **Forest** - Eye-friendly for extended use

- **Ocean** - Calming blue for relaxed presentations

- **Rose** - Elegant theme for sophisticated content

### ⚙️ **Teleprompter Settings**

- **Scroll speed** - Fine-tune reading pace (0.1-5.0 range)

- **Font size** - Optimize for reading distance (12-72pt)

- **Line height** - Control text spacing comfort (1.0-3.0em)

- **Content width** - Set optimal reading width (400-1200px)

- **Starting position** - Position text for comfortable reading

- **Padding** - Adjust margins according to setup

- **Focus mode** - Enhanced concentration with gradient blur (NEW!)

- **🪞 Mirror flip** - Horizontal text mirroring for professional teleprompter hardware setups

### 🚀 **Perfect Teleprompter Use Cases**

- **YouTube Videos** - Natural script reading while maintaining eye contact

- **Live Streaming** - Smooth delivery for coding tutorials and tech talks

- **Video Tutorials** - Professional presentation of prepared content

- **Online Courses** - Confident delivery of educational content

- **Webinars** - Professional speaking with script support

- **Product Demos** - Consistent messaging with teleprompter assistance

- **Screen Recording** - Professional video content

- **Code Reviews** - Focus on important details

- **Presentations** - Showcase your work

- **Focused Development** - Reduce distractions

## 🚀 Quick Start - Teleprompter Setup

### Installation

1. Open VS Code

2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)

3. Search for "CueMode" or "teleprompter"

4. Click Install

**Or install directly from VS Code Marketplace:**

[CueMode - Professional Teleprompter](https://marketplace.visualstudio.com/items?itemName=luckyXmobile.cuemode)

### Basic Teleprompter Usage

1. **Prepare script** - Create or open a text file with your presentation content

2. **Select script text** (optional - if none selected, entire file will be used)

3. **Activate teleprompter** - Press `Ctrl+Alt+C` (`Ctrl+Cmd+C` on Mac), or use the Command Palette and search for "Teleprompter Mode"

4. **Jump in from your current cursor** - Use **Teleprompter Mode (Cursor Position)** with `Ctrl+Alt+G` (`Ctrl+Cmd+G` on Mac) when you want the teleprompter to reopen around the active editing location

5. **Start reading** - Press spacebar to begin auto-scrolling

6. **Control during presentation**:

   - **Double-Click**: **NEW!** Click any text to jump to that exact position in source for editing

   - **Spacebar**: Start/pause auto-scrolling

   - **T Key**: **Enhanced!** Instant theme switching across all 7 themes

   - **F Key**: **New!** Toggle enhanced focus mode with gradient blur

   - **D Key**: Toggle selective markdown parsing for formatted content

   - **M Key**: Toggle mirror flip mode

   - **[ / ]**: **NEW!** Decrease/Increase font size dynamically

   - **+/-**: Real-time reading speed adjustment

   - **R Key**: Reverse scrolling direction

   - **Arrow keys**: Manual navigation

### Professional Teleprompter Shortcuts

**🎯 Main Controls:**

- **Spacebar** - Start/pause auto-scrolling (primary control)

- **T Key** - Instant theme cycling through all 7 professional themes

- **F Key** - Toggle enhanced focus mode with smart gradient blur

- **D Key** - Toggle selective markdown parsing for formatted presentations

- **M Key** - Toggle mirror flip mode for teleprompter hardware

- **[ / ]** - **NEW!** Decrease/Increase font size (8-100pt range)

- **+/-** - Increase/decrease scrolling speed in real-time

- **R Key** - Toggle scrolling direction (up/down)

**📱 Navigation:**

- **Arrow keys** - Manual navigation

- **Page Up/Down** - Quick manual scrolling

- **Home/End** - Jump to start/end

**⚙️ Advanced Controls:**

- **Ctrl+Shift+T** (Cmd+Shift+T on Mac) - Open theme selection menu

- **Ctrl+Alt+G** (Ctrl+Cmd+G on Mac) - Open **Teleprompter Mode (Cursor Position)**

- **Ctrl+Shift+R** (Cmd+Shift+R on Mac) - Remove leading spaces from text

- **Ctrl+Shift+M** (Cmd+Shift+M on Mac) - Toggle mirror flip mode

- **Ctrl+Shift+D** (Cmd+Shift+D on Mac) - Toggle selective markdown parsing mode

- **Ctrl+Shift+=** (Cmd+Shift+= on Mac) - **NEW!** Increase font size

- **Ctrl+Shift+−** (Cmd+Shift+− on Mac) - **NEW!** Decrease font size

- **H Key** - Show/hide help panel

- **Esc Key** - Exit teleprompter mode

## 📝 Selective Markdown Parsing **NEW!**

CueMode now features intelligent markdown parsing that enhances your presentation content while maintaining optimal teleprompter readability.

### 🎯 **What is Selective Markdown Parsing?**

Selective markdown parsing transforms your markdown content into beautifully formatted, teleprompter-optimized text while preserving the natural flow needed for smooth reading during presentations.

**Key Benefits:**

- **Enhanced readability** - Clean, formatted content without distracting syntax

- **Professional appearance** - Tables, lists, and headers properly styled

- **Maintained flow** - Optimized for natural reading rhythm

- **Instant toggling** - Switch between raw and parsed modes seamlessly

### 🚀 **How to Use Markdown Mode**

1. **Prepare markdown content** - Create or open a `.md` file with your presentation content

2. **Activate teleprompter** - Press `Ctrl+Alt+C` (`Ctrl+Cmd+C` on Mac)

3. **Toggle markdown parsing** - Press **D key** in webview OR use **Ctrl+Shift+D** command

4. **Present with confidence** - Enjoy clean, formatted content optimized for reading

### ⌨️ **Markdown Mode Controls**

**🎯 Toggle Markdown Parsing:**

- **D Key** (in webview) - Instant toggle between raw and parsed markdown

- **Ctrl+Shift+D** (Cmd+Shift+D on Mac) - Toggle from VS Code or webview

**📱 Visual Feedback:**

- **Status indicator** - Shows current parsing mode (Raw/Parsed)

- **Smart positioning** - Status avoids conflicts with other UI elements

- **Theme integration** - Status styling matches your selected theme

### 🎨 **Supported Markdown Elements**

**📝 Text Formatting:**

- **Headers** (H1-H6) - Properly sized and styled for hierarchy

- **Bold/Italic** - Emphasized text maintains readability

- **Code spans** - Inline code with syntax highlighting

- **Links** - Clean link presentation for references

**📋 Structured Content:**

- **Tables** - Professional table layouts with proper spacing

- **Lists** - Bulleted and numbered lists with clean formatting

- **Task lists** - Interactive checkboxes for presentation checklists

- **Blockquotes** - Styled quotes for emphasis

**💻 Code Content:**

- **Code blocks** - Syntax-highlighted code with proper spacing

- **Language support** - Automatic detection and highlighting

- **Preserved formatting** - Maintains indentation and structure

**🎯 Teleprompter-Optimized:**

- **Smart spacing** - Optimal line heights for comfortable reading

- **Theme integration** - All 7 themes support markdown styling

- **Performance optimized** - < 50ms parsing for smooth experience

- **Focus mode compatible** - Works seamlessly with enhanced focus mode

### 📊 **Markdown Configuration**

**Default Settings:**

- **Markdown parsing**: Disabled by default (preserves existing workflow)

- **Easy activation**: Toggle with D key or Ctrl+Shift+D

- **Persistent mode**: Setting saved across sessions

- **Performance**: Optimized parsing with < 50ms processing time

**Customization:**

- **Theme integration** - Markdown styles adapt to your selected theme

- **Font scaling** - Markdown elements scale with your teleprompter font size

- **Focus compatibility** - Works with all focus mode settings

### 🎬 **Perfect for Presentations**

**📺 Content Types:**

- **Technical presentations** - Code examples with syntax highlighting

- **Documentation reviews** - Formatted docs for clear presentation

- **Tutorial scripts** - Step-by-step guides with proper formatting

- **Meeting notes** - Structured content for professional meetings

- **Educational content** - Well-formatted educational materials

**🚀 Professional Benefits:**

- **Consistent formatting** - Professional appearance across all content

- **Reduced preparation time** - Use existing markdown files directly

- **Enhanced credibility** - Clean, well-formatted content for better delivery

- **Flexible workflow** - Toggle between raw and formatted views instantly

## ⚙️ Teleprompter Configuration

### Accessing Settings

1. Open VS Code settings (Ctrl+, / Cmd+,)

2. Search for "cuemode"

3. Adjust teleprompter settings as needed

### Key Settings

- **Color Theme** - Choose from 7 professional themes

- **Font Size** - Adjust for reading distance (recommended 24-48pt)

- **Scroll Speed** - Set comfortable reading pace (recommended 0.1-0.3)

- **Max Width** - Control text line length (recommended 800-1200px)

- **Starting Position** - Position content on screen (recommended 30-50%)

- **Focus Mode** - Enable enhanced concentration mode (NEW!)

- **Focus Opacity** - Adjust blur intensity (0.1-0.8, default 0.3)

- **Focus Line Count** - Set focus area size (1-10 lines, default 3)

- **Markdown Parsing** - **NEW!** Enable selective markdown formatting (default: disabled)

## 🎯 Professional Usage Tips

### 📺 **Video Recording Setup**

1. **Choose high-contrast themes** (Classic or Inverted) for best readability

2. **Increase font size** (32-48pt) for distance reading

3. **Adjust scroll speed** to match your natural speaking pace

4. **Use T key** for seamless theme switching during recording

5. **Enable focus mode** with F key for enhanced concentration on current content

### 🎤 **Live Streaming Tips**

1. **Practice shortcuts**, especially spacebar, T key, and F key for focus mode

2. **Prepare content** by removing leading spaces for clean display

3. **Use H key** for quick help access (if you forget shortcuts)

4. **Test themes and focus mode** under your lighting setup for best visibility

5. **Customize focus settings** to match your reading preferences

### 📚 **Educational Content**

1. **Break complex code** into manageable chunks

2. **Use slower scroll speeds** for detailed explanations

3. **Leverage manual navigation** (arrow keys) to highlight specific sections

4. **Prepare backup themes** for different content types

5. **Use focus mode** to highlight key concepts during explanations

## 🆕 New Features Explained

### 🔍 Enhanced F-Key Focus Mode

In teleprompter mode, simply press F key to toggle enhanced focus mode on/off:

- **Smart Gradient Blur**: Advanced algorithm provides smooth reading experience with buffer zones

- **Configurable Focus Area**: Adjust focus lines (1-10 lines, default 3)

- **Adjustable Opacity**: Set blur opacity (0.1-0.8, default 0.3)

- **Visual Focus Indicator**: Beautiful styling shows current active reading area

- **Real-time Updates**: Settings take effect immediately without restart

### 🎨 T-Key Theme Cycling

In teleprompter mode, simply press T key to cycle through all themes:

- Classic → Inverted → Midnight Blue → Sunset → Forest → Ocean → Rose → Classic...

- Status bar shows current theme name

- Settings auto-save

### ⚡ Enhanced Commands

- **Ctrl+Shift+T**: Open theme selection menu (with preview)

- **Ctrl+Shift+R**: Smart removal of leading spaces and indentation

- **Ctrl+Shift+M**: Toggle mirror flip mode for teleprompter hardware

### 📱 Smart Notifications

- All notifications now appear in status bar

- Auto-disappear after 2-3 seconds

- Won't interrupt your workflow

### 🌐 Expanded Internationalization

- Support for 6 languages: English, Chinese, German, French, Japanese, Korean

- Professional teleprompter terminology localization

- Automatic language detection from VS Code environment

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

For development setup, refer to [DEVELOPMENT.md](DEVELOPMENT.md).

## 📝 License

This project is licensed under the [MIT License](LICENSE).

## 🤝 Contributing

We warmly welcome your contributions! Whether reporting bugs, suggesting new features, improving documentation, or submitting code, all contributions are valuable support for the project.

For detailed information, please check:

- [Contributing Guide (English)](CONTRIBUTING.md)

- [贡献指南 (中文)](CONTRIBUTING.zh-CN.md)

- [Development Guide (English)](DEVELOPMENT.md)

- [开发指南 (中文)](project_docs/0-development.zh-CN.md)

## 🔗 Links

- **VS Code Marketplace**: [CueMode](https://marketplace.visualstudio.com/items?itemName=luckyXmobile.cuemode)

- **GitHub Repository**: [hddevteam/cuemode](https://github.com/hddevteam/cuemode)

- **Project Documentation**: [GitHub Pages](https://hddevteam.github.io/cuemode/)

- **中文文档**: [README.zh-CN.md](README.zh-CN.md)

- **Development Guide**: [DEVELOPMENT.md](DEVELOPMENT.md)

- **Roadmap**: [ROADMAP.md](ROADMAP.md)

- **Issue Reports**: [GitHub Issues](https://github.com/hddevteam/cuemode/issues)

## 🌟 Support the Project

If CueMode has helped your content creation, please consider:

- ⭐ Starring us on GitHub

- 📝 Leaving a review on VS Code Marketplace

- 🐛 Reporting issues or suggesting features

- 🤝 Contributing code or documentation

---

**Make your presentations more professional, make your content shine!** 🎬✨