vscode-reveal 
This extension let you display a reveal.js presentation directly from an opened markdown document.
Full documentation here
Features
Markdown
Create reveal.js presentation directly from markdown file,
open or create a new file in markdown and use default slide separator to see slide counter change in the status bar and title appear in the sidebar.
Since Reveal.js use marked to parse the markdown string you can use this in your document:
- GitHub flavored markdown.
- GFM tables
If you need a sample file you can get it here:
https://raw.githubusercontent.com/evilz/vscode-reveal/master/sample.md
Status bar
As soon as your markdown document has at least two slides, slides counter will appear in the status bar on right.
Clicking on slide counter will launch preview on right, and you can now see the local address of express server used to host Reveal presentation.
Clicking on the address will launch presentation in the browser.
You can stop express server when you want by clicking on the red square.
Now in version 2, you can see a list of all your slides on the sidebar.
The list will show the first line of text that is found in the slide, most of the time it will be a title, but it can also be an image or something else.
Blue icon is used to show horizontal slide, orange is used for vertical ones.
Clicking on slide name will move the cursor on beginning of the slide in the editor.
If the preview is opened it will also show the selected slide on it.
Theme
reveal.js comes with a few themes built in:
- black - Black background, white text, blue links (default)
- white - White background, black text, blue links
- league - Gray background, white text, blue links
- beige - Beige background, dark text, brown links
- sky - Blue background, thin dark text, blue links
- night - Black background, thick white text, orange links
- serif - Cappuccino background, gray text, brown links
- simple - White background, black text, blue links
- solarized - Cream-colored background, dark green text, blue links
- blood - Dark background, thick white text, red links
- moon - Dark blue background, thick grey text, blue link
You can set it using revealjs.theme parameter in Vs code config or in the document itself using front matter.
If you want a custom theme you can do it!
Just add custom style to a CSS file in the same folder that your markdown.
example:
if your file name is my-theme.css just add this in the front matter header :
---
customTheme : "my-theme"
---
Note that you can use both theme and custom theme at the same time. Your custom theme will be loaded after to override default reveal.js theme.
Highlight Theme
You can use code block in your markdown that will be highlighted by highlight.js.
So you can configure the coloration theme by setting revealjs.highlightTheme parameter of VS Code, or set it using front matter.
---
highlightTheme : "other theme"
---
Get the theme list here https://highlightjs.org/
Reveal.js Options
You can customize many setting on for your reveal.js presentation.
| Name | Description | Default |
|---|
revealjs.notesSeparator | Revealjs markdown note delimiter | note: |
revealjs.separator | Revealjs markdown slide separator | ^(
?|
)---(
?|
)$ |
revealjs.verticalSeparator | Revealjs markdown vertical separator | ^(
?|
)--(
?|
)$ |
revealjs.theme | Revealjs Theme (black, white, league, beige, sky, night, serif, simple, solarized | black |
revealjs.highlightTheme | Highlight Theme | Zenburn |
revealjs.controls | Display controls in the bottom right corner | true |
revealjs.progress | Display a presentation progress bar | true |
revealjs.slideNumber | Display the page number of the current slide | |
revealjs.history | Push each slide change to the browser history | |
revealjs.keyboard | Enable keyboard shortcuts for navigation | true |
revealjs.overview | Enable the slide overview mode | true |
revealjs.center | Vertical centering of slides | true |
revealjs.touch | Enables touch navigation on devices with touch input | true |
revealjs.loop | Loop the presentation | |
revealjs.rtl | Change the presentation direction to be RTL | |
revealjs.shuffle | Randomizes the order of slides each time the presentation loads | |
revealjs.fragments | Turns fragments on and off globally | true |
revealjs.embedded | Flags if the presentation is running in an embedded mode, i.e. contained within a limited portion of the screen | |
revealjs.help | Flags if we should show a help overlay when the questionmark key is pressed | true |
revealjs.showNotes | Flags if speaker notes should be visible to all viewers | |
revealjs.autoSlide | Number of milliseconds between automatically proceeding to the next slide, disabled when set to 0, this value can be overwritten by using a data-autoslide attribute on your slides | |
revealjs.autoSlideMethod | The direction in which the slides will move whilst autoslide is activet | Reveal.navigateNext |
revealjs.autoSlideStoppable | Stop auto-sliding after user input | true |
revealjs.mouseWheel | Enable slide navigation via mouse wheel | |
revealjs.hideAddressBar | Hides the address bar on mobile devices | true |
revealjs.previewLinks | Opens links in an iframe preview overlay | |
revealjs.transition | Transition style (none/fade/slide/convex/concave/zoom) | default |
revealjs.transitionSpeed | Transition speed (default/fast/slow) | default |
revealjs.backgroundTransition | Transition style for full page slide backgrounds (none/fade/slide/convex/concave/zoom) | default |
revealjs.viewDistance | Number of slides away from the current that are visible | 3 |
revealjs.parallaxBackgroundImage | Parallax background image | |
revealjs.parallaxBackgroundSize | Parallax background size (CSS syntax, e.g. 2100px 900px) | |
revealjs.parallaxBackgroundHorizontal | Number of pixels to move the parallax background per slide | |
revealjs.parallaxBackgroundVertical | Number of pixels to move the parallax background per slide | |
YAML Front Matter
You can change settings directly in your markdown file using front matter style. You can change all extention settings like this :
---
theme : "white"
transition: "zoom"
---
Note do not add revealjs. prefix before setting name.
Open preview on right side
To display the preview on the right side you can :
- click on slide count in status bar
- click split icon in sidebar header
- call command
Revealjs: Show presentation by side
The preview will be synchronize with the current cursor position.
Open in browser
To display presentation in the browser you can:
- click on server address in the status bar
- click the icon in sidebar header
- call command
Revealjs: Open presentation in a browser
This will try to use Chrome that is the best browser to use for reveal.js presentation, if it can't find it, your default browser will be used.
Print to PDF
To export your presentation to pdf you can:
- click on PDF icon in the sidebar
- call the command
Revealjs: Export in PDF
This will try to launch Chrome or your default browser and launch printing.
Be sure to set print setting correctly:
- No margin
- print background
Export static Website
To export your presentation to a static website you can:
- click on HTML icon in the sidebar
- call the command
Revealjs: Export in HTML
This will try to launch Chrome in headless or your default browser it takes about 10sec and then open the export folder.
Plugins
---
enableMenu: false
---
Disable chalkboard
---
enableChalkboard: false
---
---
enableTitleFooter: false
---
Disable zoom
---
enableZoom: false
---
Disable search
---
enableSearch: false
---
FAQ
Note : The first time, Windows will ask you about the firewall. If you open the port for the application, you can see your presentation remotely.
Known Issues
Please add issues on github.
