Install and run a Mojolicious server

Santa's elf had a problem. He had to write a presentation very fast and show it to a bunch of new elves. The email assigning this to him was sent by Santa himself. The elf started to look on MetaCPAN and found this module: Mojolicious::Plugin::RevealJS

He quickly typed the following commands:

cpanm Mojolicius Mojolicious::Plugin::RevealJS

Now he could generate a Mojo lite app using:

mojo generate lite-app slide_show

Because the elf was trained in the ancient arts of the elders he could open new file with vim and paste this code in:

use Mojolicious::Lite -signatures;
app->static->paths(['.']);
plugin 'RevealJS';
any '/' => { template => 'presentation', layout => 'revealjs' };
app->start;

Then he swiftly created two folders:

    mkdir templates
    mkdir examples

Use html/Markdown to generate content

After that the file for the presentation was generated:

vim templates/presentation.html.ep

Finally he could add his first slides to the presentation using html:

    <section>
    <h4> Create Professional Slideshows with Mojolicious::Plugin::RevealJS</h4>
    <p>by Trif Dragos</p>
    </section>

    <section>
    <h2>About this talk</h2>
        <ul>
        <li>Install and run a Mojolicius server</li>
        <li>Configure Mojolicious::Plugin::RevealJS</li>
        <li>Use html/MarkDown to generate content</li>
        <li>Add code snippets in your presentation</li>
        <li>Add notes visible only for the author of the presentation</li>
    </ul>
    </section>

Using the morbo slide_show command he could start the server. Only after that he was able to access the presentation on his local host: http://127.0.0.1:3000

Time was ticking. The elf need to speed things up. So, instead of HTML tags, he used Markdown format:

    %= markdown_section begin
    #### Create Professional Slideshows with Mojolicious::Plugin::RevealJS
    % end

    %= markdown_section begin
    * Install and run a Mojolicius server
    * Configure Mojolicious::Plugin::RevealJS
    % end

For more details on how to do this in Markdown format he used this link: Markdown-Cheatsheet

Add code snippets in your presentation

Finally he wanted to insert code snippets in his work. For this he use the include_code statement which points to the file to include and the correct syntax highlighting to use:

    <section>
    <section>
        %= include_code 'examples/test.pl',  language => 'perl'
    </section>
    <section>
        %= include_code 'examples/app.js', language => 'javascript' 
    </section>
    </section>

Disaster! The examples/test.pl file has too much code in it. The new elves will be lost forever if they see this. He opened the file and added some magic comments to it:

use strict;
use warnings;

use lib 'lib';

use Foo;
use feature 'say';

# reveal begin object_creation
my $o = Foo->new();
# reveal end object_creation

$o->print_foo_bar();
$o->test(1);
say $o->test();

say $o->test();

After the section key was added to the include_code statement:

%= include_code 'examples/test.pl', language => 'pl', section => 'object_creation'

Only this line my $o = Foo->new(); between those comments was visible in the presentation.

Add notes visible only for the author of the presentation:

Finally he added some notes to each slide:

    <section>
    <h4> Create Professional Slideshows with Mojolicious::Plugin::RevealJS</h4>
    <p>by Trif Dragos</p>
    %= markdown_section begin
    Note:
    my notes
    %end
    </section>

Now when he pressed s, he could see the notes from each slide in a new window, which also allowed him to control his presentation.

Bibliography:

Create professional with App revealup

Advanced slideshow maneuvers