nicoespeon / vscode-slides Goto Github PK

View Code? Open in Web Editor NEW

59.0 3.0 5.0 4.51 MB

👩‍🏫 VS Code as a presentation tool

Home Page: https://marketplace.visualstudio.com/items?itemName=nicoespeon.slides

License: MIT License

JavaScript 6.12% TypeScript 93.88%

vscode vscode-extension slides meetup conference talk

vscode-slides's Introduction

👩‍🏫 VS Code Slides

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

📝 Read the blog post

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

> Give a feedback

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:

The "SF Mono" 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:

{
  "slides.vscodeSettings": {
    "workbench.colorTheme": "Frantic Light (rainglow)",

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

    "editor.fontSize": 42
  }
}

Have a look at Slides default settings to learn more.

Installation

Click on the Extensions icon (usually on the left-hand side of your editor).
Search for "Slides".
Find the extension in the list and click the install button.

How to use best

Create one file per "slide"
Name them by number: 01.md, 02.js, 03.01.md, 03.02.png, etc.
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 and #39

Release Notes

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

Versioning

We follow SemVer convention for versionning.

That means our releases use the following format:

<major>.<minor>.<patch>

Breaking changes bump <major> (and reset <minor> & <patch>)
Backward compatible changes bump <minor> (and reset <patch>)
Bug fixes bump <patch>

Contributing

Contributing Guide

Read our contributing guide 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

To help you get your feet wet and become familiar with our contribution process, we have a list of 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):

_{Nicolas Carlo} 🤔 💻 📖 👀 💬	_{Daniel Dickerson} 🐛 💻	_{Ethan Brown} 🤔 💻	_{Joe Paris} 🐛	_{Marko V} 🤔 💻	_{Lucas Feliciano} 💻 🐛	_{Adam Sherwood} 🤔
_{Tim Vahlbrock} 🐛

This project follows the all-contributors specification.

Contributions of any kind are welcome!

License

💁 MIT

vscode-slides's People

Contributors

Stargazers

Watchers

Forkers

divinebovine omnoms alexrogalskiy etbrow coryrylan

vscode-slides's Issues

This plugin seems to have screwed up my editor font size settings.

Tell us what you need help with.
Steps to replicate.

Install the sliders plugin.
enable the plugin by doing ctrl+shift+p
uninstall the plugin

Now the enlarged font size is still enabled and i cannot get it back to normal. When i reinstall again and enable it, it goes even bigger. HELP.......... :(

Ctrl + RightArrow doesn't work to skip to end of word

Describe the bug

The extension is great, however I have found that I can use the Control and arrow keys to move to the end or beginning of a word as per the cursorWordEndRight and cursorWordEndRight commands. I have experienced this issue in both Markdown and Python files after installing the extension. Also, after disabling it and reloading Code, it appears to work again. Re-enabling the extensions causes it to fail again.

How to reproduce

I'm afraid I do not have concrete steps for reproducing since this happens by just enabling the extension. I am also NOT in Slides mode when trying this.

Expected behavior

The cursor should be able to skip words correctly when not in Slides mode.

Additional information

Version of the extension impacted: v2.0.3

Thank you very much for your time and this extension.

Presentation mode doesn't adhere to workspace settings.json

Describe the bug

Presentation mode doesn't adhere to the workspace settings for the terminal configuration or just about any custom configuration. If I've set the fontSize to 18 it's loading something entirely different when in presentation mode. Same thing if I set markdown fontSize to 24 it's shown in the normal preview window, but in slides' presentation view, it's not.
If I set workbench.statusBar.visible to true in settings.json, it's not in presentation mode.

How to reproduce

Configure a custom workspace settings.json file to contrain overrides and more useful and working settings but once you then start with slides in presentation-mode, it's still loading erronous/wrong/default settings.

Expected behavior

That my workspace settings are actually adhered to when I run in presentation mode.

Screenshots

Terminal in non-presentation mode

Terminal in presentation mode

Markdown in vs code native preview mode

Markdown in presentation mode

Failed to open slides on Windows

Describe the bug

When activating slide mode, the extension states:

I failed to open all slides because: Error: ENOENT: no such file or directory, scandir '/c:/dev/presentations/vscode'

How to reproduce

Use windows, create a folder for a new presentation, add a single markdown file, 01.md. Activate slide mode.

Expected behavior

Loads the first markdown file in slide mode.

Screenshots

Additional information

Version of the extension impacted: 2.0.1

Give user the possibility to override default settings

If possible could you make it so we can overwrite the other theme parameters that your package sets? I love the package but I am trying to change it to a dark theme but I can't because lineHighlightBackground is set to #FFFFFF and I can't overwrite it.

Publish `Slides` to Open VSX

Dear @nicoespeon,
Please publish this extension to the Open VSX marketplace.

Context

Unfortunately, as Microsoft prohibits usages of the Microsoft marketplace by any other products or redistribution of .vsix files from it, in order to use VS Code extensions in non-Microsoft products, we kindly ask that you take ownership of the VS Code extension namespace in Open VSX and publish this extension on Open VSX.

What is Open VSX? Why does it exist?

Open VSX is a vendor neutral alternative to the MS marketplace used by most other derivatives of VS Code like VSCodium, Gitpod, OpenVSCode, Theia-based IDEs, and so on.

You can read on about Open VSX at the Eclipse Foundation's Open VSX FAQ.

How can you publish to Open VSX?

The docs to publish an extension can be found here. This process is straightforward and shouldn't take too long. Essentially, you need an authentication token and to execute the ovsx publish command to publish your extension. There's also a doc explaining the whole process with an example GitHub Action workflow.

command 'slides.toggle' not found

After installing the extension in VScode, when toggling presentation mode,

error appears :

command slides.toggle not found

tried adding this to settings.json with no luck.

Ignoring .gif and .webp formats

I have a few .gif, .webp and .png images between my slides. The extension only opens the .png ones and ignores the rest.

[Asking for inputs] Options to hide tabs when presenting

Describe what could be improved

When presenting, all files are open and we see tabs. One could say this adds unnecessary visual information:

I'm mitigated on this one:

on one hand, it keeps it clearer that we're in a text editor, which feels less like black magic when we live code
on the other hand, it adds visual noise that might not be desirable

Thus, I think we should provide this as an option.

But most of all, I'd like to get your opinion before moving on this: do you need this? Why?

How would it work

We expose an configurable option slides.tabsVisibility with values "all" | "one" | "none" (default is "all").

If config is "one" | "none", apply workbench.editor.showTabs: false to settings.

If config is "none", apply CSS to display: none everything inside the breadcrumbs title and add a little margin top to make it readable (3vh is fine).

Expected behavior

Option `"all"` (default)

Option "one"

Option "none"

We can still navigate between slides, but we don't see the tabs anymore.

Additional information

Related issue on VS Code: microsoft/vscode#33607

Allow overriding key bindings

Is this request related to a problem? Please describe.

It would be nice if we could customize the key bindings. Currently on windows the plugin overrides the default behavior of ctrl+left and ctrl+right. That is a common binding for moving the cursor by word boundaries. When this plugin is loaded (not even running) it overrides that behavior.

Describe the solution you'd like

Add key bindings to the settings.

Ability to Customize Slides Folder

Feature Description

I try to keep my content that I work with separate so it's easier to maneuver when looking at the repository. I'll have separate folders for each example and sometimes for ad-hoc scripts that we do during the presentation. Being able to specify a specific folder where the slides are located would be a big plus.

Better theme for rendering Markdown

We're currently using the Light+ theme from VS Code, which is great because it's natively installed & good enough.

I'd like to add some tweaks to make the raw Markdown even more readable:

do not put ** chars in bold, to focus on the content and not the syntax

Useful resources

command 'slides.toggle' not found

I just installed vscode slides plugin.
I added a test.md file.

When I try to start slides, than I get the command 'slides.toggle' not found error:

I basically can't start 'slides' :p.

Recent VSCode Versions: "command workbench.action.maximizeEditor not found"

Describe the bug

When toggling slide mode VSCode throws an error:

This command was renamed: microsoft/vscode#197227 . What's especially annoying is that the editor theming is changed, but wouldn't change back when toggling slide mode again.

How to reproduce

Use one of the latest VSCode Versions (e.g. latest, 1.85.1)

Expected behavior

Slide modes starts.

Screenshots

Additional information

Version of the extension impacted: _v4.2.0

👩‍🏫 Add any other context about the problem here.

Files opening in same tab, changes to settings.json not applied

Describe the bug

When running VS Code Slides a new settings.json file is created but not saved and therefore does not get applied. Further, all markdown files are open in the same tab.

How to reproduce

Open a folder containing markdown files and press ctrl+alt+p to engage presentation mode.

Expected behavior

Current editor settings are saved, presentation-friendly settings are applied, and every file in the open folder is opened in its own tab in the editor.

Screenshots

Additional information

Preview markdown feature

First really thank you for this extension !

Describe what could be improved

When the new markdown preview feature is enabled, I was wondering if it could be possible to open the markdown file directly in preview mode. This could prevent the double loading frame:

the first one to load the real markdown file
the second one to load the preview markdown file

Additional information

Version of the extension used: 3.1

command 'slides.toggle' not found

Hello,
I've seen this issue and have the same problem. I see that the original defect was solved by removing extensions, woulda been cool if they had mentioned which extensions, but whatever.

I've installed the Slides extension, the recommended theme and font. Ctrl-Alt-P displays the error.
Running Toggle Slides Mode from the command palette also shows the same error

Version: 1.63.2
Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3
Date: 2021-12-15T09:39:46.686Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.16.2-arch1-1

Any suggestions?

Vertically align markdown in markdown preview

So far, the markdown is on the top line.
Especially for a presentation I think though vertically putting the markdown in the centre of it does not fill the screen would be nice.

Two files .ts next to each other fail to open

Describe the bug

01.md
02.ts
03.ts <-- this will won't open when I switch to presentation mode

Original settings not restored under WSL

Describe the bug

When accessing a folder under WSL on Windows 10 an appropriate settings.json file is created when launching VS Code Slides but it is not saved nor applied. Instead, I am prompted to save the file at which point the changes are applied. But, when I leave presentation mode my original settings are not re-applied until I close and restart VS Code. Even then, I have to reset my color theme manually.

How to reproduce

Open a remote WSL folder containing markdown files and press ctrl+alt+p to engage presentation mode.

Expected behavior

Current editor settings are saved, presentation-friendly settings are applied, and every file in the open folder is opened in its own tab in the editor. Upon leaving presentation mode, original settings including color theme should be re-applied without requiring a restart of the program or manual intervention.

Screenshots

Additional information

👩‍🏫 Add any other context about the problem here.

This happens when opening a folder in the WSL file system using Microsoft's Visual Studio Code Remote - WSL extension.

Cmd+left / right interfere with standard editor behaviour

Normally, cmd+left,right on macs behave like home/end on windows which is a shortcut I think many people use.

By default, you can already switch tabs with cmd+shift+[,], which is also common behavior on osx (for example in browsers or Finder) so maybe these added shortcuts can be left out.

Alternatively, you could only enable it in slide-mode, but then again it might be annoying while live-programming.

vscode launch setting never launches

Describe the bug

When opening the repository with vscode and trying to launch the exension for debugging, the launch task never launches. This is because the launch task depends on a prelaunch task completing, npm watch. Since this task never completes, the extension never runs.

It might be better to document that you need to run the npm watch task before you try launching the extension. 🤷‍♂

workspace settings.json gets overwritten by template

Describe the bug

Switching between presentation mode and editing the slides often/quickly enough can cause the settings.json in the workspace to be overwritten by some template. And what is "quickly enough" seems to vary.

This template is inserted instead into the settings.json

{"//a":"This theme is familiar to devs","!a":"You need to install this theme","workbench.colorTheme":"GitHub Clean White","//b":"Minor tweaks to improve contrast & make cursor stands out","workbench.colorCustomizations":{"editorCursor.background":"#ffffff","editorCursor.foreground":"#0000bb","editor.lineHighlightBackground":"#f0f0f0","editor.selectionBackground":"#aaeeff"},"//c":"Clean the screen from unnecessary elements","workbench.statusBar.visible":false,"workbench.activityBar.visible":false,"editor.minimap.enabled":false,"//d":"Just rely on the tabs on top to keep full screen width","explorer.openEditors.visible":0,"//e":"Mimic GitHub style","editor.renderWhitespace":"none","editor.renderIndentGuides":false,"//f":"This is GitHub font style","!f":"You need to install this font on your machine","editor.fontFamily":"Inter","terminal.integrated.fontFamily":"Inter","//h":"Make the text big enough to be comfortable","editor.fontWeight":"600","editor.fontSize":24,"terminal.integrated.fontWeight":"800","terminal.integrated.fontSize":28,"//i":"Rely on a simple shell, avoid fancy configuration","!i":"It's even better if you add `export PS1='\\$ '` to your .bash_profile","terminal.integrated.shell.linux":"/bin/bash","terminal.integrated.shell.osx":"/bin/bash","//j":"Prevent the editor to magically edit code on save","editor.formatOnSave":false,"//k":"Disable preview so we can open all files at once","workbench.editor.enablePreview":false,"slides.previewMarkdownFiles":true}

How to reproduce

Switch "quickly" enough between presentation and editing mode.

Expected behavior

Not to get my workspace settings.json to be overwritten.

Additional information

Slides version: 3.2.1
VSCODE

Version: 1.43.2 (user setup)
Commit: 0ba0ca52957102ca3527cf479571617f0de6ed50
Date: 2020-03-24T07:38:38.248Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

Export slides to PDF

Dumping this idea out of my head: being able to export the slide deck as a PDF.

I'll likely work on this the next time I need to do a presentation (obviously, COVID had an impact on that, switching my priorities).

Record and replay live coding

Is this request related to a problem? Please describe.

When I present code, I want to focus on what I say. Thus, I like to record the code in advance, so I can make it appear progressively in VS Code without thinking too much about the typing.

Today, I use https://github.com/jevakallio/vscode-hacker-typer to record and replay code.

But it has some bugs and missing features. Despite having open issues and PRs, the extension seems to be abandoned. I proposed my help to the author, but he doesn't seem to have time to dedicate to the project anymore.

So I need to scratch my own itch and implement the features I need, directly into Slides.

Describe the solution you'd like

At least, a way to:

Record code and save the macro.
Replay a macro.
- On keypress, it inserts the next character at the correct position instead. So I can pretend typing, the code will be rewritten regardless the keypresses.

Nice-to-have features would be:

Ability to insert stops during the record. When we hit a stop on replay, keypresses will work again until we press a specific key to continue replaying the macro.
Write all code until next stop on click, so I don't need to pretend typing and I can make the code appear with my clicker.
Export and import macros, so I can change computer.
Make it possible to stop during replay with a specific key. That will behave like a stop that would have been recorded, so I can insert new code.
Make it possible to exit a replay completely, so we don't have to finish it.
Automatically detect the slide where the record was made, so it starts replay automatically when we enter the slide and its state matches initial state of the macro.
Being able to rewind the replay (go to previous keypress / stop).

nicoespeon / vscode-slides Goto Github PK

vscode-slides's Introduction

👩‍🏫 VS Code Slides

Features

Toggle Slides mode

Navigate between tabs (when Slides is active)

Pre-requisite

Configuration

Installation

How to use best

Tips

FAQ

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

Release Notes

Versioning

Contributing

Contributors

License

vscode-slides's People

Contributors

Stargazers

Watchers

Forkers

vscode-slides's Issues

Describe the bug

How to reproduce

Expected behavior

Additional information

Describe the bug

How to reproduce

Expected behavior

Screenshots

Describe the bug

How to reproduce

Expected behavior

Screenshots

Additional information

Context

What is Open VSX? Why does it exist?

How can you publish to Open VSX?

Describe what could be improved

How would it work

Expected behavior

Option "all" (default)

Option "one"

Option "none"

Additional information

Is this request related to a problem? Please describe.

Describe the solution you'd like

Feature Description

Useful resources

Describe the bug

How to reproduce

Expected behavior

Screenshots

Additional information

Describe the bug

How to reproduce

Expected behavior

Screenshots

Additional information

Describe what could be improved

Additional information

Describe the bug

Describe the bug

How to reproduce

Expected behavior

Screenshots

Additional information

Describe the bug

Describe the bug

How to reproduce

Expected behavior

Additional information

Is this request related to a problem? Please describe.

Describe the solution you'd like

Recommend Projects

Recommend Topics

Recommend Org

Option `"all"` (default)