We make a point of distributing reveal.js in a way that it can be used by as many people as possible. The basic setup is our most broadly accessible way to get started and only requires that you have a web browser. There's no need to go through a build process or install any dependencies.
Some reveal.js features, like external Markdown, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an or add your own custom behavior using our JavaScript API.
You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the data-separator attribute defines a regular expression for horizontal slides (defaults to ^\r?\n---\r?\n$, a newline-bounded horizontal rule) and data-separator-vertical defines vertical slides (disabled by default). The data-separator-notes attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to notes?:, so it will match both "note:" and "notes:"). The data-charset attribute is optional and specifies which charset to use when loading the external file.
Powerful syntax highlighting features are built into reveal.js. Using the bracket syntax shown below, you can highlight individual lines and even walk through multiple separate highlights step-by-step. Learn more about line highlights.
reveal.js has a built in remote! If you take a look at dependencies in the README, the very last item in Reveal.initialize is the option to activate a remote! It'll pop up a QR code that you can scan; the website it takes you to syncs with your presentation (over the internet, not local wifi/bluetooth) and allows you to control your presentation with your touchscreen device. There is even an app (for iOS) streamlined specifically for using the remote, I believe it's called RemotesLite.
I am writing slides with reveal.js 4 and I would like to integrate at least seven Asciinema recordings. I am using the last version of Ascinema Player (3.0.0 RC1). All Asciinema recordings are hosted by myself.
The revealjs package (El Hattab and Allaire 2017) provides an output format revealjs::revealjs_presentation that can be used to create yet another style of HTML5 slides based on the JavaScript library reveal.js. You may install the R package from CRAN:
To create a reveal.js presentation from R Markdown, you specify the revealjs_presentation output format in the YAML metadata of your document. You can create a slide show broken up into sections by using the # and ## heading tags; you can also create a new slide without a header using a horizontal rule (---). For example, here is a simple slide show:
I used to be a big fan of reveal.js, but stopped using it after a while when I ran across too many instances of having to fight it's built in styling to get what I wanted. Don't get me wrong, I loved it, and thought it was a great tool, but somethings seemed unnecessarily difficult. I switched to Powerpoint and Keynote because, frankly, it was just simpler.
With this component, you can create reveal.js HTML presentations with markdown or markup. The generated presentation is then embedded into your Streamlit app for full-featured use. You can run the presentation right from inside your app in embedded mode or fullscreen mode. This component is bidirectional allowing you to control the presentation via your app but also allowing you to have the presentation control your app.
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.
reveal.js is a free and open-source HTML framework that can be used to create fully-featured presentations through a web browser. It is built on open web technologies. It has a rich set of features including, Markdown content, nested slides, PDF export, and JavaScript APIs for controlling the slide navigation.
Since I started giving tech talks in meetups I used reveal.js to build my slides. As a web developer its the finest tool to create and share slides for me. I either share the slides on github or upload to slide hosting sites.
To upload the slides to hosting sites I need to convert html slides to pdf. The reveal.js have a workflow to convert the html slides into pdf using chrome. But since I love CLI, I was looking for a way to convert my slides to pdf using phantom.js. Then a stackoverflow thread got me into the following solution.
Before seeing the stackoverflow I never knew that reveal.js have equiped with a plugin print-pdf.js to do this. For this solution to work, you need phantomjs to be installed. You can either download the compiled phantomjs or install using npm.
Since I installed revealjs using bower, my path to print-pdf.js plugin is bower_components/reveal.js/plugin/print-pdf/print-pdf.js and my slides are served using simple http server running at localhost:9000.
While reveal.js is a terrific tool, there are times I want to do things a little differently. For example, there are times I want to use a full screen image. While I can set a background image by defining it in the section tag, e.g.
The following files must be included in your JavaScript to use this plugin:
This will fetch the latest stable version of reveal.js library from Github and will install under public/components directory. The --save option automatically updates the dependency section of bower.json file with reveal.js.
The basic setup is for authoring presentations only. The full setup gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing A on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying autoSlideStoppable: false in your reveal.js config.
You can finetune the reveal.js navigation behavior by using the navigationMode config option. Note that these options are only useful for presnetations that use a mix of horizontal and vertical slides. The following navigation modes are available:
You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the touch config option to false when initializing reveal.js.
Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the showNotes configuration value set to true. Notes will appear along the bottom of the presentations.
For anything mission critical I recommend you run your own server. The easiest way to do this is by installing now. With that installed, deploying your own Multiplex server is as easy running the following command from the reveal.js folder: now plugin/multiplex.
In this post, we explained how to install reveal.js on Arch Linux. We also showed you how to configure Nginx as a reverse proxy for reveal.js. You now try to deploy reveal.js on dedicated server hosting from Atlantic.Net!
RISE is an open-source tool to convertjupyter notebooks into reveal.js presentations.Each notebook cell is formatted as aslide, including title, pictures, bullet lists, and more. In particular,code snippets and their output are displayed in a nice, illustrative way.
You can use pandoc to produce an HTML + JavaScript slide presentation that can be viewed via a web browser. There are five ways to do this, using S5, DZSlides, Slidy, Slideous, or reveal.js. You can also produce a PDF slide show using LaTeX beamer, or slide shows in Microsoft PowerPoint format.
For Slidy, Slideous, reveal.js, and S5, the file produced by pandoc with the -s/--standalone option embeds a link to JavaScript and CSS files, which are assumed to be available at the relative path s5/default (for S5), slideous (for Slideous), reveal.js (for reveal.js), or at the Slidy website at w3.org (for Slidy). (These paths can be changed by setting the slidy-url, slideous-url, revealjs-url, or s5-url variables; see Variables for HTML slides, above.) For DZSlides, the (relatively short) JavaScript and CSS are included in the file by default.
Note: in reveal.js slide shows, if slide level is 2, a two-dimensional layout will be produced, with level-1 headings building horizontally and level-2 headings building vertically. It is not recommended that you use deeper nesting of section levels with reveal.js unless you set --slide-level=0 (which lets reveal.js produce a one-dimensional layout and only interprets horizontal rules as slide boundaries).
For reveal.js, there is also the reveal.js-native option parallaxBackgroundImage, which produces a parallax scrolling background. You must also set parallaxBackgroundSize, and can optionally set parallaxBackgroundHorizontal and parallaxBackgroundVertical to configure the scrolling behaviour. See the reveal.js documentation for more details about the meaning of these options.
df19127ead