reveal.js | The HTML Presentation Framework
kandi X-RAY | reveal.js Summary
kandi X-RAY | reveal.js Summary
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 highlighted code and an extensive API.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Seide a slide .
- Select adjacent slides .
- Figure out the layout contents of the given layout .
- Initialize HILTUI .
- Adjusts visibility of slides
- Configures the transition components
- Clicks the current fragment .
- Generate slides from a given mark string .
- Initialize the slides .
- Applies the CSS transform to its zoom value .
reveal.js Key Features
reveal.js Examples and Code Snippets
Community Discussions
Trending Discussions on reveal.js
QUESTION
I want to integrate a countdown timer on specific slides in my reveal.js deck.
To achieve this, I used code from this codepen example and integrated this into my slideshow. It works nicely for the first instance of the timer, but does not appear when I try to add the timer to a second slide.
...ANSWER
Answered 2022-Mar-03 at 06:50The reveal-countdown plugin already provides this feature, no need to build it on your own! You can install it by downloading the repo and adding it to plugins/countdown or via npm
QUESTION
I was recently shooting myself in the foot with using the default google-fonts URL for fonts in my reveal.js presentation, as I had to reload the browser (switching presentations), and without Wifi the font cache was lost and wouldn't be rebuilt, and thus I ended up with a shitty looking typography of default sans serif.
So. I want to include the fonts for a reveal.js presentation, run locally from my laptop via npm start and 127.0.0.1:8000 so that the browser finds the fonts locally like it finds the html and css, without requiring Internet access.
This is what is in my custom scheme:
...ANSWER
Answered 2021-Nov-04 at 13:43Can't you simply grab the fonts here https://github.com/davidcunningham/roboto-condensed/tree/master/fonts
Then add this in your stylesheet?
QUESTION
In Reveal.js a slide can be hidden with data-visibility="hidden" attribute like this:
ANSWER
Answered 2021-Sep-11 at 22:04I've found a solution. To hide a markdown slide we can use a slide attribute like this:
QUESTION
My protractor script is working fine until a page where reveal.js package is used. I am not sure if that is the reason it causes the scripts to fail, but otherwise the code base is same as the other pages where my scripts works fine.
Note: I tried most of the protractor actions (click, highlight, waitForElement, toContain, etc), none of them worked. I could only click the links by inserting jQuery in my script.
CODE:
...ANSWER
Answered 2021-Jul-12 at 07:16My code started running after proving "browser.waitForAngularEnabled(false)" at the start of the script.
QUESTION
I'd like to have a 2 column reveal.js slide where I can page through the slides in the left-hand column (ColA) while a video plays in the right-hand column (ColB). The slides accompany the video.
I have it laid out on this page but the contents in the iframe/ColA are not large enough to read. I've tried scaling it but it scales the entire containing div, making the two columns overlap, and does not just scale the contents of the iframe.
Another option is to do the slides like normal, where each slide contains a link to the embedded video. My worry there is that every one of the embedded videos will play at once once the page loads because it's a live stream - it seems like that might eat a lot of processing power as my computer tries to play the same embedded live stream in 30 different slides. When moving from Slide1 to Slide2, are embedded videos stopped?
The full git repo for this is here.
...ANSWER
Answered 2021-Jun-14 at 10:32I don't think the iframe will work very well for multiple reasons:
- The scaling problem that you already encountered. iframes are notoriously hard to scale, as the size has to be hardcoded when embedding them.
- The nested presentation will have its own navigation, so it wont be clear where to proceed with the presentation.
You also already anticipated teh next problem - when putting the same video on multiple slides indeed the video will "restart" - first the old video will fade out and then the new copy will fade in. This is because each slide is it's own self-contained HTML element. So this also won't do what you want.
Instead I would propose to use Fragments. Fragments are the way you can have individual elements on a page change without changing the whole slide (commonly used for making bullet points appear).
In your case you can implement your "sub slides" on the left side as individual fragments that appear on top of each other using the css classes fragment fade-in-then-out (to make them appear/disappear) and r-stack (to make them appear on top of each other). You can see an example on the "Layout" page in the documentation (the second one with cat pictures).
If you put all of your sub-slides as fragments, then you can just have your video embedded as normal on the right and it will play independently from the subslides changing. Once the last sub-slide is passed, the presentation will move on to the next real slide (stopping the video).
QUESTION
I would like to know how to hide the code cells in my notebook when exporting to Reveal.JS
...ANSWER
Answered 2021-May-25 at 10:58QUESTION
I have a notebook which I can export to reveal.js slides using:
...ANSWER
Answered 2021-May-23 at 07:13TagRemoveProprocessor requires tags in cell metadata to work
You can add tags by going to View -> Cell toolbar -> Tags.
If you added skip tag after which cell metadata would be something like this:
QUESTION
I am trying to adapt the colours (stroke & fill) of an inline SVG picture in Reveal.js depending on the selected theme, i.e., dark strokes and fills for light themes and light stroke and fills for dark themes. So far I have attempted several approaches defining the following styles for the tags on the themes (in black.css for instance):
...ANSWER
Answered 2021-Apr-23 at 08:14Try change DOM elements in runtime:
QUESTION
I am trying to use the scrollreveal javascript. Installed it via npm and use it in my NodeJS code (see below). Also, I'm including it in my HTML as well.
Now when I run nodemon app.js in hyper terminal I get this error:
C:\Users\Admin\Desktop\My Projects\test\node_modules\scrollreveal\dist\scrollreveal.js:33 container: document.documentElement, ^
ReferenceError: document is not defined
index.html
...ANSWER
Answered 2021-Apr-01 at 08:40I think you misunderstood the way to use dependencies
First, NodeJS and the JavaScript that runs in the browser are completely different.
The problem you're facing here is that you're including a package that only works in the browser environment in NodeJS file. And since NodeJS doesn't have the concept of "document", therefore the error.
To fix this, you can simply remove the require statement from your NodeJS and just use "scrollreveal" in your HTML file. And since you're using a CDN link in your HTML, you don't need to install the dependency via npm. (You can use npm to manage your dependencies but that would require a modern Frontend setup, I would recommend you start with something like: Modern JavaScript Explained For Dinosaurs
QUESTION
I have a working setup with Maven generating a reveal.js presentation from Asciidoc sources with source code highlighting.
This is for example a slide with some Java code in it:
...ANSWER
Answered 2021-Mar-12 at 10:47You can use the highlight keyword, separating each step with a pipe (|) symbol:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install reveal.js
👀 View the demo presentation
📖 Read the documentation
🖌 Try the visual editor for reveal.js at Slides.com
🎬 Watch the reveal.js video course (paid)
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
