Build Interactive Slides with JavaScript Using Reveal.js
This tutorial shows how to use the web‑based library reveal.js to create interactive slide decks with JavaScript, covering cloning the repository, setting up a simple HTML file, running a local server, using markdown, themes, math formulas, code highlighting, background images, and exporting to PDF.
Build Interactive Slides with JavaScript Using Reveal.js
PowerPoint or Keynote lack good support for code and mathematical formulas, which is a pain point for developers. Front‑end engineers cannot apply their CSS skills, and markdown users must reformat documents to create slides.
Therefore we need a web‑technology‑based slide framework. Reveal.js has been popular in this area for a long time and recently released a new version, so we start with it.
Running reveal.js
First clone the latest reveal.js repository: git clone https://github.com/hakimel/reveal.js Create an HTML file, for example study.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});
</script>
</body>
</html>In the reveal.js directory run npm install, then start the server with npm start. The default port is 8000; you can change it, e.g., to 30800: npm start -- --port=30800 Open http://127.0.0.1:30800/study.html in a browser to see the presentation.
reveal.js step by step
The page is easy to understand; no React or Vue framework and no webpack configuration are required. Each slide corresponds to a <section> element.
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>Markdown support
Reveal.js can render slides written in markdown via the RevealMarkdown plugin. Simply add a section with data-markdown and a textarea containing markdown.
<section data-markdown>
<textarea data-markdown>
推荐系统的主要算法包括：
- 矩阵分解
- 线性模型
- 树模型
- 深度学习模型
</textarea>
</section>The generated slide looks like:
Changing themes
The default black theme can be replaced by any CSS file under dist/theme/ or a custom one.
<link rel="stylesheet" href="dist/theme/beige.css">Resulting appearance:
Math formula support
Math support is not included by default. Add the math plugin and configure MathJax.
<script src="plugin/math/math.js"></script>
<script>
Reveal.initialize({
hash: true,
math: {
mathjax: "https://cdn.jsdelivr.net/gh/mathjax/[email protected]/MathJax.js",
config: "TeX-AMS_HTML-full",
TeX: { Macros: { RR: "{\\bf R}" } }
},
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath]
});
</script>Now you can write LaTeX formulas directly in a slide:
<section>
\[\begin{aligned}
\ MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}|
\end{aligned}\]
</section>Or embed them in markdown:
<section data-markdown>
<textarea data-markdown>
$MAE$(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}|
</textarea>
</section>Code highlighting
Code blocks can be highlighted using triple backticks in markdown or by using <pre><code> tags.
Example with HTML:
<section>
<pre>
<code class="language-javascript">
model.compile({
optimizer: tf.train.sgd(0.000001),
loss: 'meanSquaredError'
});
return model.fitDataset(flattenedDataset, {
epochs: 10,
callbacks: {
onEpochEnd: async (epoch, logs) => {
console.log(epoch + ':' + logs.loss);
}
}
});
</code>
</pre>
</section>Background images
Slides can use the data-background-image attribute to set a background picture.
<section data-background-image="https://cdn.jsdelivr.net/www.jsdelivr.com/000a3f2b6a7baa6ae0f786a251fd105e4b230d8e/img/landing/[email protected]"></section>HTML and CSS
Besides markdown, you can write regular HTML and CSS inside slides for finer control.
<section>
<h3 style="{color: #ffec3d;}">Cold‑start for recommendation systems</h3>
<ul>
<li>Leverage popular data</li>
<li>Leverage user registration info</li>
<li>Leverage third‑party data</li>
<li>Leverage item content attributes</li>
</ul>
</section>You can also add a <style> block to adjust fonts, e.g.,
<style>
ul { font-size: 18px; }
</style>Fade‑in effects
Adding the class fragment to an element makes it appear step by step.
<section>
<h3>Cold‑start</h3>
<ul>
<li class="fragment">Leverage popular data</li>
<li class="fragment">Leverage user registration info</li>
<li class="fragment">Leverage third‑party data</li>
<li class="fragment">Leverage item content attributes</li>
</ul>
</section>Elements can also be highlighted in red by using the class fragment highlight-red.
<section>
<h3>Cold‑start</h3>
<ul>
<li class="fragment highlight-red">Leverage popular data</li>
<li>Leverage user registration info</li>
...
</ul>
</section>Export to PDF
After finishing the slides, add ?print-pdf to the URL (e.g., http://0.0.0.0:30800/study.html?print-pdf) and use the browser’s "Save as PDF" function.
Going further
Beyond the basics, reveal.js supports auto‑play, custom plugins, event handling, and many other features that can make slide creation more fun and powerful.
Taobao Frontend Technology
The frontend landscape is constantly evolving, with rapid innovations across familiar languages. Like us, your understanding of the frontend is continually refreshed. Join us on Taobao, a vibrant, all‑encompassing platform, to uncover limitless potential.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.