A template built on top of RevealJS library for my lectures, workshops, and labs.
By using this template, you will be able to quickly write HTML presentation slides for your knowledge-sharing sessions.
Interested in some examples? Here they are!
- Tailwind-like utility-first SCSS templating
- PUG declaration
- various mixins and themes
- build-time equations and code snippets
Make sure you have nodejs 16.0.0
or higher and npm 8.6.0
or higher installed. Install dependencies with:
npm install
Once it's done start up a local server with:
npm run dev
To view the demo slides, go to:
- localhost:1234/demo-corporate.html to see the corporate theme
- localhost:1234/demo-tech.html to see the tech theme
- localhost:1234/demo-gaming.html to see the gaming theme
- there are two modes - preview and presentation mode. Presentation mode reveals all fragments gradually and can be enabled by applying
?presentation
query string, for instancelocalhost:1234/demo-gaming.html?presentation
To create a production build:
npm run deploy
- pick up the theme you want to use (at the moment, there are 3 themes: corporate, gaming, and tech)
- each theme has its own demo presentation in the
slides/view
folder- themes are written in PUG language, but you can use HTML as well
- enter the directory of the theme and perform necessary changes:
- if you want to add new fonts, add them in the
fonts
folder and put all declarators infonts.scss
- the following fonts are preinstalled: Roboto, Inter, Inconsolata
- if you want to change the colors, edit the
colors.scss
file - if you want to add new mixins (macros) for your slides, add them into the
containers.pug
file inside the theme folder - any theme-specific styles should be put in
theme.scss
in the theme directory - all theme-specific assets, such as logos, frames, and icons, should be put in the
resources
folder in the theme directory
- if you want to add new fonts, add them in the
- modify the demo file as you like
- RevealJS is a HTML Presentation Framework
- main features
- horizontal and vertical slides
- wysiwyg, but that's for ladies
- code snippets
- animations
- touch optimized
- easily exportable (e.g. as an Android app by using Cordova)
- highly customizable (themes, transitions, backgrounds,...)
- supports iframes, video, canvas,...
- export to PDF (via Chrome and some CSS modifiers)
- lots and lots of plugins, such as speakers view, elapsed time bar, charts, D3.js, menu, virtual laser pointer
- contains API to manipulate with the library from your JavaScript code
- this repository has its own pipeline that makes things much more powerful
- everything is bundled together via
ParcelJS
which also supports hot reload - Parcel just goes over your html/pug files in theslides/view
folder and bundles and generates the output files for you- keep in mind that not everything can be hot-reloaded
- Parcel only hot-reloads files that are statically referenced in the HTML/PUG file or any other file (styles, scripts) it references
- slide backgrounds are loaded dynamically via a data attribute, therefore they need to be copied to the output folder via a script (that's why there is a
prebuild.js
script that will copy all dynamic files to the output folder)- in order not to copy some files twice, it will copy all folders in the
assets
folder that don't have a file named.dontcopy
. By default, it only copiesbackgrounds
andplugins
folder
- in order not to copy some files twice, it will copy all folders in the
- code snippets and equations are processed first, because there is a script that needs to generate html files from them before Parcel starts bundling the data. These files are referenced statically via
include
declarator (see the demo files). These folders are namedsnippets_generated
andequations_generated
and are ignored by git, as they are re-generated every time you runnpm run dev
- notes - Handles opening of and synchronization with the reveal.js notes window, here is the documentation
- pointer - higlights a mouse pointer when you press Caps Lock
- search - Handles finding a text string anywhere in the slides, accessible by pressing
CMD+SHIFT+F
- you can export anything to pdf just by adding
?print-pdf
to the url, it will switch to appropriate CSS mode and you can useChrome
pdf export feature - you should use
Google Chrome
since it has got a built-in PDF export and the slides were optimized for it - navigate to a presentation you want to export either on your localhost or in the live environment and put
?print-pdf
as a query string (e.g.localhost:1234/demo-gaming.html?print-pdf
) - in this mode, you will see all slides aligned vertically, stripped out of all visual effects and glowing backgrounds
- press the right mouse button, select
print
- select
Save as PDF
as the Destination - wait for the preview to be generated and click on
Save
Key | Action |
---|---|
N, SPACE | Next slide |
P | Previous slide |
← , H | Navigate left |
→ , L | Navigate right |
↑ , K | Navigate up |
↓ , J | Navigate down |
Home , ⌘/CTRL ← | First slide |
End , ⌘/CTRL → | Last slide |
F | Fullscreen |
ESC, O | Slide overview |
CTRL + Shift + F | Search |
- all slides reside in
slides/view
folder - here is an example of a simple presentation
// start with the doctype
doctype html
// declare default background and path to the assets
- var assets = '../assets/corporate/'
- var defaultBgr = 'backgrounds/city.jpg';
// include all mixins
include ./mixins/header.pug
include ./mixins/containers.pug
include ../themes/corporate/containers.pug
// declare header that will import all slides and sets up a favicon
+header('Corpo Template', 'Corporate', 'DoDoLab', '../themes/corporate/resources/favicon.png', '../themes/corporate/theme.scss')
// ===================================================== SLIDES =====================================================
// declare your slides, class naming is important
.reveal
.slides
+pictureFrame(assets+'pictures/light.jpg')
div.fill.center
h1.color-midnight.font-bold Corporate Template
// =======================
+frame(title='Fragments')
.scope.fragment
p Scope Title
ul
li.fragment.fade-up some text
// declare revealJS footer that renders a progress bar
+footer('HTML Template', 'DoDoLab')
// include script that will set up RevealJS engine
script(src!='../../scripts/reveal-setup.js')
- there is no
<html>
node sinceRevealJS
generates it by itself +header
is a mixin taken fromheader.pug
. This mixin rendershead
element along with all meta tags, styles and a favicon
- the default configuration can be found in
scripts/reveal-setup.js
. If you need your own configuration, create your own file - this file basically sets up the RevealJS library, declares all plugins and handles
pdf-export
mode - here you can find the documentation of the config file
- it's important to use the same
width
andheight
as in thetheme_base_variables.scss
file! - RevealJS scales everything based on the current size of the browser window. You only need to worry about the aspect ratio and maximum resolution. Thus, declare the highest resolution you want to support.
import Reveal from 'reveal.js';
(window).Reveal = Reveal;
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
slideNumber: 'c/t',
navigationMode: 'linear',
backgroundTransition: 'slide',
pdfSeparateFragments: false,
pdfMaxPagesPerSlide: 1,
width: 1650,
height: 970,
margin: 0.05,
transition: 'slide', // none/fade/slide/convex/concave/zoom
dependencies: [
{ src: './plugins/search/search.js', async: true },
{ src: './plugins/notes/notes.js', async: true },
{ src: './plugins/pointer/pointer.js', async: true },
],
});
reveal.css
- the default style forRevealJS
theme/theme.scss
- style of the theme that belongs to a particular presentationbase/print.scss
- styles for the pdf versionbase/fonts.scss
- default fonts declaratorsbase/templates.scss
- tailwind-like templatesbase/theme_base.scss
- base theme stylestheme/fonts.scss
- theme-specific fonts (if any)theme/colors.scss
- theme-specific colorstheme/code.scss
- theme-specific styles for code snippetstheme/print.scss
- theme-specific styles for PDF version
- all colors get exported in
allColors
array - you can then reference them via class prefixes, such as:
bgr-[color]
for backgroundsbgr-[color]-semi
for semi-transparent backgroundscolor-[color]
for text colorsborder-[color]
for 4px solid borderborder-color-[color]
for border-color
- class templates are declared in
static/styles/templates.scss
- its structure is very similar to tailwind
- you can just take a look at the file to discover what classes you can use
- examples
.mx-10
declaresmargin-left: 10px
andmargin-right: 10px
.flex-cols-3
declares three flexbox columns, each of which having the width of33.33%
font-bold
declaresfont-weight: 700
.leading-xl
declares large spacing between respective lines
- font thickness
font-thin
,font-light
,font-normal
,font-medium
,font-semibold
,font-bold
,font-extrabold
,font-black
.
- line height
leading-base
,leading-md
,leading-lg
,leading-xl
,leading-2xl
,leading-3xl
,leading-4xl
,leading-5xl
,leading-6xl
- text size
text-4xs
,text-3xs
,text-2xs
,text-xs
,text-sm
,text-md
,text-lg
,text-xl
,text-2xl
,text-3xl
,text-4xl
,text-5xl
,text-6xl
- spacing for lists and paragraphs
spacing-md
,spacing-lg
,spacing-xl
,spacing-2xl
,spacing-3xl
,spacing-4xl
,spacing-5xl
,spacing-6xl
- margins, paddings and sizes in pixels
mx-xx
for horizontal margin,my-xx
for vertical margin,m-xx
for margin,ml-xx
for left margin etc.px-xx
for horizontal padding,my-xx
for vertical padding,p-xx
for padding,pl-xx
for left padding etc.-m-xx
for negative marginleft-xx
,right-xx
,top-xx
,bottom-xx
for absolute positioningwidth-xxx
,height-xxx
for width and height in pixelswidth-xxp
,height-xxp
for width and height in percents, e.g.width-30p
for 30%
- by default,
RevealJS
supports highlighting viahighlight.js
and equations viaMathJax
. This is not very convenient, however, since both features are managed on-demand and require lots of libraries to be bundled together in the browser - this repository makes it possible to transform code snippets and equations into html during the build time
- code snippets and equations must be put in the
assets/<presentation name>/snippets
andassets/<presentation name>/equations
respectively. The scripts then generate folderssnippets_generated
andequations_generated
- check out
demo-tech.pug
to see how it works - snippets
- the following are taken into consideration when highlighting:
- sql, JavaScript, TypeScript, C++, Json, Bash
- if you want more, just add them into
process_snippets.js
file
- as for the equations, you need to use Tex syntax
- equations
- equations are transformed into svg format
- every line in your file will result in a separate equation, numbered by
_xx.svg
. For instance,example.tex
with two lines will result in two svg files:example_01.svg
andexample_02.svg
- include your equation in your presentation file either as an image or directly
- example:
include ../assets/tech/equations_generated/example_01.svg
- example: