reveal html presentation

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es .

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Image Backgrounds

Repeated image backgrounds, background transitions.

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide" .

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Pretty Code

Courtesy of highlight.js .

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

Try the online editor
Source code on GitHub
Follow me on Twitter

BY Hakim El Hattab / hakim.se

Looking for a Rails Developer? I am currently open to new opportunities, including contract roles. If your team needs a skilled Rails developer, please feel free to connect with me on LinkedIn .

Build and Publish a Presentation with RevealJS and Github

If you've ever given a presentation at a conference, meetup, or even a lunch and learn for your colleagues at work, you probably needed some slides to go along with your talk. The standard tools to make these are Microsoft PowerPoint, Apple Keynote, or Google Slides. These will get the job done, with PowerPoint and Keynote being more feature rich than the free Google Slides.

However, if you're a web developer, there is another option. RevealJS is a JavaScript framework that allows you to leverage your HTML, CSS, and JavaScript skills to build beautiful and polished presentations. Some benefits this has over the standard software packages include being able to use version control (since the presentation is just html, css, and js files rather than a proprietary binary format), collaborate with others, and the sheer joy of using your favorite web technologies and text editor.

This post will walk you through how to get started with RevealJS, build a simple presentation, and publish it to Github Pages so you can share it with the world. If you want a quick "reveal" so to speak, here is the sample presentation we're going to be building and the source .

Getting Started

The build tooling for RevealJS uses Node.js so make sure you have that installed. I like to be on the latest LTS version.

Start by cloning the RevealJS repo from Github, installing the dependencies, then run the dev server:

At this point, you should be able to navigate to http://0.0.0.0:8000 and view the simple presentation that comes with the repo. Use the left/right arrow keys to navigate back and forth, or click on the caret icons displayed on the bottom of the slide. As you navigate the slides, notice the url changes, eg: http://0.0.0.0:8000/#/1 and a blue progress bar animates across the bottom of the page. All these features are configurable as we'll learn later.

Now we're ready to start building the presentation.

Open the demo-presentation project (or whatever you called it in the Getting Started step earlier) in your editor of choice. I'll be using VS Code.

Open the file index.html - this is where you'll be making the majority of changes. The entire presentation is contained in a div with a class of slides , which is contained in another div with a class of reveal . Each <section>content...</section> element denotes a slide.

Right now it looks as follows:

Delete the two <section> elements that came with the repo, and replace them with some content as shown below:

As soon as you save the changes, the presentation should refresh in the browser. The auto-refresh feature is provided by the development server that comes with the project. At this point, there are still two slides but the content has changed. Notice the default styles that get applied for <h1> , <h2> , and <p> elements. Don't worry if you don't exactly like these styles, everything's customizable.

Also notice how everything is centered and pleasing to look at. Try resizing the browser window or use Device Mode in Chrome devtools. Mobile/responsive design is already built into the presentation styles, nice!

Vertical Slides

Generally a presentation progresses linearly from left to right across each slide. But sometimes, the content needs to go off on a tangent, say to explain some point in more detail before moving on with the rest of the presentation. Vertical slides are a great way to organize this type of content. To try this out, nest a <section> element inside another element like this:

Save the changes, then navigate to the third slide in the presentation. Notice there's now a down caret in addition to the left pointing caret. Click it (or press the down arrow), the slides will now start to transition according to the nested <section> elements. This only works one level deep, do not try to nest any deeper. At any point the usual left/right key or arrow navigation still works to move to the previous or next slides.

With a lot of vertical slides, it can be useful to jump out and get a bird's eye view of the entire presentation. To do this, press the o key from any slide. It should look something like this:

Press the esc key to return to regular slide mode.

To add images to the presentation, make an images directory in the project root and place any image(s) you'd like in this directory. Then simply use the standard html <img> tag to display the image centered in the slide, don't forget the alt tag:

Note: The framework is not opinionated about where the images are placed so feel free to name this directory anything you like or even to place the images in project root if there's not too many of them.

Of course you can also simply link to an image from the internet, for example:

Full Screen Background

By default, all the slide content is contained within a portion of the screen to fit any display and scale. But if you want to break outside of this container to use up the entire background, this can be done with the data-background attribute on any <section> element.

For example, to have an animated gif take up the entire slide:

Animate in Visibility

Fragments are used to animate content in a slide, one element at a time. This is useful when you don't want all the content to show up at once. A classic example is a bullet point list where you want to talk to each point one at a time. To add visibility animation to any element, simply add class="fragment" .

For example:

Use the left/right arrow keys to have the elements animate in, or click on the caret icon at the bottom of the presentation.

By default, fragments will animate in the same order that they appear in the DOM. The order can be controlled by adding data-fragment-index to any element that has a class="fragment" . For example, to display a list in reverse order:

The default animation is for elements to fade in. But there are a number of other animations available such as fade up, down, left, right, changing color etc. To use these other effects, add the appropriate class to the fragment. For example:

The RevealJS docs list all the possible fragment animation classes .

The framework comes with a lot of built in styles for headers, paragraphs, lists etc. It's possible to customize any of these by adding the data-state attribute to any <section> element.

The data-state attribute causes the value, in this example my-style to be added as a class on the <body> element. This allows for overriding of the framework styles by using a selector such as .my-style p .

One thing I couldn't find in the docs was where to place custom styles. The quickest way for now is to add a file in the dist dir such as dist/custom.css and then add a link to it in the <head> section of index.html , after all the framework css is loaded:

Now edit custom.css - adding a class for the value in data-state , for example, to make the paragraph text bright pink and pop out:

Speaker Notes

One really helpful feature when giving a talk is the ability to have speaker notes displayed in a separate window from the presentation. RevealJS makes it easy to add these. Add an <aside class="notes"> element anywhere in a <section> element (i.e. slide), then that content will not be displayed in the slide, for example:

From the browser where the presentation is being displayed, press s to reveal the speaker notes in a new browser window. This window also conveniently has a timer, and displays the current and upcoming slide to help keep you on track. It looks something like this:

By now you'll have noticed there's some common styling applied to all the slides such as a black background and blocky white text. These styles come from the black theme stylesheet that is referenced in the head section of index.html :

This can be changed to any of the built-in themes RevealJS comes with, which are listed in the dist/theme directory. To change, simply swap out black.css for any other theme, for example, I like moon theme, which has a dark blue background and thick grey text:

Here's one of the slides from our presentation now with moon theme applied:

It's also possible to create a custom theme .

Slide Transitions

Up until now, we've been dealing with the HTML and CSS. But to further customize the presentation, there's a <script> section at the bottom of index.html where the framework gets initialized. Here you can control many features of how the presentation will behave. For example, by default, the slides transition with a slide animation going from right to left. This can be changed by specifying the transition property of the object passed to the Reveal.initialize function.

For example, to use a convex transition:

Further Customization

Besides slide transitions, many more features of the framework can be controlled through configuration. Just to list a few examples:

Read about all the configuration options in the RevealJS docs.

Publish to Github Pages

It's time to share our presentation with the world. To do this, we'll use Github Pages , which is free static web site hosting provided by Github. In order to do this, we need to create a new git repository with a branch named gh-pages , then create a corresponding repository on Github, and push the project files to this branch.

Start in a terminal at the project root and run the following commands:

Now login to your Github account and create a new repository. At the time of this writing, the new repo menu button is located at the top right of the Github landing page, given that you're logged in:

Make the repository name the same as your project. For example, mine will is demo-presentation . Optionally add a description. Make sure Public option is checked. Leave all the other checkboxes blank because we're going to be pushing up the project files in the next step:

Now, Github will display a page with instructions for how to push your code up, normally you could just copy paste this, but that will create a default main branch. This case is a little different because we want gh-pages branch for static hosting. Run the following replacing yourGithubUserName and your-repo-name :

After the push has completed, go back to Github in your browser and refresh the project page. The code you just pushed should be displayed.

And now, to finally see your presentation published on the web, click on Settings from your repository page:

Then scroll down to the "GitHub Pages" section. It should show something like the following:

Go ahead and click on the "Your site is published at" link. The presentation is now publicly available at that url, which in general will look like https://yourGithubUserName.github.io/your-repo-name/ .

Of course you're not limited to Github Pages for deployment. Since the project is just html, css, and javascript, it can be deployed to any static web site host.

This post has just barely scratched the surface of all the features that RevealJS provides. Checkout the documentation to learn more about it. There's also a rich ecosystem of plugins in case you need some behavior that's not provided by the framework. I hope you'll give this a try next time you're giving a talk and good luck with your presentation!

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Point of View

Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

If you don't like writing slides in HTML you can use the online editor rvl.io .

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Reveal.js comes with a few themes built in: Sky - Beige - Simple - Serif - Night - Default

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

Use data-fragment-index to control the order.

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

Source code on GitHub
Leave feedback on my site
Follow me on Twitter

reveal.js and rvl.io are entirely free but if you'd like to support the projects you can donate below. Donations will go towards hosting and domain costs.

BY Hakim El Hattab / hakim.se

About Harlepengren
Gravity’s Symphony: a Marble Run Journey
Open Shading Language Resources

A Beginner’s Guide to Using Reveal.js for Presentations

Introduction.

In our last post , we talked about FullPageOS. FullPageOS is designed to immediately boot into Chromium. With this approach, you can set up a Raspberry Pi to show one or more slides. If you’re looking to create dynamic and interactive presentations, Reveal.js is an excellent tool to consider. Reveal.js is a powerful JavaScript framework that allows you to build stunning presentations using HTML, CSS, and JavaScript. In this tutorial, we will guide you through the process of using Reveal.js to create engaging presentations that will captivate your audience. If you are interested in a more advanced use of Reveal.js, check out how we used Reveal to create a dynamic presentation .

Setting Up Reveal.js

Start by downloading the latest version of Reveal.js from the official GitHub repository . This repository has everything you need to get started.

I created a new folder called “test” and copied index.html as well as the folders dist, css, and plugin. The file, index.html, contains a template structure for the presentation. You can modify the <div class=”slides”> section to create your slides. Each <section> element represents a slide. You add headings, paragraphs, images, and other HTML elements within the <section> tags. For example, we created two slides:

Customizing Your Presentation in Reveal.js

Reveal.js offers many options for customizing your slides. We are going to cover three areas here:

Slide Themes

Configuration Options

Slide Transitions

Reveal.js offers several built in themes https://revealjs.com/themes/ . In the dist folder, there is a subfolder that includes the themes. We can simply set the stylesheet to the desired theme through the following code.

For me, the size of the font (40px) was a little large, so I added the following style code to the header to override the stylesheet font size.

Slide Configuration

The second area of customization is the configuration of how the slides and the controls are presented. These options can be adjusted in the the reveal.Initialize() section of the code. For example, the code below removes the slide tutorial (basically the arrow bouncing so the user knows that it is there), moves the arrows to the edge instead of the bottom, and adds a slide progress indicator.

Below is a chart with the different options:

Configuration	Description	Options
controls	Show the control arrows	true/false
controlsTutorial	Give the user hints about the controls (e.g., calling attention to the arrows by bouncing the arrows)	true/false
controlsLayout	Place the arrows either on the edges or at the bottom right.	‘bottom-right’‘edges’
controlsBackArrows	How to display the back arrow.	‘faded’‘hidden’‘visible’
slideNumber	Whether to display the current slide number. In addition, this can be formatted. For example ‘c/t’ shows current slide and total number of slides.	true/false‘c/t’
showSlideNumber	When to show the slide numbers.	‘all’‘print’‘speaker’
progress	Shows a progress bar.	true/false
loop	Loop the presentation	true/false
shuffle	Shuffles the order of slides.	true/false
autoPlayMedia	Determines whether media should be autoplayed.	true/false
autoAnimate	Enable or disable autoanimation. Note you still need to add data-auto-animateTo each slide you want to animate (both from and to slides).	true/false
autoAnimateEasing	The style of the autoanimation.	“ease”
autoAnimateDuration	How long the autoanimation should occur.	number
autoAnimateStyles	List of style elements that can be animated.	[ ‘opacity’, ‘color’, ‘background-color’, ‘padding’, ‘font-size’, ‘line-height’, ‘letter-spacing’, ‘border-width’, ‘border-color’, ‘border-radius’, ‘outline’, ‘outline-offset’ ]
transition	Type of transition when moving to the next slide. This can be overridden for individual slides (see slide transitions below).	none, fade, slide, convex, concave, zoom
autoSlide	Automatically move to the next slide. You can override individual slides by setting data-autoslide in the slide section tags.	Number in milliseconds. For example 1000 is one second.

Here is example code.

Here are example slides that show the autoAnimate transition:

You can also implicitly animate the position of text. For example:

In the previous section, we showed how to enable slide transitions in the configuration. However, you can also adjust in each slide by adding a data-transition element to each slide with the animation type. In addition, you can add data-transition-speed to control the speed of the change. For example, the following slide would zoom:

Code and Math in Reveal.js

Reveal.js offers built in features for including both code and math in your presentation.

For code, reveal.js includes highlight.js as a plugin. This allows you to use a code header followed by your code. I won’t go into detail on this plugin here (maybe a future post). For now, you can check out the highlight.js website .

Reveal.js also includes a math plugin that allows you to display mathematical equations. You can choose among multiple different math typesetters, including: KaTeX or MathJax.

Advanced Features in Reveal.js

Reveal.js offers many advanced features, such as vertical slides, speaker notes, fragments, and more.

Vertical slides allow you to create nested slides within a horizontal slide, providing a hierarchical structure to your presentation. Personally, I like the idea of being able to organize the presentation in this way.
Speaker notes allow you to add additional information or reminders that are visible only to the presenter.
Fragments enable you to animate elements on a slide, revealing them incrementally.
Through the markdown plugin , you can format the content of the slide using markdown.

You have learned the basics of using Reveal.js to create interactive and captivating presentations. By leveraging HTML, CSS, and JavaScript, you can customize your presentations, add advanced features, and engage your audience like never before. As you delve deeper into Reveal.js, explore its rich documentation and experiment with the available options to create visually stunning and interactive presentations. Happy presenting!

Perseverance: The Journey to Implement Our Amazing PicoGameSDK

A Journey to Creating a Micropython User Modules

How to Find Your First Programming Language

Creating Slick HTML Presentations Using reveal.js

Share this article

Setting Up reveal.js

Creating a presentation, transitions, markdown slide content, displaying source code, creating speaker notes, displaying math, deploying to heroku, frequently asked questions (faqs) about creating slick html presentations using reveal.js.

Doing presentations wasn’t something new. But this time it had to be special, we had competition. Presentations are a way to create an overall impression. And, to create an impression we needed something different and impressive. Unlike the traditional ways of doing presentations, (PowerPoint, etc.), we decided to do it different this time. That was when we bumped into reveal.js . reveal.js is a framework for creating beautiful presentations using HTML. It has a number of slick features like Markdown content, nested slides, PDF export, and JavaScript APIs for controlling the slide navigation. Presentations using reveal.js are written using HTML. There is also an interface for those who aren’t very tech savvy .

What is Reveal.js and how does it work?

Reveal.js is a powerful, open-source framework that allows you to create beautiful, interactive presentations using HTML. It works by allowing you to structure your slide content using HTML tags, and then applies its own CSS and JavaScript to transform that structure into a fully-featured presentation. This includes features like nested slides, markdown support, PDF export, speaker notes, and a JavaScript API for controlling the presentation.

How can I start using Reveal.js for my presentations?

To start using Reveal.js, you need to download the framework from the official GitHub repository. Once downloaded, you can start creating your presentation by editing the index.html file. You can add slides to your presentation by adding new section elements inside the div with class “slides”.

Can I use Reveal.js without any coding knowledge?

While Reveal.js is a tool that uses HTML, CSS, and JavaScript, you don’t necessarily need to be an expert in these languages to use it. Basic knowledge of HTML would be enough to create a simple presentation. However, to take full advantage of all the features Reveal.js offers, some understanding of CSS and JavaScript would be beneficial.

How can I add nested slides to my Reveal.js presentation?

Nested slides, or vertical slides, can be added to your Reveal.js presentation by adding a new section element inside an existing section. This creates a vertical stack of slides that can be navigated up and down, as opposed to the default horizontal navigation.

Is it possible to export my Reveal.js presentation to PDF?

Yes, Reveal.js supports exporting your presentation to PDF. This can be done by opening your presentation in Chrome and appending “?print-pdf” to the URL, then printing the page to PDF using Chrome’s print dialog.

How can I use markdown in my Reveal.js presentation?

Reveal.js supports markdown, allowing you to write your slides using this popular markup language. To use markdown in your presentation, you need to add a data-markdown attribute to your section element and write your content inside a script tag with type “text/template”.

Can I control my Reveal.js presentation programmatically?

Yes, Reveal.js provides a JavaScript API that allows you to control your presentation programmatically. This includes methods for navigating to specific slides, playing and pausing embedded media, and getting the current state of the presentation.

How can I add speaker notes to my Reveal.js presentation?

Speaker notes can be added to your Reveal.js presentation by adding an aside element with class “notes” inside your section element. These notes will be visible only to you during the presentation.

Can I customize the look and feel of my Reveal.js presentation?

Yes, Reveal.js allows you to customize the look and feel of your presentation by editing the CSS files included in the framework. You can change colors, fonts, transitions, and more to match your personal style or brand.

Is Reveal.js compatible with all browsers?

Reveal.js is compatible with all modern browsers. However, some features may not work as expected in older browsers or certain mobile browsers. It’s always a good idea to test your presentation in the browser you’ll be using to present.

Jay is a Software Engineer and Writer. He blogs occasionally at Code Handbook and Tech Illumination.

A framework for easily creating beautiful presentations using HTML. Check out the live demo .

reveal.js comes with a broad range of features including nested slides , Markdown contents , PDF export , speaker notes and a JavaScript API . There’s also a fully featured visual editor and platform for sharing reveal.js presentations at slides.com .

Online editor, element attributes, slide attributes, configuration, presentation size, dependencies, ready event, auto-sliding, keyboard bindings, touch navigation, lazy loading, slide changed event, presentation state, slide states, slide backgrounds, parallax background, slide transitions, internal links, fragment events, code syntax highlighting, slide number, overview mode, fullscreen mode, embedded media, stretching elements, postmessage api, share and print speaker notes, server side speaker notes, master presentation, client presentation, socket.io server, basic setup, folder structure, more reading.

Changelog : Up-to-date version history.
Examples : Presentations created with reveal.js, add your own!
Browser Support : Explanation of browser support and fallbacks.
Plugins : A list of plugins that can be used to extend reveal.js.

Presentations are written using HTML or Markdown but there’s also an online editor for those of you who prefer a graphical interface. Give it a try at https://slides.com .

Instructions

Here’s a barebones example of a fully working reveal.js presentation:

The presentation markup hierarchy needs to be .reveal > .slides > section where the section represents one slide and can be repeated indefinitely. If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the “root” of the others (at the top), and will be included in the horizontal sequence. For example:

It’s possible to write your slides using Markdown. To enable Markdown, add the data-markdown attribute to your <section> elements and wrap the contents in a <textarea data-template> like the example below. You’ll also need to add the plugin/markdown/marked.js and plugin/markdown/markdown.js scripts (in that order) to your HTML file.

This is based on data-markdown from Paul Irish modified to use marked to support GitHub Flavored Markdown . Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

External Markdown

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 note: ). The data-charset attribute is optional and specifies which charset to use when loading the external file.

When used locally, this feature requires that reveal.js runs from a local web server . The following example customises all available options:

Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.

Special syntax (in html comment) is available for adding attributes to the slide <section> elements generated by your Markdown.

Configuring marked

We use marked to parse Markdown. To customise marked’s rendering, you can pass in options when configuring Reveal :

At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.

The configuration can be updated after initialization using the configure method:

All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.

See below for a list of configuration options related to sizing, including default values:

If you wish to disable this behavior and do your own scaling (e.g. using media queries), try these settings:

Reveal.js doesn’t rely on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:

You can add your own extensions using the same syntax. The following properties are available for each dependency object:

src : Path to the script to load
async : [optional] Flags if the script should load after reveal.js has started, defaults to false
callback : [optional] Function to execute when the script has loaded
condition : [optional] Function which must return true for the script to be loaded

To load these dependencies, reveal.js requires head.js (a script loading library) to be loaded before reveal.js.

A ‘ready’ event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already ‘ready’ you can call Reveal.isReady() .

Note that we also add a .ready class to the .reveal element so that you can hook into this with CSS.

Presentations can be configured to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides:

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 also override the slide duration for individual slides and fragments by using the data-autoslide attribute:

To override the method used for navigation when auto-sliding, you can specify the autoSlideMethod setting. To only navigate along the top layer and ignore vertical slides, set this to Reveal.navigateRight .

Whenever the auto-slide mode is resumed or paused the autoslideresumed and autoslidepaused events are fired.

If you’re unhappy with any of the default keyboard bindings you can override them using the keyboard config option:

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.

If there’s some part of your content that needs to remain accessible to touch events you’ll need to highlight this by adding a data-prevent-swipe attribute to the element. One common example where this is useful is elements that need to be scrolled.

When working on presentation with a lot of media or iframe content it’s important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the viewDistance configuration option.

To enable lazy loading all you need to do is change your “src” attributes to “data-src” as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible.

The Reveal object exposes a JavaScript API for controlling navigation and reading state:

A ‘slidechanged’ event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.

Some libraries, like MathJax (see #226 ), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.

The presentation’s current state can be fetched by using the getState method. A state object contains all of the information required to put the presentation back as it was when getState was first called. Sort of like a snapshot. It’s a simple object that can easily be stringified and persisted or sent over the wire.

If you set data-state="somestate" on a slide <section> , “somestate” will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.

Furthermore you can also listen to these changes in state via JavaScript:

Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a data-background attribute to your <section> elements. Four different types of backgrounds are supported: color, image, video and iframe.

Color Backgrounds

All CSS color formats are supported, like rgba() or hsl().

Image Backgrounds

By default, background images are resized to cover the full page. Available options:

Video Backgrounds

Automatically plays a full size video behind the slide.

Attribute	Default	Description
data-background-video		A single video source, or a comma separated list of video sources.
data-background-video-loop	false	Flags if the video should play repeatedly.
data-background-video-muted	false	Flags if the audio should be muted.
data-background-size	cover	Use for full screen and some cropping or for letterboxing.

Iframe Backgrounds

Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it’s not possible to interact with it by default. To make your background interactive, you can add the data-background-interactive attribute.

Background Transitions

Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing backgroundTransition: 'slide' to the Reveal.initialize() call. Alternatively you can set data-background-transition on any section with a background to override that specific transition.

If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional).

Make sure that the background size is much bigger than screen size to allow for some scrolling. View example .

The global presentation transition is set using the transition config value. You can override the global transition for a specific slide by using the data-transition attribute:

You can also use different in and out transitions for the same slide:

It’s easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute ( <section id="some-slide"> ):

You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an enabled class when it’s a valid navigation route based on the current slide.

Fragments are used to highlight individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide. Here’s an example: http://revealjs.com/#/fragments

The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:

Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second.

The display order of fragments can be controlled using the data-fragment-index attribute.

When a slide fragment is either shown or hidden reveal.js will dispatch an event.

Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback.

By default, Reveal is configured with highlight.js for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the data-trim attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using <mark> to call out a line of code, add the data-noescape attribute to the <code> element.

If you would like to display the page number of the current slide you can do so using the slideNumber and showSlideNumber configuration values.

Press “Esc” or “o” keys to toggle the overview mode on and off. While you’re in this mode, you can still navigate between slides, as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:

Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.

Add data-autoplay to your media element if you want it to automatically start playing when the slide is shown:

If you want to enable or disable autoplay globally, for all embedded media, you can use the autoPlayMedia configuration option. If you set this to true ALL media will autoplay regardless of individual data-autoplay attributes. If you initialize with autoPlayMedia: false NO media will autoplay.

Note that embedded HTML5 <video> / <audio> and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a data-ignore attribute.

Embedded iframes

reveal.js automatically pushes two post messages to embedded iframes. slide:start when the slide containing the iframe is made visible and slide:stop when it is hidden.

Sometimes it’s desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide. This can be done by adding the .stretch class to an element as seen below:

Limitations:

Only direct descendants of a slide section can be stretched
Only one descendant per slide section can be stretched

The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here’s an example showing how you’d make a reveal.js instance in the given window proceed to slide 2:

When reveal.js runs inside of an iframe it can optionally bubble all of its events to the parent. Bubbled events are stringified JSON with three fields: namespace, eventName and state. Here’s how you subscribe to them from the parent window:

This cross-window messaging can be toggled on or off using configuration flags.

Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use Google Chrome or Chromium and to be serving the presentation from a webserver. Here’s an example of an exported presentation that’s been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.

Export dimensions are inferred from the configured presentation size . Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the pdfMaxPagesPerSlide config option, for example Reveal.configure({ pdfMaxPagesPerSlide: 1 }) ensures that no slide ever grows to more than one printed page.

Print stylesheet

To enable the PDF print capability in your presentation, the special print stylesheet at /css/print/pdf.css must be loaded. The default index.html file handles this for you when print-pdf is included in the query string. If you’re using a different HTML template, you can add this to your HEAD:

If you want to include speaker notes in your export, you can append showNotes=true to the query string: http://localhost:8000/?print-pdf&showNotes=true
Open the in-browser print dialog (CTRL/CMD+P).
Change the Destination setting to Save as PDF .
Change the Layout to Landscape .
Change the Margins to None .
Enable the Background graphics option.
Click Save .

Alternatively you can use the decktape project.

The framework comes with a few different themes included:

black: Black background, white text, blue links (default theme)
white: White background, black text, blue links
league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0)
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

Each theme is available as a separate stylesheet. To change theme you will need to replace black below with your desired theme name in index.html:

If you want to add a theme of your own see the instructions here: /css/theme/README.md .

Speaker Notes

reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven’t written any notes. Press the ‘s’ key on your keyboard to open the notes window.

A speaker timer starts as soon as the speaker view is opened. You can reset it to 00:00:00 at any time by simply clicking/tapping on it.

Notes are defined by appending an <aside> element to a slide as seen below. You can add the data-markdown attribute to the aside element if you prefer writing notes using Markdown.

Alternatively you can add your notes in a data-notes attribute on the slide. Like <section data-notes="Something important"></section> .

When used locally, this feature requires that reveal.js runs from a local web server .

If you’re using the external Markdown plugin, you can add notes with the help of a special delimiter:

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 config value set to true . Notes will appear along the bottom of the presentations.

When showNotes is enabled notes are also included when you export to PDF . By default, notes are printed in a semi-transparent box on top of the slide. If you’d rather print them on a separate page after the slide, set showNotes: "separate-page" .

Speaker notes clock and timers

The speaker notes window will also show:

Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear.
Current wall-clock time
(Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in red) or has the luxury of slowing down (blue).

The pacing timer can be enabled by configuring by the defaultTiming parameter in the Reveal configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide <section> by setting the data-timing attribute. Both values are in numbers of seconds.

In some cases it can be desirable to run notes on a separate device from the one you’re presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies:

Install Node.js (4.0.0 or later)

Run npm install
Run node plugin/notes-server

Multiplexing

The multiplex plugin allows your audience to view the slides of the presentation you are controlling on their own phone, tablet or laptop. As the master presentation navigates the slides, all client presentations will update in real time. See a demo at https://reveal-js-multiplex-ccjbegmaii.now.sh/ .

The multiplex plugin needs the following 3 things to operate:

Master presentation that has control
Client presentations that follow the master
Socket.io server to broadcast events from the master to the clients

More details:

Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter’s) computer. (It’s safer to run the master presentation from your own computer, so if the venue’s Internet goes down it doesn’t stop the show.) An example would be to execute the following commands in the directory of your master presentation:

npm install node-static

If you want to use the speaker notes plugin with your master presentation then make sure you have the speaker notes plugin configured correctly along with the configuration shown below, then execute node plugin/notes-server in the directory of your master presentation. The configuration below will cause it to connect to the socket.io server as a master, as well as launch your speaker-notes/static-file server.

You can then access your master presentation at http://localhost:1947

Example configuration:

Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via http://example.com/path/to/presentation/client/index.html , with the configuration below causing them to connect to the socket.io server as clients.

Server that receives the slideChanged events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands:

npm install
node plugin/multiplex

Or you can use the socket.io server at https://reveal-js-multiplex-ccjbegmaii.now.sh/ .

You’ll need to generate a unique secret and token pair for your master and client presentations. To do so, visit http://example.com/token , where http://example.com is the location of your socket.io server. Or if you’re going to use the socket.io server at https://reveal-js-multiplex-ccjbegmaii.now.sh/ , visit https://reveal-js-multiplex-ccjbegmaii.now.sh/token .

You are very welcome to point your presentations at the Socket.io server running at https://reveal-js-multiplex-ccjbegmaii.now.sh/ , but availability and stability are not guaranteed.

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 .

socket.io server as file static server

The socket.io server can play the role of static file server for your client presentation, as in the example at https://reveal-js-multiplex-ccjbegmaii.now.sh/ . (Open https://reveal-js-multiplex-ccjbegmaii.now.sh/ in two browsers. Navigate through the slides on one, and the other will update to match.)

It can also play the role of static file server for your master presentation and client presentations at the same time (as long as you don’t want to use speaker notes). (Open https://reveal-js-multiplex-ccjbegmaii.now.sh/ in two browsers. Navigate through the slides on one, and the other will update to match. Navigate through the slides on the second, and the first will update to match.) This is probably not desirable, because you don’t want your audience to mess with your slides while you’re presenting. ;)

If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the MathJax library. To use it you’ll need to include it as a reveal.js dependency, find our more about dependencies here .

The plugin defaults to using LaTeX but that can be adjusted through the math configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you’ll need to download a copy of the library and adjust the mathjax configuration value.

Below is an example of how the plugin can be configured. If you don’t intend to change these values you do not need to include the math config object at all.

Read MathJax’s documentation if you need HTTPS delivery or serving of specific versions for stability.

Installation

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.

The core of reveal.js is very easy to install. You’ll simply need to download a copy of this repository and open the index.html file directly in your browser.

Download the latest version of reveal.js from https://github.com/hakimel/reveal.js/releases

Unzip and replace the example contents in index.html with your own

Open index.html in a browser to view it

Some reveal.js features, like external Markdown and speaker notes, 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.

Clone the reveal.js repository $ git clone https://github.com/hakimel/reveal.js.git
Navigate to the reveal.js folder $ cd reveal.js
Install dependencies $ npm install
Serve the presentation and monitor source files for changes $ npm start

Open http://localhost:8000 to view your presentation

You can change the port by using npm start -- --port=8001 .

css/ Core styles without which the project does not function
js/ Like above but for JavaScript
plugin/ Components that have been developed as extensions to reveal.js
lib/ All other third party assets (JavaScript, CSS, fonts)

MIT licensed

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Point of View

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

reveal.js comes with a few themes built in: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Marvelous List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Tabular Tables

Item	Value	Quantity
Apples	$1	7
Lemonade	$2	18
Bread	$3	2

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Right-to-left support
Extensive JavaScript API
Auto-progression
Parallax backgrounds
Custom keyboard bindings

- Try the online editor - Source code & documentation

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Point of View

Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

If you don't like writing slides in HTML you can use the online editor rvl.io .

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - None - Default

Reveal.js comes with a few themes built in: Sky - Beige - Simple - Serif - Night - Default

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

Global State

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.

Pretty Code

Courtesy of highlight.js .

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen during a presentation.

Stellar Links

Source code on GitHub
Leave feedback on my site
Follow me on Twitter

reveal.js and rvl.io are entirely free but if you'd like to support the projects you can donate below. Donations will go towards hosting and domain costs.

BY Hakim El Hattab / hakim.se

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

📽️ Create rich HTML-based presentations with Hugo and Reveal.js

joshed-io/reveal-hugo

Folders and files.

Name		Name
347 Commits

reveal-js/dist		reveal-js/dist

Repository files navigation

Reveal-hugo.

A Hugo theme for Reveal.js that makes authoring and customization a breeze. With it, you can turn any properly-formatted Hugo content into a HTML presentation.

⚠️ The latest version of this theme requires hugo version >= v0.93.0. If you need compatibility with an earlier version, try a previous release.

Using reveal-hugo, presentations with multiple slides can be created with just one markdown file, like so:

Just use --- surrounded by blank lines to split content into different slides.

Documentation

Visit reveal-hugo.dzello.com to see a presentation created with this theme and learn about all of the different functionality available to you.

For a full-length blog post about reveal-hugo, checkout Harness the Power of Static Site Generators to Create Presentations on the Forestry.io blog .

Jump to the exampleSite folder in this repository to see the source code for the above presentation and several more. Here are links to those presentations live:

logo-example - Shows how to add a logo to your presentation
custom-theme-example - Uses Hugo pipes to compile and use a custom Reveal.js SCSS theme (recommended!)
section-example - Very basic example that shows how to create a presentation for a Hugo section
plugin-example - Shows how to add additional Reveal.js plugins to your presentation, for example an image gallery
template-example - An example of using the slide shortcode with powerful templates
bundle-example - An example of creating a presentation from one or more markdown files in a leaf bundle
hugo-hl-example - An example of using Hugo's compile-time syntax highlighter
highlightjs-linenumbers-example - An example of using the multiline and multi-step capabilities of highlight.js
blank Reveal-Hugo template - A templated skeleton site to get started quickly

Starter repository

If you want to start creating a presentation right away, clone the programming-quotes repository and start hacking.

Tutorial: Create your first presentation

You should be able to complete this section with no prior knowledge of Hugo or Reveal.js. At the end, you'll have a working presentation with instant reloading.

Create a hugo skeleton site

To start, install Hugo and create a new Hugo site:

Change into the directory of the new site:

Initialize a git repository:

Get the reveal-hugo theme

Method 1 (recommended): use theme as hugo module.

Turn your new skeleton site into a hugo module by issuing this command from site root:

Declare the reveal-hugo theme module as a dependency of your site:

Open hugo.toml and add the following line:

Method 2 (traditional): use theme as git submodule

Add the reveal-hugo theme as a submodule in the themes directory:

Configure your presentation

Add some more contents to your hugo.toml :

This tells Hugo to use the reveal-hugo theme and it registers a new output format called "Reveal".

Next, create a file in content/_index.md and add the following:

Back on the command line, run:

Navigate to http://localhost:1313/ and you should see your presentation.

To add more slides, just add content to _index.md or create new markdown files in content/home . Remember that each slide must be separated by --- with blank lines above and below.

Cloning an existing repository (method 2 only)

If you have an existing repository that was setup with the above steps, you have to pull in the theme submodule after cloning your repository using the following command:

Theme update (method 1 only)

When making use of reveal-hugo theme as hugo module, updating your theme is really easy:

At the command prompt, change to the root directory of your existing site.

Then invoke hugo's module get subcommand with the update flag -u :

Hugo will automatically pull in the latest theme version. That's it, your update is done!

The Usage guide is contained in the example presentation that lives in this repository in the exampleSite directory. You can access a live version at reveal-hugo.dzello.com .

Root vs. section presentations

Here's what the folder structure would look like with one root presentation and one section presentation.

This will create two presentations, one at / and one at /ted-talk/ . The order that slides are appended to each can be controlled by the weight parameter specified in each file's front matter. The slides in _index.md will always come first, though you don't have to put any slides in there if you want to.

reveal-hugo comes with a variety of shortcodes that help you take advantage of some very useful Reveal.js features.

fragment shortcode

Wrap any content in the fragment shortcode and it will appear incrementally. Great for bulleted lists where you want one bullet point at a a time to appear.

frag shortcode

Like fragment but more terse - content is placed inline in a self-closing shortcode.

slide shortcode

The slide shortcode lets you set custom HTML and Reveal.js attributes for each slide - things like id, class, transition, background just to name a few. The names are the same as Reveal.js but without the 'data-' prefix.

Add the shortcode above the slide content, below the --- separator. Do not place content inside of the shortcode.

Here's a list of documented slide attributes from the Reveal.js docs:

background-color
background-image
background-size
background-position
background-repeat
background-opacity (Opacity is on a 0-1 scale, by decimal. 0=transparent, 1=opaque.)
background-video
background-video-loop
background-video-muted
background-interactive
background-iframe
background-transition
transition (can have different in and out transitions)
transition-speed
notes (can also use the note shortcode)

Additional data attributes

Check MDN for information about how these attributes work.

data-background-image - URL of the image to show. GIFs restart when the slide opens.
data-background-size
data-background-position
data-background-repeat
data-background-opacity

You can also pass through your own, a data- prefix will be added automatically to each one (except for id and class ).

section shortcode

To create groups of slides that can be navigated vertically, surround your markdown with the section shortcode.

note shortcode

Add speaker notes for each slide with the note shortcode.

💡 Tip: you can also add notes by adding a note attribute to the slide shortcode.

markdown shortcode

Markdown surrounded by the markdown shortcode will not be rendered by Hugo but by Reveal.js itself. This is useful if you want to use some native Reveal.js markdown syntax that isn't supported by reveal-hugo.

Maths and equations (via MathJax )

Option 1: math code block.

You can author your equation inside a math code block :

Use of the code block will automatically activate needed MathJax script for equation display.

If you want to use inline equations (like $E=mc^2$ ) wrap your math content in two single-$:

If you want to use inline equations and no math code block for auto activation is present in your slides, you need to manually enable MathJax by setting the parameter math to true in your page frontmatter.

Option 2: math shortcode

Alternatively, you can author your equation inside a math shortcode :

Use of the shortcode will automatically activate needed MathJax script for equation display.

For inline equations (like $E=mc^2$ ) use the self closing form of the math shortcode:

For the sake of brevity, the inline content can be given as unnamed first shortcode parameter, as in the code fragment above. In a more concise form, the math content can also be assigned to a named shortcode parameter inline : {{< math inline="E=mc^2" />}} .

HTML slides

If you need to create fancier HTML for a slide than you can do with markdown, just add data-noprocess to the <section> element.

Reusable slides and sections

Sometimes you need to reuse a slide in the same presentation or across different presentations. reveal-hugo makes use of Hugo data templates to make both cases easy.

To create reusable slides, create a TOML (or JSON or YAML) file in your site's data directory. Give it a name that reflects its content or just slides.toml . In that file, add a key for each reusable slide. The name should reflect the slide's content and the value should be the slide's markdown.

💡 Tip: TOML's multiline string syntax comes in handy here, note the '''.

Each key can contain one or more slides separated by --- and newlines. That way you can create reusable sections.

To render a slide from a data template, use the slide shortcode with a content attribute:

The part before the "." is the name of the file in the data directory. The part after the dot is the key to look up in that file.

You can use all the additional slide shortcode attributes. They will be applied to every slide in the data template.

Configuration

Customize the Reveal.js presentation by setting these values in hugo.toml or the front matter of any presentation's _index.md file.

reveal_hugo.theme : The Reveal.js theme used; defaults to "black"
reveal_hugo.custom_theme : The path to a locally hosted Reveal.js theme in the static or assets folder
reveal_hugo.custom_theme_compile : If set to true, the theme will be compiled with Hugo pipes (and must live in the assets folder)
reveal_hugo.custom_theme_options : Provide a dictionary to customize theme compilation, see Hugo's SCSS docs for a list of options
reveal_hugo.highlight_theme : The highlight.js theme used; defaults to "default"
reveal_hugo.reveal_cdn : The location to load Reveal.js files from; defaults to the reveal-js folder in the static directory to support offline development. To load from a CDN instead, set this value to https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0 or whatever CDN you prefer.
reveal_hugo.highlight_cdn : The location to load highlight.js files from; defaults to to the highlight-js folder in the static directory to support offline development. To load from a CDN instead, set this value to https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0 or whatever CDN you prefer.
reveal_hugo.load_default_plugins : If set to true (default), the plugins included by default are loaded. These are markdown, highlight.js, notes and zoom.
reveal_hugo.plugins : (see below) An array of additional Reveal.js plugins to load. The appropriate files will need to have been copied into the static or content directory. See here for a big list of plugins you can try. The original implementation used to accept an array of javascript files (e.g. ["plugin/gallery/gallery.plugin.js"] ), but now reveal-hugo can fully load plugin javascript and css. To enable this mode, You need to provide an array of plugin definition objects with name , source and an optional css , verbatim and order fields. Reveal-hugo will try to load the plugins at the path specified by source . If verbatim=true is used, the path is tried as-is. Otherwise, the path is resolved from the content dir or static dir. Finally, the reveal_cdn is prepended to the path if no other conditions are satisfied. The order field controls the order of javascript loading and will seldomly used. See plugin-example for a plugin walkthrough.

This is how parameters will look in your hugo.toml :

Or in the front matter of an _index.md file:

Include any other attributes in those sections that you'd like to be fed as arguments to Reveal.initialize in snakecase , so slide_number instead of slideNumber . Params are converted from snakecase to camelcase before passing to Reveal.js. This is necessary to maintain the proper case of the parameters.

Here's an example of configuring Reveal.js parameters alongside a theme and highlight.js theme:

See the extensive list of Reveal.js configuration options here.

Syntax highlighting

Syntax highlighting can be done with Hugo at compile-time or using Reveal.js with the pre-installed highlight.js plugin. Presentations can use both if they wish for different pieces of code.

To do highlighting with Hugo, use the highlight shortcode and check out the hugo-hl-example example presentation.

To see an example of highlighting with Reveal.js, check out the highlightjs-linenumbers-example presentation.

By default, markdown code fences will be processed with Hugo. To turn that off, add this to your hugo.toml file:

Now, the code in the fences will be highlighted by highlight.js instead.

Custom Reveal.js themes

If you have a custom reveal theme to use (in .css form), place it in the static folder and specify it in the configuration. For example, if your css file lives here:

Then this is what you'll put in hugo.toml :

Compiling a custom Reveal.js theme with Hugo pipes

Reveal.js theme customization is easiest to do by overriding variables in the SCSS or PostCSS build process. You can take advantage of Hugo pipes to do the theme compilation. In this case, your SCSS, Saas or PostCSS file needs to live in assets:

If you just wanted to change the presentation colors, here's what you might put in custom-theme.scss :

To learn more about Reveal.js theme customization, check out the Reveal.js theme docs .

This is what the front matter would look like:

You can also add options that will be passed to Hugo's toCSS method :

Check out the custom-theme-example presentation to see a working example.

Adding HTML to the layout

If you need to add something to the HTML layout, you can create partials that live at specific locations, depending on which presentation you want to customize and where you want the HTML inserted into the page.

Presentation	Before </head>	Before </body>	Before closing </div> of
All	reveal-hugo/head.html	reveal-hugo/body.html	reveal-hugo/end.html
Root	home/reveal-hugo/head.html	home/reveal-hugo/body.html	home/reveal-hugo/end.html
Section	{section}/reveal-hugo/head.html	{section}/reveal-hugo/body.html	{section}/reveal-hugo/end.html

This is the recommended way to add custom CSS and JavaScript to each presentation.

💡 Tip: In Hugo, partials live in the layouts folder: For example, if you have HTML that is to be placed before every presentation, this would be the structure: - layouts - partials - reveal-hugo - head.html - body.html - end.html

Offline development

Offline-friendly development is the default. The Reveal.js and Highlight.js files are loaded from the static directory by default. (See above for how to use a CDN instead). If you need file:/// URLs to work, make sure to set relativeURLs and uglyURLs in your hugo.toml .

Note: uglyURLs isn't strictly required, but it is useful if you're loading against the filesystem as it makes sure that all URLs end in .html and links point directly at them instead of to a folder.

Tutorial: Add a Reveal.js presentation to an existing Hugo site

If your Hugo site already has a theme but you'd like to create a presentation from some of its content, that's very easy.

On your site root, check for the existence of a file go.mod which marks your site as hugo module. If this file is not present yet, create it by issuing this command from site root:

Open hugo.toml , look for the line theme = ... and add reveal-hugo to your site's array of themes :

Note: Use of Hugo versions below 0.42

With hugo < v0.42, you have to manually copy a few files out of this theme into a few of your site's directories:

Files and directories are named such that they shouldn't conflict with your existing content. Of course, you should double check before copying, especially the shortcodes which can't be put under a directory.

Configure your site for presentations

Next, add the Reveal output format to your site's hugo.toml file

Now you can add outputs = ["Reveal"] to the front matter of any section's _index.md file and that section's content will be combined into a presentation and written to index.html . If you already have a index.html page for that section, just change the baseName above to reveal and the presentation will be placed in a reveal.html file instead.

Note: If you specify outputs = ["Reveal"] for a single content file, you can prevent anything being generated for that file. This is handy if you other default layouts that would have created a regular HTML file from it. Only the list file is required for the presentation.

Create a presentation from a leaf bundle or single page type

By default, reveal-hugo doesn't create presentations for single pages (i.e. pages other than _index.md ) as it assumes those pages are pieces of a larger presentation in the section starting with _index.md . This might not be the case if your content is structured in a leaf bundle (the main file is then index.md with no underscore, which Hugo treats as a single page) or if you just want to put a presentation in a single file, say presentation.md . In these cases, you just need to tell Hugo to use a different layout.

If you're using a leaf page bundle, set the following in the front matter of the index.md file:

If you're in a single page file like presentation.md , set the following in the front matter:

Create a page that lists out all presentations

See this issue for a template that you can use.

Reveal.js tips

These are some useful Reveal.js features and shortcuts.

's' - type 's' to enter speaker mode, which opens a separate window with a time and speaker notes
'o' - type 'o' to enter overview mode and scroll through slide thumbnails
'f' - type 'f' to go into full-screen mode

Here are a few useful Reveal.js-related tools:

decktape for exporting a presentation as a PDF
More revealjs themes including robot-lung and sunblind

Find many more on the Reveal.js wiki: Plugins, tools and hardware .

Implementations

Have you built something with reveal-hugo? Add a link to it here.

dzello's Paris Wedding Weekend Guide ( source )
DevOps Training ( source )
2018-08-03: The slide shortcode is now easier to use. An auto-closing version sits inside the slide instead of needing to surround its content and add a closing tag.

Contributing

Contributions are very welcome. See CONTRIBUTING.md for more details.

Code of conduct

Contributors 25.

JavaScript 46.6%

Newly released grand jury documents in Epstein case reveal alleged victims accused of prostitution

"They basically tanked their own case," an attorney for an alleged victim said.

A grand jury in Palm Beach County on July 19, 2006, heard from two alleged underage victims of Jeffrey Epstein , two police officers and an investigator with the state's attorney's office in a proceeding that lasted less than four hours, according to newly unsealed transcripts released by a judge in Florida.

During the testimony of the two alleged victims, each was confronted with questions about whether they understood that they had engaged in prostitution and could be charged with a crime, according to the newly released transcripts.

"It was just atrocious the way they handled it," said Spencer Kuvin, an attorney who represented one of the alleged underage victims who testified. "They basically tanked their own case."

The previously secret testimony was made public on Monday in response to a motion from the Palm Beach Post, joined by numerous other news agencies. Earlier this year, the Florida legislature passed a new law tailored to ensure that the Epstein documents were made public because of the intense public interest in understanding how the grand jury returned an indictment of Epstein on just a single charge of solicitation of prostitution. The transcript of the grand jury proceedings, however, does not indicate what charging options were presented to grand jurors before they reached their decision.

MORE: Hunter Biden sues Fox News over fictional miniseries

The grand jury was convened in 2006 by then State's Attorney Barry Krischer, who had for months resisted efforts by the Palm Beach Police Department to charge Epstein with multiple felonies for his alleged sexual exploitation of underage girls.

The opening witness before the grand jury was Palm Beach Police Detective Joseph Recarey, who led the investigation of Epstein and interviewed more than a dozen alleged underage victims. Recarey recounted the onset of the investigation when the stepmother of a 14-year-old girl reported that her daughter had received $300 to massage an older man on Palm Beach Island.

Prosecutors then called that teen girl, who had since turned 15. She testified that she went once to Epstein's mansion the previous year. She said she was asked by Epstein's assistant to strip down to her underwear and to wait for Epstein to enter the room. She said she massaged Epstein and then, at his request, agreed to allow him to use a vibrator on her for an extra $100. She admitted that she lied and told Epstein that she was 18. Her parents found out about her trip to Epstein's, she said, because she had gotten into an altercation at school and the money was found in her purse.

During her testimony, prosecutors asked the girl about her drug and alcohol use, body piercings and postings on her MySpace page in which she boasted of shoplifting and lied about her age and her income, claiming to make $250,000. "Yeah, it's a joke," she testified. "Like, all my friends do that, cause it's kind of funny and random and stupid."

A juror then asked the witness if she had "any idea deep down inside of you that…what you're doing is wrong?"

"Yeah, I did," she answered.

"And you're well aware that what you're doing to your own reputation," the juror asked.

"Yes, I do," she recalled.

A prosecutor, Lanna Belohlavek, then asked the 15-year-old witness: "You aware that you committed a crime?"

"Now I am. I didn't know it was a crime when I was doing it," she replied. "Now, I guess it's prostitution or something like that."

Reading those exchanges on Monday, Kuvin -- who represented the witness during the Epstein investigation -- said he was appalled but not surprised.

"It just reaffirmed what we always knew was happening is that the state attorney was afraid to prosecute him, and that they tanked their own case by attacking their own witnesses during the grand jury proceeding," he said. "It was almost like the grand jury proceeding was an attempt to prosecute the teenagers and ignore Epstein."

In subsequent testimony, Detective Recarey, who died in 2018, recounted the now familiar deviant scheme in which Epstein enlisted his assistants and his alleged victims to recruit other underage girls to his homes for illicit massages. Recarey told the grand jury that two alleged victims had intercourse with Epstein without their consent while under the age of 18.

One alleged victim, Recarey testified, had gone to Epstein's mansion over 100 times, and had received $200 each time, and gifts, including a rented car for her use. He testified that on one occasion, Epstein had intercourse with her without her consent. "She screamed no," Recarey said when asked by a grand juror if the victim had asked Epstein to stop. Epstein stopped, apologized and paid her $1000, Recarey testified.

Belohlavek then questioned Recarey about the money the alleged victim made from all her visits to Epstein's home.

MORE: Hypothetical SEAL Team 6 political assassination resurfaces in Supreme Court presidential immunity dissent

"That day she took a thousand dollars. Let's say it's only $200 for a hundred times; she's – we're talking a lot of money she got, at a minimum, plus a car," the prosecutor said. "Did you ask her what she did with all that money?"

"I did ask her and she didn't want to tell me," Recarey replied. "She said that it was too personal."

"After you – she's just described all these sex acts to you? Okay," Belohlavek replied.

The only other alleged victim to testify before the grand jury said she went to Epstein's mansion about 10 times, starting when she was 16.

"He was well aware of my age from the very beginning," she said.

The sexual activity escalated gradually, she testified, until her last encounter when Epstein initiated intercourse. It was the day before her 18th birthday, she said. She testified that she did not want to have intercourse with him but did not ask him to stop.

The young girl said she was reluctant to testify and didn't really know if she wanted to see Epstein prosecuted.

"You understand that you in effect were committing prostitution yourself," a prosecutor asked.

"Yes," the witness replied.

The final witness of the day was an investigator with the state's attorney's office who was guided through testimony covering the backgrounds of the alleged teen victims, including shoplifting, arrests, drinking and drug use. The investigator was also questioned about the MySpace pages of the alleged 14-year-old victim. Much of that information had been provided to the prosecutor by Epstein's defense attorneys in an attempt to dissuade the office from bringing charges.

"And does her website also include pictures of her in skimpy attire, drinking alcohol and sexually provocative photos?" the witness was asked.

"Yes, ma'am," he replied.

Following this grand jury's indictment on one charge of solicitation of prostitution -- with no mention of minor victims -- Epstein was arrested, booked and released on bond. The outcome of the grand jury incensed then Palm Beach Police Chief Michael Reiter, who publicly apologized to the victims and turned over the case to the FBI. Two years later, federal prosecutors crafted a deal with Epstein that allowed him to escape federal prosecution in exchange for his guilty plea to the original grand jury indictment plus one additional charge of soliciting a minor into prostitution. He served 13 months of an 18-month sentence in a private wing of the Palm Beach County stockade. Epstein was also allowed liberal work release, which permitted him to spend up to 16 hours a day at his office in West Palm Beach.

Following Epstein's 2019 arrest in New York, Krischer pushed back on claims that his handling of the case more than a decade earlier had forced federal prosecutors to enter into that infamously lenient deal with Epstein.

"No matter how my office resolved the state charges, the U.S. Attorney's Office always had the ability to file its own federal charges," Krischer said in a statement at the time.

Groom shot in head by gunman during wedding

Jul 1, 7:56 PM

Simone Biles says husband will come to Paris

Jul 2, 9:26 AM

Pink shares video with daughter Willow

Jul 1, 5:26 PM

Pamela Anderson says she's 'happier than ever'

Jul 1, 4:03 PM

Top migraine medicine is hard to access

Jul 2, 5:28 AM

ABC News Live

24/7 coverage of breaking news and live events

SI SWIMSUIT

New Report Reveals Why Aaron Rodgers Missed Jets' Mandatory Minicamp

Tom dierberger | jul 1, 2024.

Aaron Rodgers stands on the sidelines during the Jets' loss to the Atlanta Falcons on Dec. 3.

New York Jets

Aaron Rodgers was the talk of the NFL last month when he missed the New York Jets ' mandatory minicamp with an unexcused absence .

Jets coach Robert Saleh confirmed Rodgers missing the practices were not excused.

“The second [absence] is Aaron,” Saleh said on June 11. “Aaron and I spoke before OTAs started, he’s been very good with communication, he’s been here the entire time. It’s unexcused, but he had an event that was very important to him, which he communicated.”

SNY's Connor Hughes reported Monday that Rodgers was absent for the practices due to a planned trip to Egypt.

"While an unexcused absence, the team is not concerned that this will impact Rodgers's season," Hughes reported. "They wanted him at minicamp but were understanding of how important this trip was for him."

Rodgers was present during the Jets' voluntary part of the offseason during organized team activities. He scheduled the trip to Egypt while rehabbing from a torn Achilles he suffered in Week 1 last season and initially believed those dates wouldn't overlap with New York's offseason program.

According to NFL reporter Andrew Siciliano, Rodgers was fined $101,716 for missing all three days of mandatory minicamp.

Rodgers, entering his 20th NFL season, is looking to lead the Jets to the postseason for the first time since 2010.

TOM DIERBERGER

Tom Dierberger is a writer and editor for the Breaking & Trending News Team at Sports Illustrated. Tom joined SI in 2023 after stints at FOX Sports, Bally Sports, and NBC Sports. In his spare time, Tom can be seen throwing out his arm while playing fetch with his dog, Walter B. Boy.

Follow tomdierberger

share this!

July 2, 2024

This article has been reviewed according to Science X's editorial process and policies . Editors have highlighted the following attributes while ensuring the content's credibility:

fact-checked

peer-reviewed publication

trusted source

Cutting down on seeds: Researchers reveal innovative watermelon breeding techniques

by NanJing Agricultural University

Cutting down on seeds: innovative watermelon breeding techniques revealed

In an agricultural advancement, scientists have deciphered the genetic underpinnings of watermelon chromosomal translocations, the key to cultivating fruits with fewer seeds.

The global demand for seedless watermelons has surged due to their appeal to consumers. Traditional methods, such as inducing triploidy, have led production but face significant challenges like low seed production, germination rates, and poor seedling establishment. Additionally, reliance on growth regulators raises environmental and health concerns.

Based on these challenges, alternative genetic techniques are needed to enhance seedless watermelon breeding. Chromosomal translocation offers a promising solution, potentially overcoming these obstacles and paving the way for more efficient and sustainable production practices.

A team of researchers from the Chinese Academy of Agricultural Sciences, in collaboration with the Beijing Academy of Agriculture and Forestry Science, published their findings on April 22, 2024, in Horticulture Research . The study focused on developing less-seed watermelon varieties through chromosomal translocation , utilizing advanced genome sequencing technologies and molecular markers.

The study analyzed three groups of chromosomal translocation materials from different sources to develop less-seed watermelons. Using third-generation genome sequencing and fluorescence in situ hybridization (FISH), researchers identified specific reciprocal translocations between chromosomes.

For instance, naturally mutated material MT-a showed translocations between Chr6 and Chr10, while radiation-induced mutants MT-b and MT-c involved translocations between Chr1 and Chr5, Chr4 and Chr8, and a complex translocation involving Chr1, Chr5, and Chr11. These translocations significantly reduced seed counts in hybrid fruits.

The researchers also developed molecular markers to efficiently identify these translocation lines. This approach provides a robust method for breeding less-seed watermelons without the use of growth regulators, offering a sustainable alternative to traditional seedless watermelon production methods and addressing key challenges in the industry.

Dr. Wenge Liu, the study's senior researcher, stated, "This breakthrough in understanding chromosomal translocations in watermelons opens new avenues for breeding less-seed varieties. The use of advanced sequencing technologies and molecular markers significantly enhances our ability to develop commercially viable seedless watermelons."

The findings of this study have significant implications for watermelon breeding. By utilizing chromosomal translocation techniques, breeders can overcome the limitations of traditional seedless watermelon production methods.

This research not only paves the way for more efficient breeding practices but also has the potential to enhance the quality and yield of watermelons, meeting consumer demand and supporting agricultural innovation.

Journal information: Horticulture Research

Provided by NanJing Agricultural University

Explore further

Feedback to editors

Scientists pinpoint strategies that could stop cats from scratching your furniture

2 hours ago

Two new species of Psilocybe mushrooms discovered in southern Africa

9 hours ago

UV radiation damage leads to ribosome roadblocks, causing early skin cell death

10 hours ago

Dual-laser approach could lower cost of high-resolution 3D printing

Novel method enhances size-controlled production of luminescent quantum dots

Cosmic simulation reveals how black holes grow and evolve

11 hours ago

How climate change is affecting where species live

12 hours ago

Human presence shifts balance between leopards and hyenas in East Africa

Physicists' laser experiment excites atom's nucleus, may enable new type of atomic clock

Treatment with a mixture of antimicrobial peptides found to impede antibiotic resistance

Relevant physicsforums posts, who chooses official designations for individual dolphins, such as fb15, f153, f286.

Jun 26, 2024

Color Recognition: What we see vs animals with a larger color range

Jun 25, 2024

Innovative ideas and technologies to help folks with disabilities

Jun 24, 2024

Is meat broth really nutritious?

Covid virus lives longer with higher co2 in the air.

Jun 22, 2024

Periodical Cicada Life Cycle

Jun 21, 2024

Translocation on chromosome 6 causes abnormalities during meiosis and fewer seeds in watermelon

Dec 23, 2021

Behind the rind: New genomic insights into watermelon evolution, quality, and resilience

Aug 11, 2023

Researchers create double-haploid watermelon plants via in vivo, seed-based haploid induction system

Jul 10, 2023

Unlocking the genetic secrets of cabbage: Key inversions suppress recombination for crop improvement

Jun 5, 2024

Soybean seed hardness demystified: Key genes and networks uncovered

Watermelon cultivar wards off soil-borne diseases

Jul 13, 2017

Recommended for you

New understanding of a common plant enzyme could lead to better crop management

13 hours ago

Ants perform amputations to save injured nestmates

15 hours ago

Searching for the missing link between growth and longevity

Genetic patterns of world's farmed, domesticated foxes revealed via historical deep-dive

Jul 1, 2024

Let us know if there is a problem with our content

Use this form if you have come across a typo, inaccuracy or would like to send an edit request for the content on this page. For general inquiries, please use our contact form . For general feedback, use the public comments section below (please adhere to guidelines ).

Please select the most appropriate category to facilitate processing of your request

Thank you for taking time to provide your feedback to the editors.

Your feedback is important to us. However, we do not guarantee individual replies due to the high volume of messages.

E-mail the story

Your email address is used only to let the recipient know who sent the email. Neither your address nor the recipient's address will be used for any other purpose. The information you enter will appear in your e-mail message and is not retained by Phys.org in any form.

Newsletter sign up

Get weekly and/or daily updates delivered to your inbox. You can unsubscribe at any time and we'll never share your details to third parties.

More information Privacy policy

Donate and enjoy an ad-free experience

We keep our content available to everyone. Consider supporting Science X's mission by getting a premium account.

E-mail newsletter

The HTML Presentation Framework

Created by Hakim El Hattab / @hakimel

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

current-visible

highlight-red

highlight-blue

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

reveal.js comes with a few themes built in: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Marvelous List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Tabular Tables

Item	Value	Quantity
Apples	$1	7
Lemonade	$2	18
Bread	$3	2

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Right-to-left support
Extensive JavaScript API
Auto-progression
Parallax backgrounds
Custom keyboard bindings

- Try the online editor - Source code & documentation

We provide an extensive JavaScript API for controlling navigation and checking the current state of a presentation. If you're working with a single presentation instance the API can be accessed via the global Reveal object.

Slide State

Dom elements, more reading.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Mark Zuckerberg is 'almost ready' to reveal a prototype that left early testers 'giddy'

Meta will soon showcase its "full holographic" glasses prototype, CEO Mark Zuckerberg said.
The prototype will feature advanced augmented-reality tech, though it's not yet ready for sale.
Zuckerberg noted the glasses are distinct from headsets like the Quest, aiming for broader appeal.

Mark Zuckerberg said Meta is "almost ready" to show off its latest augmented-reality prototype — and he sounds excited.

The CEO teased Meta's upcoming "full holographic" glasses during an interview with the YouTuber Kane Sutter, also known as Kallaway.

"Every person who I've shown it to so far, their reaction is giddy," Zuckerberg said. "I'm really looking forward to showing that to more people."

Watch: What can Apple's new VR headset do?

Main content

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock ( ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

ACIP Presentation Slides: June 26-28, 2024 Meeting

Note: These files are not yet 508

Slides will be added as they become available.

June 26, 2024

Welcome & introductions.

Introduction Dr. K Talbot, Dr. M Wharton

Respiratory Syncytial Virus Vaccines – Adult

Introduction [10 pages] Dr. C Kotton
Abrysvo (Pfizer) safety and immunogenicity in non-pregnant adults aged 18-59 years [23 pages] Dr. I Munjal
Arexvy (GSK) immunogenicity with a 24-month revaccination interval [18 pages] Dr. S Gerber
mRNA-1345 (Moderna) Update on vaccine safety, efficacy and revaccination data [24 pages] Dr. R Das
Postmarketing safety updates: Vaccine Safety Datalink [28 pages] Dr. J Donahue
Evaluation of Guillain-Barre Syndrome (GBS) following RSV vaccination among adults 65 years and older [19 pages] Dr. P Lloyd
Observational RSV vaccine effectiveness [43 pages] Dr. D Surie
Economic analysis of adult RSV vaccination [40 pages] Dr. D Hutton
Update to benefits and risks discussion [29 pages] Dr. D Hutton
Comparison of economic analyses of adult RSV vaccination [20 pages] Dr. I Ortega-Sanchez
Evidence to Recommendations [102 pages] Dr. M Melgar, L Roper, Dr. A Britton
Clinical Considerations [13 pages] Dr. M Melgar

Combined Diphtheria and Tetanus Toxoids and Acellular Pertussis, Inactivated Poliovirus, Haemophilus influenzae Type B Conjugate, and Hepatitis B vaccine (Vaxelis®)

Introduction [6 pages] Dr. J Loehr
EtR and proposed recommendations: Use of Vaxelis among American Indian and Alaska Native Infants [53 pages] Dr. J Collins

Chikungunya Vaccine

Introduction [7 pages] Dr. W Chen
Update on chikungunya vaccines [3 pages] Dr. S Hills
Epidemiology of chikungunya in U.S. territories and states [31 pages] Dr. S Hills
Cost-effectiveness of use of live attenuated chikungunya vaccine among adults living in U.S. territories [32 pages] Dr. K Kilburn, Dr. E Staples
Next steps for Work Group [4 pages] Dr. S Hills

Dengue Vaccines

Dengvaxia discontinuation [4 pages] Dr. N Bergren
Dengue vaccine updates [22 pages] Dr. J Wong

June 27, 2024

Covid-19 vaccine.

Introduction [10 pages] Dr. M Daley
COVID-19-associated hospitalizations [24 pages] Dr. F Havers
COVID-19 vaccine effectiveness update [30 pages] Dr. R Link-Gelles
Vaccine safety update for 2023-2024 COVID-19 vaccine [41 pages] Dr. J Duffy
Economic analysis of COVID-19 vaccination [38 pages] Dr. L Prosser
EtR for use of the 2024-2025 COVID-19 vaccine [131 pages] Dr. L Panagiotakopoulos
COVID-19 vaccine implementation [28 pages] Dr. S Stokley

Influenza Vaccines

Influenza A (H5N1) Update [16 pages] Dr. V Dugan
WG Considerations and Proposed Recommendations [50 pages] Dr. L Grohskopf

Pneumococcal Vaccines

Introduction [14 pages] Dr. J Loehr
Economic analysis and public health impact of PCV21 use in adults [45 pages] Mr. C Stoecker
Comparison of economic analysis on PCV21 use in adults [21 pages] Dr. A Leidner
Summary of WG Interpretation of EtR and policy options on PCV21 use in adults and clinical guidance for implementation [55 pages] Dr. M Kobayashi

June 28, 2024

Meningococcal vaccines.

Epidemiology Updates [51 pages] Ms. A Rubis
GSK Pentavalent Vaccine Immunogenicity and Safety [23 pages] Dr. W Sohn
WG Considerations Regarding MenABCWY Vaccine and Discussion of Potential Risk Groups for MenB Vaccination [32 pages] Dr. S Schillie

Respiratory Syncytial Virus Vaccines – Maternal/Pediatric

Introduction [9 pages] Dr. S Long
Implementation and uptake of nirsevimab and maternal RSV vaccine [18 pages] Dr. S Stokley
Maternal RSV vaccine safety surveillance [28 pages] Dr. P Moro
Summary of effectiveness of nirsevimab in infants [32 pages] Dr. A Payne
Work Group considerations [20 pages] Dr. J Jones, Dr. K Fleming-Dutra

Human papillomavirus Vaccines

Announcement of formation of an ACIP HPV vaccines work group [10 pages] Dr. O Brooks

Exit Notification / Disclaimer Policy

The Centers for Disease Control and Prevention (CDC) cannot attest to the accuracy of a non-federal website.
Linking to a non-federal website does not constitute an endorsement by CDC or any of its employees of the sponsors or the information and products presented on the website.
You will be subject to the destination website's privacy policy when you follow the link.
CDC is not responsible for Section 508 compliance (accessibility) on other federal or private website.

IMAGES

Reveal JS
REVEAL.JS THE HTML PRESENTATION FRAMEWORK
The HTML presentation framework
reveal.js
HTML or Markdown presentation framework will make you love the lecture
How to create an HTML slide presentation in reveal JS?

VIDEO

Live Edit: Reveal-JS The HTML Presentation Framework
HTML PRESENTATION
How To Create Text Reveal Animation Using HTML and CSS
The HTML presentation framework Reveal.js
Presenting Code
HTML program to display a welcome message

COMMENTS

The HTML presentation framework
Create Stunning Presentations on the Web. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. 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 ...
GitHub
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com. The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax ...
reveal.js
Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade. Background Transition Override You can override background transitions per slide by using data-background-transition="slide" .
Demo
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical Slides. Slides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1
Reveal JS
Today I'm starting a series of short videos on Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this first video, we'll l...
Build and Publish a Presentation with RevealJS and Github
Some benefits this has over the standard software packages include being able to use version control (since the presentation is just html, css, and js files rather than a proprietary binary format), collaborate with others, and the sheer joy of using your favorite web technologies and text editor. ... hakimel/reveal.js.git # rename the ...
Presenting Code
Presenting Code. reveal.js includes a powerful set of features aimed at presenting syntax highlighted code — powered by highlight.js. This functionality lives in the highlight plugin and is included in our default presentation boilerplate. Below is an example with clojure code that will be syntax highlighted.
reveal.js
A framework for easily creating beautiful presentations using HTML. Reveal.js HTML Presentations Made Easy. Created by Hakim El Hattab / @hakimel. Heads Up. ... reveal.js and rvl.io are entirely free but if you'd like to support the projects you can donate below. Donations will go towards hosting and domain costs.
A Beginner's Guide to Using Reveal.js for Presentations
Setting Up Reveal.js. Start by downloading the latest version of Reveal.js from the official GitHub repository. This repository has everything you need to get started. I created a new folder called "test" and copied index.html as well as the folders dist, css, and plugin. The file, index.html, contains a template structure for the presentation.
Reveal JS
This series of short videos explores Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this final video, we'll look at ani...
Reveal JS
This series of short videos explores Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this fifth video, we'll look at bac...
Create Incredible Web Presentations With Reveal.Js
Reveal.js is an open-source HTML presentation framework. Anyone with a web browser can use it to make attractive presentations for free. The program allows anyone with a web browser to create ...
Creating Slick HTML Presentations Using reveal.js
To start using Reveal.js, you need to download the framework from the official GitHub repository. Once downloaded, you can start creating your presentation by editing the index.html file. You can ...
reveal.js
The presentation markup hierarchy needs to be .reveal > .slides > section where the section represents one slide and can be repeated indefinitely. If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence.
GitHub
The presentation markup hierarchy needs to be .reveal > .slides > section where the section represents one slide and can be repeated indefinitely. If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence.
reveal.js
The HTML Presentation Framework. Created by Hakim El Hattab and contributors. Hello There. reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical Slides. Slides can be nested inside of each other. Use the Space key to navigate through all slides ...
reveal.js
Reveal.addEventListener( 'customevent', function() { console.log( '"customevent" has fired' ); } ); Clever Quotes These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:
Markup
The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the body element. If you're including multiple presentations on the same page each presentations .reveal element will act as their viewport. The viewport is always decorated with a reveal-viewport class reveal ...
GitHub
Jump to the exampleSite folder in this repository to see the source code for the above presentation and several more. Here are links to those presentations live: logo-example - Shows how to add a logo to your presentation; custom-theme-example - Uses Hugo pipes to compile and use a custom Reveal.js SCSS theme (recommended!); section-example - Very basic example that shows how to create a ...
Newly released grand jury documents in Epstein case reveal alleged
A grand jury in Palm Beach County on July 19, 2006, heard from two alleged underage victims of Jeffrey Epstein, two police officers and an investigator with the state's attorney's office in a ...
4th of July Trivia Questions (With Answers)
Test your Independence Day knowledge with our 4th of July trivia questions & answers! This July 4th trivia has easy questions for kids and hard ones for adults.
New Report Reveals Why Aaron Rodgers Missed Jets' Mandatory Minicamp
Aaron Rodgers was the talk of the NFL last month when he missed the New York Jets' mandatory minicamp with an unexcused absence.. Jets coach Robert Saleh confirmed Rodgers missing the practices ...
Skeletons reveal what life was like for elite scribes in ancient Egypt
Literate, high-status men with writing ability were responsible for recordkeeping in ancient Egypt. But the job left a mark on their skeletons, a new analysis shows.
Jamie Foxx shares new details about health crisis that left him 'gone
Jamie Foxx still hasn't publicly disclosed what caused his hospitalization last year but recently shared more details during an encounter captured on video.
Cutting down on seeds: Researchers reveal innovative watermelon
For instance, naturally mutated material MT-a showed translocations between Chr6 and Chr10, while radiation-induced mutants MT-b and MT-c involved translocations between Chr1 and Chr5, Chr4 and ...
reveal.js
Hello There. reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical Slides. Slides can be nested inside of each other. Use the Spacekey to navigate through all slides. Basement Level 1. Nested slides are useful for adding additional detail underneath a ...
Biden issues a warning about the power of the presidency
President Joe Biden on Monday ripped the Supreme Court's decision on presidential immunity, which ruled that presidents have an absolute immunity from prosecution for core official acts.
API Methods
Slides.com — the reveal.js presentation editor. Try it for free . Become a reveal.js pro in the official video course. Learn more ...
Mark Zuckerberg is 'almost ready' to reveal a prototype that left early
Meta will soon showcase its "full holographic" glasses prototype, CEO Mark Zuckerberg said. The prototype will feature advanced augmented-reality tech, though it's not yet ready for sale ...
ACIP June 26-28, 2024 Presentation Slides
ACIP Presentation Slides: June 26-28, 2024 Meeting. Print. Related Pages. Note: These files are not yet 508. Slides will be added as they become available. June 26, 2024 Welcome & Introductions. Introduction Dr. K Talbot, Dr. M Wharton; Respiratory Syncytial Virus Vaccines - Adult.

HTML Presentations Made Easy

Vertical Slides

Basement Level 1

Basement Level 2

Point of View

Works in Mobile Safari

Marvelous Unordered List

Fantastic Ordered List

Transition Styles

Global State

Custom Events

Slide Backgrounds

Image Backgrounds

Background Transition Override

Clever Quotes

Pretty Code

Intergalactic Interconnections

Fragmented Views

Fragment Styles

Spectacular image!

Take a Moment

Stellar Links

BY Hakim El Hattab / hakim.se

Build and Publish a Presentation with RevealJS and Github

You may also like...

HTML Presentations Made Easy

Vertical Slides

Basement Level 1

Basement Level 2

Point of View

Works in Mobile Safari

Marvelous Unordered List

Fantastic Ordered List

Transition Styles

Custom Events

Clever Quotes

Intergalactic Interconnections

Fragmented Views

Fragment Styles

Spectacular image!

Take a Moment

Stellar Links

BY Hakim El Hattab / hakim.se

A Beginner’s Guide to Using Reveal.js for Presentations

Setting Up Reveal.js

Customizing Your Presentation in Reveal.js

Slide Themes

Slide Transitions

Slide Configuration

Code and Math in Reveal.js

Advanced Features in Reveal.js

Related Posts

Perseverance: The Journey to Implement Our Amazing PicoGameSDK

A Journey to Creating a Micropython User Modules

How to Find Your First Programming Language

Creating Slick HTML Presentations Using reveal.js

Setting Up reveal.js

What is Reveal.js and how does it work?

How can I start using Reveal.js for my presentations?

Can I use Reveal.js without any coding knowledge?

How can I add nested slides to my Reveal.js presentation?

Is it possible to export my Reveal.js presentation to PDF?

How can I use markdown in my Reveal.js presentation?

Can I control my Reveal.js presentation programmatically?

How can I add speaker notes to my Reveal.js presentation?

Can I customize the look and feel of my Reveal.js presentation?

Is Reveal.js compatible with all browsers?

Table of contents

Instructions

External Markdown

Configuring marked

Color Backgrounds

Image Backgrounds

Video Backgrounds

Iframe Backgrounds

Background Transitions

Embedded iframes

Print stylesheet

Speaker Notes

Speaker notes clock and timers