Lecture v1.0.0 w/ by Caboodle Tech

Lecture v1.0.0 w/ by Caboodle Tech

Lecture

Powerful Web Presentations Simplified

Press → to learn more or download Lecture and start creating presentations in minutes!

Out-of-the-box Lecture
comes packed with Features

Press ↓ for an overview of features.

Press → for a live demo.

Transform simple text instructions into diagrams and charts with Mermaid.

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Easily display code examples with Highlight JS Lite. 

                        
                            SELECT
                                passage_name,
                                location,
                                destination
                            FROM
                                hogwarts_secret_passages
                            WHERE
                                destination LIKE '%Room of Requirement%';

KaTex macros and math formulas are supported.

\prs = \pi r^3 --- \sphere = \dfrac{4}{3} \prs
V = \sphere

MathJax3 math formulas are supported.

\[V = \frac{4}{3} \pi r^3\]
Create individual slides or entire presentations with the [Markdown](https://www.markdownguide.org "Markdown Guide"){target="blank"} markup language. [![Markdown Logo](./demo/assets/md-logo.png "Markdown Guide")](https://www.markdownguide.org){target="_blank"} *Advanced markdown syntax is covered in the demo.*

Media

All of the following media elements are supported with various advanced settings you can configure:







Presentation wide or slide specific background images, animated gifs, and videos are also supported!

And of course... fragments, animations, and auto advancement is supported.

Including combinations like highlighting text.

Fading in, then out.

Sliding up while fading in to name a few.

Keyboard Shortcuts

Press ↓ to view important keyboard shortcuts.

Press Shift + ? to view all shortcuts at once.

Themes and Views

S Open speaker view
F Enter fullscreen view
D / L Enable dark / light theme
B or . Blackout view
Shift + P Open print view

Fast Navigation

Press O or Esc to bring up the presentation overview. Using your arrow keys you can navigate to the slide you want and press Space to select it.

Fast Navigation with Preview

Press G to enter a slide number to preview then Enter to jump to your selection or Esc to cancel.

You can also jump to a child slide with the pattern #/#. Entering 2/3 would be slide 2 child 3.

Traditional Navigation

← or H Navigate left
→ or L Navigate right
↑ or K Navigate up
↓ or J Navigate down

Advanced Navigation

N or Space Go forward
P or Shift + Space Go backward
Alt + ← / → / ↑ / ↓ Skip fragments + navigate
Shift + ← or → Jump to first or last slide

Creating Presentations

Presentations are built with standard html and are split into slides (<section>).

Press ↓ for a crash course in building your first presentation.

Parent Container

All presentations should be wrapped in two <div> elements with the appropriate classes: 

                        
                            <div class="lecture">
                                <div class="slides">
                                    <!-- Your slides go here. -->
                                </div>
                            </div>

Adding Slides

Separate slides are created by wrapping individual slide content in <section> elements: 

                        
                            <section>
                                <h1>Slide 1</h1>
                                <p>A paragraph in slide 1.</p>
                            </section>
                            <section>
                                <h1>Slide 2</h1>
                                <p>A paragraph in slide 2.</p>
                            </section>

Vertical Slides

To create vertical slide sections like what you are viewing now, wrap your slides in a <section> element: 

                        
                            <section>
                                <section>
                                    <h1>Child 1</h1>
                                    <p>A paragraph in child 1.</p>
                                </section>
                                <section>
                                    <h1>Child 2</h1>
                                    <p>A paragraph in child 2.</p>
                                </section>
                            </section>

Background Color and Images

Setting various attributes on the slide or presentations <section> element allows you to add all kinds of backgrounds.

Refer to the Reveal demo for more information.

Modify Slide Content

Use one of these classes on the <section> tag to alter the slides content:

left Left align content
center Center align content (default)
right Right align content

Modify Slide Elements

Add these classes to the element you would like to alter or add globally to <div class="slides">:

r-fit-text Auto fit text
hide-numbers Hides line numbers in code samples
show-numbers Shows line numbers in code samples
inline-line-numbers Simplify code sample line numbers

Modify Slide Layout

Use one of these classes on the <section> tag to alter the slides layout:

two-col 2 column layout
three-col 3 column layout
two-col-with-title 2 columns with a title
three-col-with-title 3 column with a title

Other Modifications

To disable the row border in tables add the no-border class to the <table> tag.

You may add the left or right class to the <div class="slides"> element to overwrite the default style of centered content for the whole presentation.

Slide Templates

Notice a change? Slide templates can automatically apply styles, logos, backgrounds, copyrights, and more to slides.

Press ↓ to learn how to add your own slide templates.

Creating a New Template

To create a new slide template add the slide-template class to a <section>: 

                        
                            <section class="slide-template">
                                <img src="..." class="logo">
                                <img src="..." class="logo dark-mode">
                                <p class="copyright">...</p>
                                <div class="background"></div>
                            </section>

Creating a New Template

Keep the following in mind when creating a template:

  • The first slide template will be treated as the default template for all slides.
  • Anything in a slide template will be placed into the background of slides.
  • Slide templates should not be nested in other <section> elements.

Template Names

Name templates by adding the data-template attribute to a templates element: 

                        
                            <section class="slide-template" data-template="demo-alt">
                                <!-- slide template -->
                            </section>

Applying a Template

Apply a specific template to a slide by adding the data-template attribute and the name to your slide(s) <section> element(s): 

                        
                            <section data-template="demo-alt">
                                <!-- slide -->
                            </section>

Inherited Templates

Applying a template to the parent of a vertical section of slides will cause all nested slides to inherit that template and ignore any individually set templates: 

                        
                            <section data-template="demo-alt">
                                <section>
                                    <!-- slide -->
                                </section>
                                <section>
                                    <!-- slide -->
                                </section>
                            </section>

Lecture includes generic styles and css variables for the following elements and classes in slide templates. 

                        
                            <img src="..." class="logo">
                            <img src="..." class="logo dark-mode">
                            <p class="copyright">...</p>
                            <div class="background"></div>

You should be able to affect a lot without having to add additional HTML or styles of your own.

Charts and Diagram

You can add various charts and diagrams using the Mermaid syntax.

Press ↓ for a crash course in adding Mermaid charts and diagrams to your presentations.

All charts and diagrams should be wrapped in a div element with the mermaidclass: 

                        
                            <div class="mermaid">
                                graph LR;
                                    A[Start] --> B[Process 1];
                                    B --> C[Process 2];
                                    C --> D[Process 3];
                                    D --> E[End];
                            </div>

The previous code sample would create this graph:

graph LR; A[Start] --> B[Process 1]; B --> C[Process 2]; C --> D[Process 3]; D --> E[End];

But there are so many other diagrams.
Take a ↓ look!

If fact you can create anyone of these:

And many more not listed here!

sequenceDiagram participant User participant LectureApp participant OnlinePresentation User->>LectureApp: Open Online Presentation (Demo) Note right of User: User accesses the online demo made with Lecture User->>OnlinePresentation: Read How-to Guide Note right of User: User learns how to use Lecture User->>LectureApp: Create New Lecture Note right of User: User starts creating presentations with Lecture User->>LectureApp: Obtain Enlightenment Note right of User: User is happy they found Lecture

Showing Code Samples

Adding code to your presentation is a simple process with a few important rules.

Press ↓ for a crash course in adding code samples to your presentations.

Code samples should be wrapped with <pre><code> elements with any < and > characters converted to their HTML entities &lt; and &gt;.

It is highly recommended to include the code samples language code as a class in the <code> element. Check out the example ↓ for a visual.

Notice the pattern <pre><code class="?"> where you replace ? with the language code: 

                        
                            <pre>
                                <code class="js">
                                    // This is a javascript example
                                    const happy = true;
                                    const sad   = false;
                                </code>
                            </pre>

NOTE: Color highlight is off in this demo because of how we have to write the demo code for you. Proper syntax highlight will appear in your presentations.

Line Numbers

Line numbers are enabled by default. To disable line numbers add the hide-numbers class to the <pre> element like so: <pre class="hide-numbers">

You can also add the class inline-line-numbers to simplify the line number styles. These classes can also be added globally to change all code samples.

Math

Lecture supports KaTeX and MathJax3 math. You can use both together in the same presentation.

Press ↓ for a crash course in adding math examples to your presentations.

KaTeX and MathJax3 math should be placed inside a <div> element with the appropriate class added: 

                        
                            <!-- Katex example: -->
                            <div class="katex">
                                Add KaTeX math here...
                            </div>

                            <!-- MathJax example: -->
                            <div class="mathjax-3">
                                Add MathJax math here...
                            </div>

Katex Macros

If you would like to add a macro to Katex, declare the macro in a <div> element with the katex-macro class.

The new macro is declared as: [\name] = [macro]

To declare more than one macro at a time, place --- on its own line in-between each macro definition.

Katex Macros

Here is how to declare two katex macros at once: 

                        
                            <div class="katex-macro">
                                \prs = \pi r^3
                                ---
                                \sphere = \dfrac{4}{3} \prs
                            </div>
                            <!-- And then use these macros: -->
                            <div class="katex">
                                V = \sphere
                            </div>

NOTE: The math was intentionally made harder to demo using macros.

Markdown

You can build slides or an entire presentation with standard markdown. Lecture also supports some advanced markdown syntax.

Press ↓ for a crash course in adding markdown to your presentations.

To declare a slides content as markdown add the data-markdown attribute to the <section> element: 

                        
                            <section data-markdown>
                                ## Heading

                                A paragraph with a [link](https://example.com).
                            </section>

To make an entire presentation out of markdown use only one <section> element and ---, markdowns horizontal rule, to separate slides: 

                        
                            <section data-markdown>
                                ## Slide 1
                                A paragraph with a [link](https://hakim.se).
                                ---
                                ## Slide 2
                                ---
                                ## Slide 3
                            </section>

Advanced Syntax

Lecture implements the standard common mark markdown syntax in addition to some GitHub Flavored markdown.

Lecture uses special markdown syntax ↓ to add attribute support for images and links.

Advanced Syntax

You can add any attribute to an image or link in markdown by adding the attributes in {...} after the standard image or link syntax: 

                        
                            <!-- Link that opens in a new tab instead. -->
                            [Link Text](URL){target="_blank"}

                            <!-- Image with a constrained width -->
                            ![Alt Text](URL){width="100"}

Advanced Syntax

You can add as many attributes you like just separate them with a space: {target="blank" rel="nofollow"}

Your can also place images with attributes inside links: 

                        
                            <!-- An image being used as a link with attributes. -->
                            [![Alt Text](URL){width="100"}](URL){target="_blank"}

Media

Use standard HTML for the following media elements:

The Reveal documentation explains advanced features and settings for these elements.

Fragments and Animations

Text fragments and slide transitions require adding the appropriate classes and/or attributes to elements.

Click on the above links to be taken to the Reveal documentation for these features.

🏁 Finished 🏁

Download Lecture and start creating your own presentations in minutes!