/vscode-reveal

Revealjs vsCode extension

Primary LanguageJavaScriptMIT LicenseMIT

vscode-reveal install

codecov Quality Gate Status

This extension let you display a reveal.js presentation directly from an opened markdown document.

demo

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.

Sidebar and navigation

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.

NameDescriptionDefault
revealjs.notesSeparatorRevealjs markdown note delimiternote:
revealjs.separatorRevealjs markdown slide separator^( ?| )---( ?| )$
revealjs.verticalSeparatorRevealjs markdown vertical separator^( ?| )--( ?| )$
revealjs.themeRevealjs Theme (black, white, league, beige, sky, night, serif, simple, solarizedblack
revealjs.highlightThemeHighlight ThemeZenburn
revealjs.controlsDisplay controls in the bottom right cornertrue
revealjs.progressDisplay a presentation progress bartrue
revealjs.slideNumberDisplay the page number of the current slide
revealjs.historyPush each slide change to the browser history
revealjs.keyboardEnable keyboard shortcuts for navigationtrue
revealjs.overviewEnable the slide overview modetrue
revealjs.centerVertical centering of slidestrue
revealjs.touchEnables touch navigation on devices with touch inputtrue
revealjs.loopLoop the presentation
revealjs.rtlChange the presentation direction to be RTL
revealjs.shuffleRandomizes the order of slides each time the presentation loads
revealjs.fragmentsTurns fragments on and off globallytrue
revealjs.embeddedFlags if the presentation is running in an embedded mode, i.e. contained within a limited portion of the screen
revealjs.helpFlags if we should show a help overlay when the questionmark key is pressedtrue
revealjs.showNotesFlags if speaker notes should be visible to all viewers
revealjs.autoSlideNumber 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.autoSlideMethodThe direction in which the slides will move whilst autoslide is activetReveal.navigateNext
revealjs.autoSlideStoppableStop auto-sliding after user inputtrue
revealjs.mouseWheelEnable slide navigation via mouse wheel
revealjs.hideAddressBarHides the address bar on mobile devicestrue
revealjs.previewLinksOpens links in an iframe preview overlay
revealjs.transitionTransition style (none/fade/slide/convex/concave/zoom)default
revealjs.transitionSpeedTransition speed (default/fast/slow)default
revealjs.backgroundTransitionTransition style for full page slide backgrounds (none/fade/slide/convex/concave/zoom)default
revealjs.viewDistanceNumber of slides away from the current that are visible3
revealjs.parallaxBackgroundImageParallax background image
revealjs.parallaxBackgroundSizeParallax background size (CSS syntax, e.g. 2100px 900px)
revealjs.parallaxBackgroundHorizontalNumber of pixels to move the parallax background per slide
revealjs.parallaxBackgroundVerticalNumber 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

Disable slideout menu

---
enableMenu: false
---

Disable chalkboard

---
enableChalkboard: false
---

Disable title footer

---
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.