CINXE.COM

<!doctype html><html lang="" dir="" class="logo-visible text-sm sm:text-base"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>Presenting Code | reveal.js</title><meta name="description" content=""><link rel="stylesheet" href="/main.css?1742477499449"><meta itemprop="name" content="Presenting Code | reveal.js"><meta itemprop="description" content=""><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Presenting Code | reveal.js"><meta name="twitter:description" content=""><meta name="twitter:site" content="@hakimel"><meta name="twitter:creator" content="@hakimel"><meta name="twitter:image:src" content="https://revealjs.com/images/meta/reveal-twitter-card-1024x512.png"><meta property="og:title" content="Presenting Code | reveal.js"><meta property="og:description" content=""><meta property="og:image" name="image" content="https://revealjs.com/images/meta/reveal-og-card-1200-630.png"><meta property="og:url" content="https://revealjs.com/code/"><meta property="og:site_name" content="reveal.js"><meta property="og:locale" content="en_US"><meta property="og:type" content="website"><link rel="icon" type="image/svg+xml" href="/images/favicon.svg"><link rel="canonical" href="https://revealjs.com/code/"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" media="print" onload="this.onload=null;this.removeAttribute('media');" rel="stylesheet" data-application-font="inter"><noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" data-application-font="inter"></noscript></head><body data-page="code" class="text-gray-900 leading-7 bg-gray-100"><header class="header fixed flex h-16 items-center top-0 w-full z-30 bg-gray-100 py-2 border-b border-gray-300"><div class="w-full relative max-w-screen-xl mx-auto px-6 flex flex-row items-center justify-between"><div class="header-left mr-6 flex-shrink-0"><a class="header-logo block" href="/" title="reveal.js home"><img class="hidden sm:block" src="/images/logo/reveal-black-text.svg" alt="reveal.js logo" style="width: 142px"> <img class="block sm:hidden" src="/images/logo/reveal-symbol.svg" alt="reveal.js logo" style="width: 40px"></a></div><div class="search relative mr-2 flex-grow max-w-3xl sm:mr-6"><input class="search-input appearance-none h-10 w-full inline-block py-1 px-4 bg-gray-300 border-2 border-gray-300 outline-none rounded-full placeholder-gray-600 text-gray-800 hover:text-gray-900 focus:border-yellow-400 focus:bg-white" placeholder="Search reveal.js..."> <kbd class="search-shortcut absolute right-4 py-2 top-0.5 rounded-lg text-sm text-gray-600 pointer-events-none hidden sm:inline-block">⌘K</kbd><div class="search-results overflow-hidden fixed left-4 right-4 top-100 bg-white p-2 mt-2 rounded-lg shadow-2xl text-sm lg:absolute lg:left-auto lg:right-auto lg:min-w-full" data-state="no-term"></div></div><nav class="header-nav hidden lg:flex"><ul class="menu flex flex-col lg:flex-row items-center list-reset text-base"><li class="relative header-lang"><a class="inline-block py-3 px-5 text-gray-800 hover:text-gray-900 rounded align-middle"><svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg></a><div class="header-lang-select absolute shadow-2xl px-2 py-2 text-gray-800 rounded-lg align-middle focus:outline-none"><a href="/en/code" hreflang="en" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-900">English</a> <a href="/zh-Hant/code" hreflang="zh-Hant" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-900">繁體中文</a></div></li><li><a class="inline-block py-3 px-5 text-gray-800 hover:text-gray-900 rounded align-middle" href="https://twitter.com/revealjs"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg></a></li><li><a class="inline-block py-3 px-5 text-gray-800 hover:text-gray-900 rounded align-middle" href="https://github.com/hakimel/reveal.js"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a></li></ul></nav><nav class="header-nav lg:hidden flex"><ul class="menu flex flex-row items-center list-reset text-sm"><li><a class="inline-block p-2 mr-1 text-gray-800 hover:text-gray-900 rounded align-middle" href="https://github.com/hakimel/reveal.js"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a></li><li><button class="menu-toggle inline-block py-1 pl-2"><svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><line class="line1" x1="0" y1="8" x2="24" y2="8" style="stroke: #000; stroke-width: 2"/><line class="line2" x1="0" y1="16" x2="24" y2="16" style="stroke: #000; stroke-width: 2"/></svg></button></li></ul></nav></div></header><div class="w-full max-w-screen-xl mx-auto px-6 relative"><div class="lg:flex -mx-6"><div class="sidebar hidden fixed inset-0 pt-16 h-screen z-20 w-full bg-gray-100 lg:sticky lg:overflow-y-visible lg:pt-0 lg:w-1/5 lg:block lg:top-16 lg:pb-16 lg:-mb-16"><div class="sidebar-inner overflow-hidden h-full"><nav class="sidebar-scroller text-base sm:text-sm inset-0 overflow-y-auto overflow-x-hidden px-6 py-8 h-full"><ul><li class="level-1 mb-4 sidebar-language">Languages<ul><li class="level-2 mb-px"><a href="/en/code" hreflang="en" class="nav-link -mx-1 p-1">English</a></li><li class="level-2 mb-px"><a href="/zh-Hant/code" hreflang="zh-Hant" class="nav-link -mx-1 p-1">繁體中文</a></li></ul></li><li class="level-1 mb-4">Getting Started<ul><li class="level-2 mb-px"><a href="/" class="nav-link -mx-1 p-1">Home</a></li><li class="level-2 mb-px"><a href="/?demo" class="nav-link -mx-1 p-1 demo-link">Demo</a></li><li class="level-2 mb-px"><a href="/installation/" class="nav-link -mx-1 p-1">Installation</a></li></ul></li><li class="level-1 mb-4">Support<ul><li class="level-2 mb-px"><a href="/course" class="nav-link -mx-1 p-1">Video Course</a></li><li class="level-2 mb-px"><a href="https://github.com/sponsors/hakimel" class="nav-link -mx-1 p-1">Sponsor reveal.js <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>arrow-right</title><path d="M12 3.984l8.016 8.016-8.016 8.016-1.406-1.406 5.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z"></path></svg></a></li></ul></li><li class="level-1 mb-4">Content<ul><li class="level-2 mb-px"><a href="/markup/" class="nav-link -mx-1 p-1">Markup</a></li><li class="level-2 mb-px"><a href="/markdown/" class="nav-link -mx-1 p-1">Markdown</a></li><li class="level-2 mb-px"><a href="/backgrounds/" class="nav-link -mx-1 p-1">Backgrounds</a></li><li class="level-2 mb-px"><a href="/media/" class="nav-link -mx-1 p-1">Media</a></li><li class="level-2 mb-px"><a href="/lightbox/" class="nav-link -mx-1 p-1">Lightbox NEW</a></li><li class="level-2 mb-px"><a href="/code/" class="nav-link -mx-1 p-1 selected" aria-current="page">Code</a></li><li class="level-2 mb-px"><a href="/math/" class="nav-link -mx-1 p-1">Math</a></li><li class="level-2 mb-px"><a href="/fragments/" class="nav-link -mx-1 p-1">Fragments</a></li><li class="level-2 mb-px"><a href="/links/" class="nav-link -mx-1 p-1">Links</a></li><li class="level-2 mb-px"><a href="/layout/" class="nav-link -mx-1 p-1">Layout</a></li><li class="level-2 mb-px"><a href="/slide-visibility/" class="nav-link -mx-1 p-1">Slide Visibility</a></li></ul></li><li class="level-1 mb-4">Customization<ul><li class="level-2 mb-px"><a href="/themes/" class="nav-link -mx-1 p-1">Themes</a></li><li class="level-2 mb-px"><a href="/transitions/" class="nav-link -mx-1 p-1">Transitions</a></li><li class="level-2 mb-px"><a href="/config/" class="nav-link -mx-1 p-1">Config Options</a></li><li class="level-2 mb-px"><a href="/presentation-size/" class="nav-link -mx-1 p-1">Presentation Size</a></li></ul></li><li class="level-1 mb-4">Features<ul><li class="level-2 mb-px"><a href="/vertical-slides/" class="nav-link -mx-1 p-1">Vertical Slides</a></li><li class="level-2 mb-px"><a href="/auto-animate/" class="nav-link -mx-1 p-1">Auto-Animate</a></li><li class="level-2 mb-px"><a href="/auto-slide/" class="nav-link -mx-1 p-1">Auto-Slide</a></li><li class="level-2 mb-px"><a href="/speaker-view/" class="nav-link -mx-1 p-1">Speaker View</a></li><li class="level-2 mb-px"><a href="/scroll-view/" class="nav-link -mx-1 p-1">Scroll View NEW</a></li><li class="level-2 mb-px"><a href="/slide-numbers/" class="nav-link -mx-1 p-1">Slide Numbers</a></li><li class="level-2 mb-px"><a href="/jump-to-slide/" class="nav-link -mx-1 p-1">Jump to Slide</a></li><li class="level-2 mb-px"><a href="/touch-navigation/" class="nav-link -mx-1 p-1">Touch Navigation</a></li><li class="level-2 mb-px"><a href="/pdf-export/" class="nav-link -mx-1 p-1">PDF Export</a></li><li class="level-2 mb-px"><a href="/overview/" class="nav-link -mx-1 p-1">Overview Mode</a></li><li class="level-2 mb-px"><a href="/fullscreen/" class="nav-link -mx-1 p-1">Fullscreen Mode</a></li></ul></li><li class="level-1 mb-4">API<ul><li class="level-2 mb-px"><a href="/initialization/" class="nav-link -mx-1 p-1">Initialization</a></li><li class="level-2 mb-px"><a href="/api/" class="nav-link -mx-1 p-1">API Methods</a></li><li class="level-2 mb-px"><a href="/events/" class="nav-link -mx-1 p-1">Events</a></li><li class="level-2 mb-px"><a href="/keyboard/" class="nav-link -mx-1 p-1">Keyboard</a></li><li class="level-2 mb-px"><a href="/presentation-state/" class="nav-link -mx-1 p-1">Presentation State</a></li><li class="level-2 mb-px"><a href="/postmessage/" class="nav-link -mx-1 p-1">postMessage</a></li></ul></li><li class="level-1 mb-4">Initialization<ul><li class="level-2 mb-px"><a href="/plugins/" class="nav-link -mx-1 p-1">Using Plugins</a></li><li class="level-2 mb-px"><a href="/plugins/#built-in-plugins" class="nav-link -mx-1 p-1">Built-in Plugins</a></li><li class="level-2 mb-px"><a href="/creating-plugins/" class="nav-link -mx-1 p-1">Creating a Plugin</a></li><li class="level-2 mb-px"><a href="/multiplex/" class="nav-link -mx-1 p-1">Multiplex</a></li><li class="level-2 mb-px"><a href="https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware" class="nav-link -mx-1 p-1">Third Party Plugins <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>arrow-right</title><path d="M12 3.984l8.016 8.016-8.016 8.016-1.406-1.406 5.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z"></path></svg></a></li></ul></li><li class="level-1 mb-4">Other<ul><li class="level-2 mb-px"><a href="/react/" class="nav-link -mx-1 p-1">React Framework</a></li><li class="level-2 mb-px"><a href="/upgrading/" class="nav-link -mx-1 p-1">Upgrade Instructions</a></li><li class="level-2 mb-px"><a href="https://github.com/hakimel/reveal.js/releases" class="nav-link -mx-1 p-1">Changelog <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>arrow-right</title><path d="M12 3.984l8.016 8.016-8.016 8.016-1.406-1.406 5.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z"></path></svg></a></li></ul></li></ul></nav></div></div><main class="main py-24 w-full min-h-screen lg:static lg:max-h-full lg:overflow-visible lg:w-3/5"><article class="article flex flex-1 flex-col focus:outline-none w-full max-w-6xl ml-auto mr-auto px-6" tabindex="-1"><h1 id="presenting-code" tabindex="-1">Presenting Code</h1>reveal.js includes a powerful set of features aimed at presenting syntax highlighted code — powered by <a href="https://highlightjs.org/">highlight.js</a>. 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. When the <code>data-trim</code> attribute is present, surrounding whitespace within the <code><code></code> is automatically removed.HTML will be escaped by default. To avoid this, add <code>data-noescape</code> to the <code><code></code> element.<pre class="language-html"><code class="language-html"><section> <pre><code data-trim data-noescape> (def lazy-fib (concat [0 1] ((fn rfib [a b] (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1))) </code></pre> </section></code></pre><div class="reveal reveal-example"><div class="slides"><section><pre><code data-trim data-noescape> (def lazy-fib (concat [0 1] ((fn rfib [a b] (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1))) </code></pre></section></div></div><h2 id="theming" tabindex="-1">Theming</h2>Make sure that a syntax highlight theme is included in your document. We include Monokai by default, which is distributed with the reveal.js repo at <a href="https://github.com/hakimel/reveal.js/tree/master/plugin/highlight/monokai.css">plugin/highlight/monokai.css</a>. A full list of available themes can be found at <a href="https://highlightjs.org/demo/">https://highlightjs.org/demo/</a>.<pre class="language-html"><code class="language-html"><link rel="stylesheet" href="plugin/highlight/monokai.css" /> <script src="plugin/highlight/highlight.js"></script> <script> Reveal.initialize({ plugins: [RevealHighlight], }); </script></code></pre><h2 id="line-numbers-%26-highlights" tabindex="-1">Line Numbers & Highlights</h2>You can enable line numbers by adding <code>data-line-numbers</code> to your <code><code></code> tags. If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute. For example, in the following example lines 3 and 8-10 are highlighted:<pre class="language-html"><code class="language-html"><pre><code data-line-numbers="3,8-10"> <table> <tr> <td>Apples</td> <td>$1</td> <td>7</td> </tr> <tr> <td>Oranges</td> <td>$2</td> <td>18</td> </tr> </table> </code></pre></code></pre><div class="reveal reveal-example"><div class="slides"><section><pre><code data-line-numbers="3,8-10" data-trim data-noescape> <table> <tr> <td>Apples</td> <td>$1</td> <td>7</td> </tr> <tr> <td>Oranges</td> <td>$2</td> <td>18</td> </tr> </table> </code></pre></section></div></div><h4 id="line-number-offset-4.2.0" tabindex="-1">Line Number Offset 4.2.0</h4>You can offset the line number if you want to showcase a excerpt of a longer set of code. In the example below, we set <code>data-ln-start-from="7"</code> to make the line numbers start from 7.<pre class="language-html"><code class="language-html"><pre><code data-line-numbers data-ln-start-from="7"> <tr> <td>Oranges</td> <td>$2</td> <td>18</td> </tr> </code></pre></code></pre><div class="reveal reveal-example"><div class="slides"><section><pre><code data-line-numbers data-ln-start-from="7" data-trim data-noescape> <tr> <td>Oranges</td> <td>$2</td> <td>18</td> </tr> </code></pre></section></div></div><h2 id="step-by-step-highlights" tabindex="-1">Step-by-step Highlights</h2>You can step through multiple code highlights on the same code block. Delimit each of your highlight steps with the <code>|</code> character. For example <code>data-line-numbers="1|2-3|4,6-10"</code> will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10.<pre class="language-html"><code class="language-html"><pre><code data-line-numbers="3-5|8-10|13-15"> <table> <tr> <td>Apples</td> <td>$1</td> <td>7</td> </tr> <tr> <td>Oranges</td> <td>$2</td> <td>18</td> </tr> <tr> <td>Kiwi</td> <td>$3</td> <td>1</td> </tr> </table> </code></pre></code></pre><div class="reveal reveal-example"><div class="slides"><section><pre><code data-line-numbers="3-5|8-10|13-15" data-trim data-noescape> <table> <tr> <td>Apples</td> <td>$1</td> <td>7</td> </tr> <tr> <td>Oranges</td> <td>$2</td> <td>18</td> </tr> <tr> <td>Kiwi</td> <td>$3</td> <td>1</td> </tr> </table> </code></pre></section></div></div><h2 id="language-selection" tabindex="-1">Language selection</h2>By default, <a href="https://highlightjs.org/">highlight.js</a> tries to automatically detect which language is used in the code snippet. It is however possible to overwrite this by adding a <code>language-XXX</code> attribute. The full list of supported languages is available on <a href="https://highlightjs.readthedocs.io/en/latest/supported-languages.html">their documentation</a>.<pre class="language-html"><code class="language-html"><pre><code data-trim class="language-python"> >>> import antigravity >>> print(b"\x01\x02\x03") >>> a = 2 </code></pre></code></pre><div class="reveal reveal-example"><div class="slides"><section><pre><code data-trim class="language-python"> >>> import antigravity >>> print(b"\x01\x02\x03") >>> a = 2 </code></pre></section></div></div><h2 id="html-entities-4.1.0" tabindex="-1">HTML Entities 4.1.0</h2>Content added inside of a <code><code></code> block is parsed as HTML by the web browser. If you have HTML characters (<>) in your code you will need to escape them ($lt; $gt;).To avoid having to escape these characters manually, you can wrap your code in <code><script type="text/template"></code> and we'll handle it for you.<pre class="language-html"><code class="language-html"><pre><code><script type="text/template"> sealed class Either<out A, out B> { data class Left<out A>(val a: A) : Either<A, Nothing>() data class Right<out B>(val b: B) : Either<Nothing, B>() } </script></code></pre></code></pre><h2 id="the-highlight.js-api-%26-beforehighlight-4.2.0" tabindex="-1">The highlight.js API & beforeHighlight 4.2.0</h2>If you want to interact with highlight.js before your code is highlighted you can use the <code>beforeHighlight</code> callback. For example, this can be useful if you want to register a new language via the <a href="https://highlightjs.readthedocs.io/en/latest/api.html">highlight.js API</a>.<pre class="language-js"><code class="language-js">Reveal.initialize({ highlight: { beforeHighlight: (hljs) => hljs.registerLanguage(/*...*/), }, plugins: [RevealHighlight], });</code></pre><h2 id="manual-highlighting" tabindex="-1">Manual Highlighting</h2>All of your code blocks are automatically syntax highlighted when reveal.js starts. If you want to disable this behavior and trigger highlighting on your own you can set the <code>highlightOnLoad</code> flag to false.<pre class="language-js"><code class="language-js">Reveal.initialize({ highlight: { highlightOnLoad: false, }, plugins: [RevealHighlight], }).then(() => { const highlight = Reveal.getPlugin('highlight'); highlight.highlightBlock(/* code block element to highlight */); });</code></pre></article><footer class="footer flex mt-24 pt-8 px-4 w-full border-t border-gray-300 justify-end text-sm"><a href="https://twitter.com/hakimel" class="p-2 text-pink-700 hover:text-pink-900 mr-auto">Created by @hakimel</a> <a href="https://twitter.com/revealjs" class="p-2 text-pink-700 hover:text-pink-900">X (Twitter)</a> <a href="https://github.com/hakimel/reveal.js" class="p-2 text-pink-700 hover:text-pink-900">GitHub</a> <a href="https://github.com/reveal/revealjs.com/tree/master/./src/code.md" class="p-2 text-pink-700 hover:text-pink-900">Edit this page</a></footer></main><div class="hidden extras inset-0 lg:-mb-0 sticky top-16 h-full w-1/5 lg:block"><div class="text-sm px-6 pl-10 pt-8"><div class="mb-4 pb-4 border-b border-gray-300"><script async type="text/javascript" data-src="//cdn.carbonads.com/carbon.js?serve=CKYI553M&placement=revealjscom" id="_carbonads_js"></script></div><div class="mb-4 pb-4 border-b border-gray-300"><a href="https://slides.com"><img src="/images/slides-symbol-512x512.png" width="100" height="100">Slides.com — the reveal.js presentation editor.Try it for free <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>arrow-right</title><path d="M12 3.984l8.016 8.016-8.016 8.016-1.406-1.406 5.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z"></path></svg></a></div><div class="mb-4 pb-4"><a href="/course"><img src="/images/docs/mastering.svg" width="140" height="140">Become a reveal.js pro in the official video course.Learn more <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>arrow-right</title><path d="M12 3.984l8.016 8.016-8.016 8.016-1.406-1.406 5.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z"></path></svg></a></div></div></div></div></div><script src="/main.js?1742477499449" defer="defer"></script><script async src="https://www.googletagmanager.com/gtag/js?id=G-5FB6R2CLCR"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5FB6R2CLCR'); </script></body></html>