poychang / vscode-reveal

Revealjs vsCode extension

Home Page:https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vscode-reveal README

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

This extension IS IN DEVELOPMENT and can have many bugs.

Features

Create revealjs presentation directly from markdown file

Sample of markdown :

---
theme : "white"
transition: "zoom"
customTheme: "myCSS"
---
Foo

Note: test note

---

Bar
\```csharp
public void AwesomeFunc(){
    Show.Me.Your.Best();
}
\```

----

Sub Bar

---

The End.

Display side by side or in browser

Call the command Revealjs: Show presentation by side to see your presentation next to your file. Call the command Revealjs: Open presentation in browser to see it in default browser.

On save the current editing slide will be show !

status bar

If your markdown file has more that one slide, status bar will display the slide count on right. If you now click on it it will directly on RevealJS presentation next to the file.

Once you have at least show the presentation once, it will also display the http address that you can use directly in your browser. When you click on it, browser will open.

Note : First time windows will ask you about firewall. If you open the port for the application, you can see your prensentation remotly.

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

Custom Theme

You can add custom style in a css file in same folder that your markdown.

exemple : if your file name is my-theme.css just add this in the front header :

---
customTheme : "my-theme"
---

Note that you can use both theme and custom theme as same time. Your custom theme will be loaded after to override default revealJS theme.

Future :

  • Create PDF from presentation

demo

demo

Extension Settings

You can customise many setting on for your revealjs 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.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

Known Issues

Please add issues on github.

About

Revealjs vsCode extension

https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal

License:MIT License


Languages

Language:TypeScript 95.8%Language:Shell 3.6%Language:Batchfile 0.6%