Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nicoespeon/vscode-slides

👩‍🏫 VS Code as a presentation tool
https://github.com/nicoespeon/vscode-slides

conference meetup slides talk vscode vscode-extension

Last synced: 1 day ago
JSON representation

👩‍🏫 VS Code as a presentation tool

Host: GitHub
URL: https://github.com/nicoespeon/vscode-slides
Owner: nicoespeon
License: mit
Created: 2019-10-23T00:39:37.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-10-30T01:31:05.000Z (3 months ago)
Last Synced: 2025-01-24T12:09:00.134Z (9 days ago)
Topics: conference, meetup, slides, talk, vscode, vscode-extension
Language: TypeScript
Homepage: https://marketplace.visualstudio.com/items?itemName=nicoespeon.slides
Size: 4.69 MB
Stars: 62
Watchers: 3
Forks: 5
Open Issues: 8
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

README

        # 👩‍🏫 VS Code Slides

[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)

Slides is a Visual Studio Code extension that helps you use your editor as a presentation tool.

📝 [Read the blog post](https://www.nicoespeon.com/en/2019/11/vscode-as-a-presentation-tool/)

![Demo of Slides features][slides-showcase]

This is inspired from [André Staltz's post][andre-staltz-post] where he explained how you can use VS Code **only** to give a pleasant, "live coding"-like presentation.

[> Give a feedback][create-new-issue]

## Features

- ⚡ Toggle Slides mode with a shortcut

- 👐 Handy shortcuts to navigate between slides

- 📊 Preview Mardown files for better presentations

- 🎨 Optimized settings for presentation

- 👩‍🎨 Customize settings to your needs

### Toggle Slides mode

Use `Ctrl Alt P` (`⌘ ⌥ P` on Mac) to toggle Slides mode.

**When you activate Slides**, a few things happen:

- Your settings got stored, so they can be reset

- Settings get replaced with others that are optimized for presentation

- All files are open in the alphabetical order, as tabs

- You can navigate between each tab with convenient shortcuts (see below)

**When you deactivate Slides**, your original settings get restored.

### Navigate between tabs (when Slides is active)

| Shortcut           | Shortcut on Mac | Operation            |

| ------------------ | --------------- | -------------------- |

| `Ctrl Shift Alt →` | `⌘ →`           | Go to next slide     |

| `Ctrl Shift Alt ←` | `⌘ ←`           | Go to previous slide |

| `Ctrl Esc`         | `⌘ Esc`         | Deactivate Slides    |

You can also re-use _Toggle Slides mode_ to deactivate Slides.

> If you want to change the default shortcuts, go in VS Code **Preferences > Keyboard Shortcuts** and search for `slides`. You should be able to override them.

## Pre-requisite

Slides is opinionated. By default, you'll need to install:

1. [The "SF Mono" font][recommended-font] on your machine

If you don't want to use these, you can override Slides settings with the `slides.vscodeSettings` configuration.

## Configuration

Here are the default settings of Slides you can override in your VS Code settings.

| Name                          | Description                           | Default               |

| ----------------------------- | ------------------------------------- | --------------------- |

| `slides.previewMarkdownFiles` | Preview Markdown files                | `false`               |

| `slides.folder`               | Relative path to slides folder        | Workspace root folder |

| `slides.vscodeSettings`       | Custom settings for presentation mode | {}                    |

In your VS Code `settings.json` you can set any valid VS Code setting you want to apply in presentation mode.

For example:

```json

{

  "slides.vscodeSettings": {

    "workbench.colorTheme": "Frantic Light (rainglow)",

    "editor.fontFamily": "Arial",

    "terminal.integrated.fontFamily": "Arial",

    "editor.fontSize": 42

  }

}

```

Have a look at [Slides default settings](https://github.com/nicoespeon/vscode-slides/blob/master/src/settings.ts) to learn more.

## Installation

1. Click on the Extensions icon (usually on the left-hand side of your editor).

1. Search for "Slides".

1. Find the extension in the list and click the install button.

## How to use best

1. Create one file per "slide"

1. Name them by number: `01.md`, `02.js`, `03.01.md`, `03.02.png`, etc.

1. Toggle Slides before you start your talk 🎤

### Tips

- Prefer to keep coding files empty, or with easy content supposed to be known.

- Leverage `slides.previewMarkdownFiles` setting to render Markdown files for increased readability.

- Leverage `slides.folder` setting to regroup your slides into a folder for better cohesion.

## FAQ

### The plugin seems to have screwed up my editor settings, help!

When you enter presentation mode, the plugin writes a `.vscode/settings.json` file in your project. If there was an existing one, it stores it in cache.

When you exit presentation mode, the plugin should restore the previous `settings.json` (if there was one).

If you get stuck with the presentation style, even though you're not in presentation mode anymore (e.g. you've uninstalled the plugin), you can get rid of the `.vscode/settings.json` file to get back to normal. You may lose the original project `settings.json` if that happens, but I rarely saw that happen.

Related issues: [#19](https://github.com/nicoespeon/vscode-slides/issues/19) and [#39](https://github.com/nicoespeon/vscode-slides/issues/39)

## Release Notes

[Have a look at our CHANGELOG][changelog] to get the details of all changes between versions.

### Versioning

We follow [SemVer][semver] convention for versionning.

That means our releases use the following format:

```

..

```

- Breaking changes bump `` (and reset `` & ``)

- Backward compatible changes bump `` (and reset ``)

- Bug fixes bump ``

## Contributing

### [Contributing Guide][contributing]

Read our [contributing guide][contributing] to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to the extension.

### [Good First Issues][good-first-issues]

To help you get your feet wet and become familiar with our contribution process, we have a list of [good first issues][good-first-issues] that contains things with a relatively limited scope. This is a great place to get started!

## Contributors

Thanks goes to these wonderful people ([emoji key][all-contributors-emoji]):

  

    

      
_{Nicolas Carlo}
🤔 💻 📖 👀 💬

      
_{Daniel Dickerson}
🐛 💻

      
_{Ethan Brown}
🤔 💻

      
_{Joe Paris}
🐛

      
_{Marko V}
🤔 💻

      
_{Lucas Feliciano}
💻 🐛

      
_{Adam Sherwood}
🤔

    

    

      
_{Tim Vahlbrock}
🐛

    

  

This project follows the [all-contributors][all-contributors] specification.

Contributions of any kind are welcome!

## License

💁 [MIT][license]

[andre-staltz-post]: https://staltz.com/your-ide-as-a-presentation-tool.html

[change-keybindings]: https://code.visualstudio.com/docs/getstarted/keybindings

[semver]: http://semver.org/

[all-contributors]: https://allcontributors.org

[all-contributors-emoji]: https://allcontributors.org/docs/en/emoji-key

[recommended-font]: https://github.com/ZulwiyozaPutra/SF-Mono-Font

[changelog]: https://github.com/nicoespeon/vscode-slides/blob/master/CHANGELOG.md

[contributing]: https://github.com/nicoespeon/vscode-slides/blob/master/CONTRIBUTING.md

[license]: https://github.com/nicoespeon/vscode-slides/blob/master/LICENSE.md

[good-first-issues]: https://github.com/nicoespeon/vscode-slides/issues?q=is%3Aissue+is%3Aopen+label%3A%22%3Awave%3A+Good+first+issue%22

[create-new-issue]: https://github.com/nicoespeon/vscode-slides/issues/new/choose

[slides-showcase]: https://github.com/nicoespeon/vscode-slides/blob/master/assets/showcase.gif?raw=true