Demo for Remark slideshow

Dernière mise à jour : Thursday 28 June 2018 – 23:49

1. What is Remark?

A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:

2. A few slideshows to learn from

Tutorials

.left-column[

What is it?

Why use it?

] .right-column[ If your ideal slideshow creation workflow contains any of the following steps:

Then remark might be perfect for your next.red[*] slideshow!

.footnote[.red[*] You probably want to convert existing slideshows as well] ]

3. How does it work?

A Markdown-formatted chunk of text is transformed into individual slides by JavaScript running in the browser:

Regular Markdown rules apply with only a single exception:

Have a look at the Markdown website if you’re not familiar with Markdown formatting.

4. Showing source code

See how to highlight snippets in different languages

4.1. Show code – Javascript

// Extract unique values of an array
Array.prototype.unique = function () {
    var arr = [];
    for (var i = 0; i < this.length; i++) {
        if (!arr.contains(this[i])) {
            arr.push(this[i]);
        }
    }
    return arr;
};

4.2. Show code – HTML

<body>
    <div>Hello world</div>
    <footer>Done with love</footer>
</body>

4.3. Show code – PHP

public function bind(string $plugin) : bool
{
    if ($this->canAdd()) {
        $aeEvents = \MarkNotes\Events::getInstance();
        $aeEvents->bind('add.buttons', static::$me.'::add');
    }
    return true;
}

5. Let’s play

Question 1: What is the English translation for the name of the German automaker Volkswagen?

Answer 1: People’s car


Question 2: What is the Spanish word for meat?

Answer 2: Carne


Question 3: What is the secret identity of the fictional superhero Batman?

Answer 3: Bruce Wayne

5.1. That’s all folks

[Back to the homepage]

Slideshow created with remark and marknotes