Basic Structures

The following codes would generate 2 slides:

                            <div class='reveal'>
                                <div class='slides'>
                                    <section>
                                        <h2>Slide1 Title</h2>
                                        <p>Slide1 content.</p>
                                    </section>

                                    <section>
                                        <h2>Slide2 Title</h2>
                                        <p>Slide2 content.</p>
                                    </section>
                                </div>
                            </div>
                        

Need sub-sections?

Click on the Down arrow to view the source codes for it.

Sub Sections

                            <section>
                                <section> ... </section>
                                <section> ... </section>
                                ...
                            </section>
                        

The current sub-section would be navigated in the normal horizontal direction. And the other sub-sections would be navigated via the vertical arrows.

Source Codes

Effects:

                            function sum(a, b) {
                                return a + b;
                            }

                            let result = sum(3, 5);
                            console.log(result);
                        

Press Down arrow to see how.

Highlight Plugin Setup

                            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/plugin/highlight/zenburn.css">
                            
                            <script type="module">
                                import Reveal from 'https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.esm.js';
                                import RevealHighlight from 'https://cdn.jsdelivr.net/npm/reveal.js/plugin/highlight/highlight.esm.js';

                                Reveal.initialize({
                                    plugins: [RevealHighlight]
                                });
                            </script>
                        

The available CSS files includes zenburn.css (being used) and monokai.css.

Press Down arrow to see how to write source codes.

Writing Source Codes

                            <pre><code data-trim>
                                function sum(a, b) {
                                    return a + b;
                                }

                                let result = sum(3, 5);
                                console.log(result);
                            </code></pre>
                        

HTML characters will be escaped by default.

If not, add data-noescape attribute to the code element.

See more below.

Escaping (<>) Entities

Source Codes:

                            <pre><code data-trim><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>
                        

Effects:

Line Numbers

Source Codes:

Effects:

See more below.

Hilighting Some Lines

Source codes:

Effects:

                            function sum(a, b) {
                                return a + b;
                            }

                            let result = sum(3, 5);
                            console.log(result);
                        

Setting Starting Line

Source codes:

Effects:

                            function sum(a, b) {
                                return a + b;
                            }

                            let result = sum(3, 5);
                            console.log(result);
                        

Stepped Highlights

Source codes:

Effects:

                            function sum(a, b) {
                                return a + b;
                            }

                            let result = sum(3, 5);
                            console.log(result);