Путівник із розробки HTML-презентацій

Про підручник

Підручник знайомить з розробкою комп’ютерних презентацій за допомогою фреймворка reveal.js .

Презентації, розроблені за допомогою reveal.js, побудовані на основі відкритих вебтехнологій: HTML , Markdown , CSS , JavaScript . Такі презентації зручно переглядати у вебпереглядачі без встановлення додаткових застосунків.

Підручник створений у формі практичного керівництва на основі документації reveal.js.

Цілі створення підручника:

розглянути можливість використання вільних засобів для створення презентацій без прив’язування до конкретних застосунків;
познайомити з процесом інтеграції різних вебтехнологій в єдиному проекті на прикладі створення HTML-презентації;
використати підручник як практичний додаток до модуля Вебтехнології у шкільному курсі інформатики.

Робота із підручником передбачає, що ви:

володієте навичками роботи в операційній системі на рівні впевненого користувача;
маєте початкові уявлення про HTML, Markdown, CSS і JavaScript.

Якщо ви ніколи не використовували Markdown, познайомитись з цією мовою розмітки вам допоможе Путівник по Markdown .

Для усіх, хто цікавиться вебтехнологіями.

1. Вступ

Усі ми добре знаємо значення слова «презентація».

Презентація - процес публічного представлення певної інформації.

В рекламі, на конференціях, під час демонстрацій ідей, на уроках тощо часто використовують «комп’ютерні презентації».

У багатьох випадках, коли говорять про «комп’ютерну презентацію», мають на увазі певний набір слайдів, призначених для розкриття певної теми. Слайди можуть містити текст і мати мультимедійне наповнення (зображення, звук, відео).

Під час показу такої презентації доповідач (той, хто демонструє презентацію й інформує слухачів) інтерактивно взаємодіє з презентацією, керуючи відтворенням слайдів. Показ презентації може відбуватися й автоматично.

Є велика кількість затосунків і сервісів, які використовуються для створення комп’ютерних слайдових презентацій:

Принаймні, один із, наведених у списку, застосунків чи сервісів ви вже використовували для створення слайдових презентацій.

У даному підручнику, для створення презентацій, вищенаведені рішення застосовуватись не будуть. Розробка презентацій буде виконуватися за допомогою reveal.js - фреймворка з відкритим кодом для створення HTML-презентацій.

2. Короткий огляд reveal.js

Презентації, розроблені разом із reveal.js, побудовані на основі відкритих вебтехнологій. Зокрема, за допомогою HTML і Markdown можна створювати слайди презентації, а за допомогою CSS - змінювати оформлення слайдів. Також, у презентацію можна додавати певну поведінку, використовуючи JavaScript.

reveal.js містить достатньо широкий спектр функцій, включаючи вертикальні слайди, підтримку HTML5 і Markdown, автоматичну анімацію, експорт у PDF, нотатки доповідача, підсвічування програмного коду і багато іншого. Окрім того, презентації чудово виглядають на сенсорних пристроях, таких як смартфони та планшети.

Презентації пишуть за допомогою HTML або Markdown. Проте, можна використовувати онлайн-редактор (водночас, це й платформа для обміну презентаціями) для тих, хто віддає перевагу у створенні презентацій через графічний інтерфейс (безкоштовна версія має певні обмеження).

3. Встановлення reveal.js

Є різні варіанти встановлення reveal.js на локальний комп’ютер.

Стандартне встановлення reveal.js - це найпростіший спосіб, щоб розпочати роботу і вимагає лише наявності вебпереглядача.

У цьому випадку, необхідно лише завантажити копію сховища reveal.js з GitHub та відкрити файл index.html у своєму вебпереглядачі.

Отже, виконаємо такий алгоритм:

Завантажити останню версію reveal.js з github.com/hakimel/reveal.js/releases .
Розархівувати завантажений архів і перейти у каталог reveal.js.
За допомогою вашого улюбленого текстового редактора для написання коду замінити вміст у файлі index.html власним кодом і зберегти зміни у файлі.
Відкрити index.html у вебпереглядачі для перегляду презентації.

Деякі функції reveal.js, як-от розмітка Markdown із зовнішнього файла і нотатки доповідача, вимагають, щоб презентації виконувалися на локальному вебсервері. Наступний алгоритм розширеного встановлення встановить такий вебсервер:

Встановити Node.js (10.0.0 або новішої версії).
Створити каталог для майбутньої презентації.
Клонувати сховище reveal.js (використовується командний рядок термінального вікна) у створений каталог:

git clone https://github.com/hakimel/reveal.js.git

Перейти у каталог reveal.js та встановити залежності за допомогою npm - менеджера пакунків для мови програмування JavaScript:

cd reveal.js && npm install

Запустити локальний вебсервер розробки із каталогу reveal.js за допомогою командного рядка:

npm start

Відкрити http://localhost:8000, щоб переглянути презентацію.

Сервер розробки, за замовчуванням, використовує порт з номером 8000. Ви можете використовувати інший порт, вказавши це у команді для запуску вебсервера: npm start -- --port=8001.

Результатом виконання поданих алгоритмів буде презентація з мінімальним набором функціональності.

Приклад 1

У каталозі revealjs/examples створеної презентації можна переглянути приклади застосування основних можливостей reveal.js.

У підручнику використовується reveal.js версії 4.1.0.

4. Створення вмісту презентації

4.1. Розмітка з HTML

Вміст презентацій можна створювати за допомогою тегів мови HTML. Розглянемо базовий HTML-код робочої презентації reveal.js (за замовчуванням, вміст файла index.html):

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>Приклад 1</title>

        <link rel="stylesheet" href="dist/reset.css">
        <link rel="stylesheet" href="dist/reveal.css">
        <link rel="stylesheet" href="dist/theme/black.css" id="theme">

        <link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>Слайд 1</section>
                <section>Слайд 2</section>
            </div>
        </div>

        <script src="dist/reveal.js"></script>
        <script src="plugin/notes/notes.js"></script>
        <script src="plugin/markdown/markdown.js"></script>
        <script src="plugin/highlight/highlight.js"></script>
        <script>
            Reveal.initialize({
                hash: true,
                plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
            });
        </script>
    </body>
</html>

Як бачимо, в коді міститься стандартна структура вебсторінки, визначена тегами html, head, title і body. Ієрархія розмітки презентації у структурі вебсторінки повинна міститися в тегах body і виглядати так:

.reveal > .slides > section

де .reveal і .slides - імена вбудованих у reveal.js CSS-класів, section- тег, який визначає один слайд і може повторюватися довільну кількість разів.

Розмір вікна перегляду презентації на вебсторінці визначається класом .reveal-viewport, який, за замовчуванням, застосовується до тега body при перегляді презентації у вебпереглядачі.

Якщо необхідно розмістити кілька презентацій на одній сторінці, для перегляду кожної із презентацій буде використовуватись свій екземпляр класу .reveal.

Якщо розмістити кілька тегів section всередині іншого тега section, вони будуть відображатися як вертикальні слайди.

Перший з вертикальних слайдів - це «корінь» вертикальних слайдів, і він буде включений в горизонтальну послідовність слайдів. В коді HTML це можна проілюструвати так:

<div class="reveal">
    <div class="slides">
        <section>Слайд 1</section>
        <section>Слайд 2</section>
        <section>
            <section>Слайд 3.1</section>
            <section>Слайд 3.2</section>
        </section>
        <section>Слайд 4</section>
    </div>
</div>

У даному випадку, Слайд 3.1 і Слайд 3.2 - вертикальні слайди. Водночас, слайд Слайд 3.1 є ще й горизонтальним слайдом.

Приклад 2

4.2. Атрибути

Для зміни властивостей вмісту презентації використовуються атрибути, які додаються до відповідних HTML-тегів.

Наприклад, якщо встановити атрибут data-state з певним значенням для деякого слайда, позначеного тегом section, при відкритті цього слайда значення атрибута data-state буде застосовано як CSS-клас до нього (у коді HTML-презентації - клас буде застосований до елемента body, за замовчуванням).

Наприклад, для Слайд 4

<section data-state="make-it">Слайд 4</section>

зміниться колір тла

/* CSS */
.make-it {
    background-color: #007399;
}

коли відбудеться перехід на цей слайд.

Приклад 3

Зміни можна не лише візуально спостерігати у вебпереглядачі, але й «прослуховувати» в консолі розробника вебпереглядача за допомогою JavaScript:

Reveal.on( 'make-it', () => {
    console.log('колір тла змінився');
});

Консоль розробника у вебпереглядачах Google Chrome, Mozilla Firefox і Opera відкривається сполученням клавіш Ctrl+Shift+I або клавішею F12 .

4.3. Розмітка з Markdown

Вміст презентації дуже зручно створювати за допомогою Markdown.

Щоб створити слайди за допомогою Markdown, необхідно додати атрибут data-markdown до тега section та помістити вміст у тег script з атрибутом type="text/template", як у прикладі нижче.

<div class="reveal">
    <div class="slides">

        <section data-markdown data-separator="---">
            <script type="text/template">
                ## Демонстрація 1
                Слайд 1
                ---
                ## Демонстрація 1
                Слайд 2
                ---
                ## Демонстрація 1
                Слайд 3
            </script>
        </section>

        <section data-markdown data-separator="^\n---\n$">
            <script type="text/template">
                ## Демонстрація 2
                Слайд 1

                ---

                ## Демонстрація 2
                Слайд 2

                ---

                ## Демонстрація 2
                Слайд 3
            </script>
        </section>

        <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
            <script type="text/template">
                ## Демонстрація 3
                Слайд 1

                ---

                ## Демонстрація 3
                Слайд 2.1

                --

                ## Демонстрація 3
                Слайд 2.2

                --

                ## Демонстрація 3
                Слайд 2.3

                ---

                ## Демонстрація 3
                Слайд 3
            </script>
        </section>

        <section data-markdown>
            <script type="text/template">
                A

                ---

                B

                ---

                C
            </script>
        </section>

        <section data-markdown>
            <script type="text/template">
                <!-- .slide: data-background="#2a9d8f" -->
                ## Атрибути слайда
            </script>
        </section>

        <section data-markdown>
            <script type="text/template">
                ## Атрибути елементів
                - Елемент 1 <!-- .element: class="fragment" data-fragment-index="2" -->
                - Елемент 2 <!-- .element: class="fragment" data-fragment-index="3" -->
                - Елемент 3 <!-- .element: class="fragment" data-fragment-index="1" -->
            </script>
        </section>

        <section data-markdown>
            <script type="text/template">
                ```python [2|3|4|5-6|7|8|9]
                # Python 3: Ряд Фібоначчі до n
                >>> def fib(n):
                >>>     a, b = 0, 1
                >>>     while a < n:
                >>>         print(a, end=' ')
                >>>         a, b = b, a+b
                >>>     print()
                >>> fib(1000)
                0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987
                ```
            </script>
        </section>

        <section data-markdown>
            <script type="text/template">
                [![Markdown Guide](https://res.cloudinary.com/gtstack/image/upload/v1585328349/stackedit/mark_down_nxisw2.png "Путівник по Markdown")](https://markdown.rozh2sch.org.ua/)
            </script>
        </section>
    </div>
</div>

Проаналізуємо розмітку створених слайдів.

Для слайдів Демонстрація 1 використано атрибут data-separator зі значенням --- як розділювач слайдів і без порожніх рядків в розмітці. Цей варіант можна використовувати лише для горизонтальних слайдів.

Для слайдів Демонстрація 2 використано атрибут data-separator зі значенням регулярного виразу ^\n---\n$ як розділювач слайдів. В цьому випадку, використовується порожній рядок, три тире, порожній рядок для розділення слайдів. Цей варіант спрацює лише для горизонтальних слайдів.

Для слайдів Демонстрація 3 використано вже два атрибути: data-separator і data-separator-vertical, які встановлюють різні розділювачі, відповідно, для горизонтальних і вертикальних слайдів.

Якщо не вказувати атрибути розділювачів (слайд з літерами A, B, C), розділення на слайди не відбувається.

Далі, у коді вище, показаний синтаксис Markdown для:

встановлення атрибутів для слайда (зміна кольору тла);
встановлення атрибутів елементів на слайді (список елементів, які з’являються в числовому порядку);
розміщення на слайді програмного коду з підсвіткою синтаксису;
розміщення на слайді графічного зображення як гіперпосилання.

Приклад 4

Для додавання атрибутів до слайдів і до об’єктів (елементів) на слайдах в Markdown використовується спеціальний синтаксис - коментарі HTML ().

Використаємо синтаксис коментарів HTML () у наступному прикладі.

<div class="reveal">
    <div class="slides">
        <section data-markdown>
            <script type="text/template">
                ## Меню
                <!-- .slide: data-background="#20a39e" -->
                 🍇 <!-- .element: class="fragment" data-fragment-index="2" -->
                 🍉 <!-- .element: class="fragment" data-fragment-index="1" -->
                 🥝 <!-- .element: class="fragment" data-fragment-index="4" -->
                 🍈 <!-- .element: class="fragment" data-fragment-index="3" -->
            </script>
        </section>
    </div>
</div>

Як видно у коді, до слайда додано атрибут data-background для зміни кольору тла слайда, а для елементів на слайді додано атрибути data-fragment-index, що визначають черговість появи елементів списку.

Приклад 5

Використання мови розмітки Markdown є можливим завдяки вбудованому плагіну markdown.js.

Якщо необхідно вручну додати цей плагін до нової презентації, використовують такий код:

<script src="plugin/markdown/markdown.js"></script>
<script>
    Reveal.initialize({
        plugins: [ RevealMarkdown ]
    });
</script>

Іншим способом створення вмісту презентацій за допомогою Markdown є створення окремого файла з розміткою і підключення його до презентації.

У цьому випадку, варто звернути увагу на аргументи розділювачів, які визначатимуть, як слайди (горизонтальні і вертикальні) будуть розмежовані у зовнішньому файлі.

Для цього використовується кілька атрибутів:

data-markdown="example.md" - містить назву файла (наприклад, example.md) з розміткою Markdown;
data-separator="^\n\n\n" - визначає розділювач для горизонтальних слайдів (в даному випадку розділювачем є три рядки);
data-separator-vertical="^\n\n" - визначає розділювач для вертикальних слайдів (в даному випадку розділювачем є два рядки);
data-separator-notes="^Note:" - позначає місце, де починаються нотатки доповідача;
data-charset="utf-8">- атрибут є необов’язковим і вказує, яке кодування використовувати при завантаженні зовнішнього файлу.

Якщо у вас система Windows, використовуйте \r\n замість \n або регулярний вираз, що підтримує всі операційні системи: \r?\n замість \n.

Якщо зовнішній файл використовується на локальному комп’ютері, reveal.js необхідно запускати за допомогою локального вебсервера. У випадку розміщення презентації і зовнішнього файла Markdown на реальному хостингу все працює автоматично без додаткових налаштувань.

Наступний приклад показує налаштовування усіх доступних атрибутів:

<div class="reveal">
    <div class="slides">
        <section data-markdown="example.md"
            data-separator="^\r\n\r\n\r\n"
            data-separator-vertical="^\r\n\r\n"
            data-separator-notes="^Note:"
            data-charset="utf-8">
        </section>
    </div>
</div>

А ось так може виглядати вміст зовнішнього файла (example.md) з розміткою Markdown (зверніть увагу на кількість порожніх рядків, що використовуються як розділювачі слайдів):

## Слайд 1
Абзац з _деяким текстом_ та [посиланням](https://revealjs.com/).
Note:
Деякі нотатки доповідача 📝.



## Слайд 2
Деякий _текст_ на **другому слайді**.
Note:
Деякі інші нотатки доповідача 📝.



## Слайд 3.1
Вертикальний і горизонтальний **Слайд 3.1**


## Слайд 3.2
Вертикальний **Слайд 3.2**


## Слайд 3.3
Вертикальний **Слайд 3.3**



## Слайд 4
_Деякий текст_ на **четвертому слайді**.

Приклад 6

Щоб переглянути нотатки доповідача, використовуйте клавішу S при демонстрації презентації.

4.4. Тло слайда

Для встановлення тла слайда необхідно додати атрибут data-background до тега section і вказати тип тла.

Підтримуються чотири різних типів тла: колір, зображення, відео та фрейм.

Фрейм (англ. frame) - окремий HTML-документ, який сам чи разом з іншими документами відображений у вікні вебпереглядача.

На слайдах презентації підтримуються всі формати кольорів CSS, включаючи шістнадцяткові значення, ключові слова й функції rgba() і hsl().

<div class="reveal">
    <div class="slides">
        <section data-background-color="aquamarine">
            <h2>🐠</h2>
        </section>
        <section data-background-color="#52414c">
            <h2>🐧</h2>
        </section>
        <section data-background-color="rgb(207, 209, 134)">
            <h2>🐪</h2>
        </section>
        <section data-background-color="hsl(119, 22%, 45%)">
            <h2>🦌</h2>
        </section>
    </div>
</div>

Приклад 7

Для встановлення зображення як тла слайда використовують атрибути і значення представлені в таблиці.

Таблиця "Зображення як тло слайда"
Атрибут	За замовчуванням	Опис
`data-background-image`		`URL`-адреса зображення для відображення (`GIF`-файли перезапускаються, коли слайд відкриється)
`data-background-size`	`cover`	background-size
`data-background-position`	`center`	background-position
`data-background-repeat`	`no-repeat`	background-repeat
`data-background-opacity`	`1`	Непрозорість зображення за шкалою `0-1` (`0` прозорий, `1` повністю непрозорий)

Використаємо подану HTML-розмітку для демонстрації використання зображення як тла слайдів.

<div class="reveal">
    <div class="slides">
        <section data-background-image="bg.jpg" data-background-opacity="0.4">
            <h2>Тло-зображення має непрозорість із значенням 0.4</h2>
        </section>
        <section data-background-image="bg.jpg" data-background-size="500px" data-background-repeat="repeat">
            <h2>Тло-зображення має розмір 500 пікселів і повторюється</h2>
        </section>
    </div>
</div>

Приклад 8

Для вставлення відео як тла слайда використовують аргументи й значення представлені в таблиці нижче.

Таблиця "Відео як тло слайда"
Атрибут	За замовчуванням	Опис
`data-background-video`		Єдине джерело відео або список, відокремлених комами, джерел
`data-background-video-loop`		За наявності атрибуту, відео відтворюється безперервно
`data-background-video-muted`		За наявності атрибуту, відео відтворюється без звуку
`data-background-size`	`cover`	Використовуйте `cover` для відтворення відео у повноекранному режимі або `contain` у протилежному випадку
`data-background-opacity`	`1`	Непрозорість відео за шкалою `0-1` (`0` прозорий, `1` повністю непрозорий)

Використаємо подану HTML-розмітку для демонстрації використання відео як тла слайдів.

<div class="reveal">
    <div class="slides">
        <section data-background-video="video.mp4" data-background-video-loop data-background-video-muted>
            <h2>Відео</h2>
        </section>
    </div>
</div>

Приклад 9

Фрейм вставляє вебсторінку як тло слайда, яка займає усю ширину та висоту.

Використання iframe - це зручний спосіб включити вміст із зовнішніх джерел, наприклад, відео YouTube чи Google Sheets. reveal.js автоматично виявляє вбудовані URL-адреси YouTube та Vimeo і автоматично відтворює їх, коли слайд стає видимим.

Рамка iframe знаходиться у шарі, за слайдами, і, таким чином, з фреймом не можна взаємодіяти за замовчуванням. Щоб ваше тло було інтерактивне, ви можете додати атрибут data-background-interactive.

Для вставлення фрейма як тла слайда використовуйте аргументи й значення представлені в таблиці.

Таблиця "Використання iframe"
Атрибут	Опис
`data-background-iframe`	`URL`-адреса для завантаження `iframe`
`data-background-interactive`	Додайте цей атрибут, щоб можна було взаємодіяти із вмістом `iframe`, водночас, це унеможливить взаємодію із вмістом слайда

Використаємо подану HTML-розмітку для демонстрації використання фреймів як тла слайдів.

<div class="reveal">
    <div class="slides">
        <section data-background-iframe="https://revealjs.com/" data-background-interactive>
            <h2>Фрейм</h2>
        </section>
    </div>
</div>

Приклад 10

У нашому випадку, відкривається вебсторінка, як тло слайда, з якою можна взаємодіяти.

Якщо ви хочете використовувати ефект паралаксу, встановіть перші два параметра нижче, коли ініціалізується reveal.js (інші два не є обов’язковими).

Reveal.initialize({
    // Тло-зображення для паралакс-ефекту
    parallaxBackgroundImage: 'spacex.jpg',

    // Розмір тла-зображення паралакс-ефекту
    parallaxBackgroundSize: '2048px 1364px', // CSS синтаксис, на даний момент підтримуються лише пікселі (не використовуйте % або auto)

    // Кількість пікселів для переміщення тла паралаксу на слайд
    // - Обчислюється автоматично, якщо не вказано
    // - Встановити 0, щоб вимкнути рух по осі
    parallaxBackgroundHorizontal: 200,
    parallaxBackgroundVertical: 50
});

Переконайтесь, що розмір тла набагато більший за розмір екрана, щоб дозволити деяке прокручування.

Приклад 11

4.5. Мультимедіа

reveal.js надає зручну механіку для автоматичного відтворення та попереднього завантаження HTML-медіа-елементів, засновану на видимості та близькості слайдів. Це працює для тегів video, audio та iframe.

Наприклад, для автоматичного відтворення медіа-елемента, коли відображатиметься слайд, необхідно додати атрибут data-autoplay до тега медіа-елемента.

<video data-autoplay src="video.mp4"></video>

Вміст тегів video/audio та контент з YouTube/Vimeo автоматично призупиняє відтворення під час виходу із слайда. Це можна вимкнути, додавши до тега, що визначає медіа-елемент, атрибут data-ignore.

Якщо ви хочете ввімкнути або вимкнути автоматичне відтворення для всіх вбудованих медіа-елементів презентації, то можна скористатися параметром autoPlayMedia, який вказується в налаштуваннях презентації.

Якщо встановити цю опцію як true, усі медіа-елементи будуть автоматично відтворюватися незважаючи на те, чи присутні атрибути data-autoplay, чи ні.

Reveal.initialize({
    autoPlayMedia: true
})

Якщо встановити значення false - медіа-елементи програватись автоматично не будуть.

Для презентації з великою кількістю медіа-файлів або вмістом iframe, reveal.js може виконувати попереднє завантаження таких елементів. Це означає, що завантаження вмісту буде відбуватися лише для кількох слайдів, найближчих до поточного слайда.

Щоб увімкнути попереднє завантаження, все, що вам потрібно зробити, - це змінити атрибути src на data-src. Це підтримується для елементів зображення, відео, аудіо та iframe.

<section>
    <img data-src="image.png">
    <iframe data-src="https://revealjs.com/"></iframe>
    <video>
        <source data-src="video.webm" type="video/webm" />
        <source data-src="video.mp4" type="video/mp4" />
    </video>
</section>

Коли завантажуються відео чи аудіо, reveal.js не почне відтворювати цей вміст, поки слайд не стане видимим.

Однак, немає можливості контролювати це для iframe, оскільки фрейм може містити будь-який вміст, який завантажуються лише тоді, коли слайд, що містить iframe, стане видимим і вивантажуються, як тільки слайд стає прихованим. Тобто, якщо ви завантажили iframe перед тим, як слайд буде видно на екрані, він може почати відтворювати відео та звук у фоновому режимі.

Таку поведінку можна змінити, вказавши атрибут data-preload для тега iframe.

Якщо ви хочете заздалегідь передзавантажити iframe, ви можете додати атрибут data-preload до слайда з тегом section.

<section>
    <iframe data-src="https://revealjs.com/" data-preload></iframe>
</section>

4.6. Програмний код

reveal.js включає в себе потужний набір функцій для підсвітки синтаксису початкового коду на основі highlight.js . Цей функціонал реалізується одним із основних плагінів, які входить до шаблону презентації за замовчуванням.

Нижче наводиться приклад коду з підсвіткою синтаксису для мови Python (зверніть увагу на значення атрибута class).

Якщо присутній атрибут data-trim, символи пропусків у вмісті, визначеного тегом code, автоматично видаляються.

<section>
    <pre><code class="python" data-trim>
        n = input()
        li = list(map(int, input().split()))
        li.reverse()
        r = []
        for i in li:
            if i not in r and li.count(i) > 1:
                r.append(i)
        if r:
            print(' '.join(map(str, r[::-1])))
        else:
            print('NO')
    </code></pre>
</section>

Приклад 12

Переконайтеся, що тема для підсвітки синтаксису включена у ваш документ презентації і плагін highlight.js ініціалізований.

За замовчуванням, разом з reveal.js поширюються теми оформлення monokai (monokai.css) і zenburn (zenburn.css). Повний список доступних тем для бібліотеки highlight.js можна знайти на highlightjs.org .

Підключення файла теми zenburn.css у файл презентації (за замовчуванням, index.html):

<head>
    ...
    <link rel="stylesheet" href="plugin/highlight/zenburn.css">
</head>

Ініціалізація плагіна highlight.js у файлі презентації (за замовчуванням, index.html):

<script src="plugin/highlight/highlight.js"></script>
<script>
    Reveal.initialize({
      plugins: [ RevealHighlight ]
    });
</script>

Якщо необхідно підсвітити конкретні рядки коду, можна записати список номерів рядків, розділених комами, як значення в атрибуті data-line-numbers тега code.

Наприклад, у наступному прикладі рядки 4 і 9 будуть підсвічені:

<section>
    <pre><code class="html" data-trim data-line-numbers="4,9">
        <table>
            <tbody>
                <tr>
                    <td>Брендан Айк</td>
                    <td>Джон Грубер</td>
                    <td>Гвідо ван Россум</td>
                </tr>
                <tr>
                    <td>JavaScript</td>
                    <td>Markdown</td>
                    <td>Python</td>
                </tr>
            </tbody>
        </table>
    </code></pre>
</section>

Якщо використати розділювач | для списку з номерів рядків коду, можна переглядати підсвітку блоків коду.

Наприклад, атрибут зі значеннями data-line-numbers="4,9|5,10|6,11", створює три блоки підсвічування коду - спочатку виділяються рядки 4 і 9, на наступному кроці будуть виділені рядки 5 і 10, і, нарешті, рядки 6 і 11.

<section>
    <pre><code class="html" data-trim data-line-numbers="4,9|5,10|6,11">
        <table>
            <tbody>
                <tr>
                    <td>Брендан Айк</td>
                    <td>Джон Грубер</td>
                    <td>Гвідо ван Россум</td>
                </tr>
                <tr>
                    <td>JavaScript</td>
                    <td>Markdown</td>
                    <td>Python</td>
                </tr>
            </tbody>
        </table>
    </code></pre>
</section>

Приклад 13

4.7. Фрагменти

Фрагменти використовуються для виділення або поступової появи вмісту окремих елементів (тегів) на слайді. Таким чином, кожен елемент із CSS-класом .fragment буде переглянуто, перш ніж відбудеться перехід до наступного слайду.

Поведінка фрагмента (елемента з CSS-класом .fragment) за замовчуванням - спочатку бути невидимим, а потім з’являтися. Цей стиль поведінки можна змінити, додавши до фрагмента інші CSS-класи, список яких поданий у таблиці нижче.

Таблиця "Ефекти для фрагментів на слайді"
Назва класу	Ефект
`.fade-out`	Спочатку фрагмент видимий, а потім зникає
`.fade-up`	Поява фрагмента знизу-догори
`.fade-down`	Поява фрагмента згори-донизу
`.fade-left`	Поява фрагмента справа-наліво
`.fade-right`	Поява фрагмента зліва-направо
`.fade-in-then-out`	Поява фрагмента, а потім зникнення на наступному кроці
`.fade-in-then-semi-out`	Поява фрагмента, а потім на `50%` вицвітання фрагмента на наступному кроці
`.grow`	Збільшення масштабу фрагмента
`.shrink`	Зменшення масштабу фрагмента
`.strike`	Закреслення фрагмента
`.highlight-red`	Встановити червоний колір фрагмента
`.highlight-green`	Встановити зелений колір фрагмента
`.highlight-blue`	Встановити синій колір фрагмента
`.highlight-current-red`	Встановити червоний колір фрагмента, на наступному кроці відновити попередній
`.highlight-current-green`	Встановити зелений колір фрагмента, на наступному кроці відновити попередній
`.highlight-current-blue`	Встановити синій колір фрагмента, на наступному кроці відновити попередній

Використаємо подану HTML-розмітку для демонстрації деяких ефектів, що додані фрагментам на слайді.

<div class="reveal">
    <div class="slides">
        <section>
            <p class="fragment">Спочатку фрагмент схований, а потім з'являється (за замовчуванням)</p>
            <p class="fragment fade-out">Спочатку фрагмент видно, а потім зникає</p>
            <p class="fragment highlight-blue">Фрагмент змінює колір</p>
            <p class="fragment fade-in-then-out">Поява фрагмента, а потім зникнення на наступному кроці</p>
            <p class="fragment fade-in-then-semi-out">Поява фрагмента, а потім 50% затемнення фрагмента на наступному кроці</p>
            <p class="fragment fade-right">Поява фрагмента зліва направо</p>
        </section>
    </div>
</div>

Приклад 14

До вмісту можна додавати кілька послідовних ефектів, помістивши цей вміст у кілька фрагментів.

<div class="reveal">
    <div class="slides">
        <section>
            <span class="fragment">
                <span class="fragment highlight-red">
                    <span class="fragment fade-out">
                        Поява > Зміна кольору > Зникнення
                    </span>
                </span>
            </span>
        </section>
    </div>
</div>

Приклад 15

За замовчуванням, фрагменти відображаються в тому порядку, в якому вони записані в коді. Цей порядок відображення можна змінити за допомогою атрибута data-fragment-index. Окрім того, однаковий індекс може використовуватись для кількох фрагментів.

<div class="reveal">
    <div class="slides">
        <section>
            <p class="fragment" data-fragment-index="3">Останній</p>
            <p class="fragment" data-fragment-index="2">Другий</p>
            <p class="fragment" data-fragment-index="1">Перший</p>
            <p class="fragment" data-fragment-index="2">Другий</p>
        </section>
    </div>
</div>

Приклад 16

Під час показу або приховування фрагмента, reveal.js викликає такі події:

Reveal.on( 'fragmentshown', event => {
    // event.fragment = фрагмент елемента DOM
    console.log('фрагмент показаний');
} );
Reveal.on( 'fragmenthidden', event => {
    // event.fragment = фрагмент елемента DOM
    console.log('фрагмент схований')
} );

4.8. Навігація

Щоб створити посилання з одного слайда на інший, необхідно надати слайду, на який переходять, унікального значення атрибута id і створити посилання за допомогою тега a з атрибутом href у форматі #/id для слайда, з якого переходять.

<div class="reveal">
    <div class="slides">
        <section>
            <h2>Слайд 1</h2>
            <a href="#/finale">Перейти на останній слайд</a>
        </section>
        <section>
            <h2>Слайд 2</h2>
        </section>
        <section id="finale">
            <h2>Кінець</h2>
            <a href="#/0">Повернутися на перший слайд</a>
        </section>
    </div>
</div>

Приклад 17

Як бачимо з прикладу, можна використовувати як іменовані посилання, так і нумеровані посилання, тобто, посилання на слайди на основі їх індексу. Нумерація починається з нуля.

Формат значення для атрибута href для нумерованого посилання - це #/0, де число 0 - номер горизонтального слайда.

Для посилання на вертикальний слайд використовують запис #/0/0, де друге число 0 - номер вертикального слайда.

<div class="reveal">
    <div class="slides">
        <section>
            <h2>Слайд 1</h2>
            <a href="#/finale">Перейти на останній слайд</a><br>
            <a href="#/2">Перейти на третій слайд</a><br>
            <a href="#/2/1">Перейти на другий вертикальний слайд всередині третього</a>
        </section>
        <section>
            <h2>Слайд 2</h2>
        </section>
        <section>
            <section>
                <h2>Слайд 3.1</h2>
            </section>
            <section>
                <h2>Слайд 3.2</h2>
            </section>
            <section>
                <h2>Слайд 3.3</h2>
            </section>
        </section>
        <section id="finale">
            <h2>Кінець</h2>
            <a href="#/0">На перший слайд</a>
        </section>
    </div>
</div>

Приклад 18

4.9. Макет презентації

Існує кілька допоміжних CSS-класів, що використовуються для стилізації вмісту й роботи з макетом презентації.

Наприклад, використання класу .r-stack дозволяє центрувати і накладати кілька елементів один на одного. Це можна використовувати для групування фрагментів з поступовою появою елементів, а якщо необхідно показати кожен із елементів окремо, параметри фрагментів потрібно додатково налаштувати.

<div class="reveal">
    <div class="slides">
        <section>
            <div class="r-stack">
                <img class="fragment" src="jack_russell_terrier.jpg" width="400" height="">
                <img class="fragment" src="australian_shepherd.jpg" width="300" height="">
                <img class="fragment" src="bulldog.jpg" width="350" height="">
            </div>
        </section>
        <section>
            <div class="r-stack">
                <img class="fragment fade-out" data-fragment-index="0" src="jack_russell_terrier.jpg">
                <img class="fragment current-visible" data-fragment-index="0" src="australian_shepherd.jpg">
                <img class="fragment" src="bulldog.jpg">
            </div>
        </section>
    </div>
</div>

Приклад 19

Використання класу .r-stretch дозволяє змінити розмір елемента (зображення або відео), щоб покрити на слайді вертикальний простір, що залишився.

У наведеному нижче прикладі слайд містить заголовок, зображення та рядок. Оскільки зображення має клас .r-stretch, його висота встановлюється на висоту слайда мінус суму висот заголовка та рядка.

Змінювати розміри можуть лише прямі нащадки слайд-секції і на один слайд може бути лише один такий нащадок.

<div class="reveal">
    <div class="slides">
        <section>
            <h2>Розтягування</h2>
                <img class="r-stretch" src="rocky-mountains.png">
                <p>Скелясті гори</p>
        </section>
    </div>
</div>

Приклад 20

За допомогою класу .r-frame можна виділити елемент на тлі слайда, встановивши межу для нього, яка матиме ефект посилання при наведенні вказівника миші. Для цього необхідно розмістити елемент усередині гіперпосилання.

<div class="reveal">
    <div class="slides">
        <section>
            <img src="pickup-car.svg" width="200">
            <a href="#">
                <img class="r-frame" src="pickup-car.svg" width="200">
            </a>
        </section>
    </div>
</div>

Приклад 21

4.10. Видимість слайдів

Для приховування слайдів під час показу використовується атрибут data-visibility. Він також може використовуватися для позначення слайдів як не врахованих у системі нумерації reveal.js, що впливає на видимий номер слайда та індикатор виконання.

Щоб сховати слайд з поля зору, необхідно додати до обраного слайда data-visibility="hidden".

<div class="reveal">
    <div class="slides">
        <section>
            Слайд 1
        </section>
        <section data-visibility="hidden">
            Слайд 2
        </section>
        <section>
            Слайд 3
        </section>
    </div>
</div>

Приклад 22

Іноді, при підготовці презентації може бути корисно підготувати додаткові слайди, які, в залежності від обставин, ви зможете встигнути показати чи ні. Це легко зробити, додавши кілька слайдів в кінці презентації, приховааши ці слайди від системи нумерації reveal.js за допомогою data-visibility="uncounted".

<div class="reveal">
    <div class="slides">
        <section>
            Слайд 1
        </section>
        <section>
            Слайд 2
        </section>
        <section data-visibility="uncounted">
            Слайд 3
        </section>
    </div>
</div>

Приклад 23

5. Налаштування презентації

5.1. Теми

reveal.js має кілька вбудованих тем оформлення презентації.

Таблиця "Теми оформлення слайдів"
Назва теми	Ефект
`black`	Чорне тло, білий текст, сині посилання (за замовчуванням)
`white`	Біле тло , чорний текст, сині посилання
`league`	Сіре тло, білий текст, сині посилання
`beige`	Бежеве тло, темний текст, коричневі посилання
`sky`	Синє тло, тонкий темний текст, сині посилання
`night`	Чорне тло, товстий білий текст, помаранчеві посилання
`serif`	Тло кофейного кольору, сірий текст, коричневі посилання
`simple`	Біле тло, чорний текст, сині посилання
`solarized`	Тло кремового кольору, темно-зелений текст, сині посилання

Кожна тема доступна як окремий файл зі стилями, наприклад black.css. Щоб змінити тему, необхідно вказати ім’я теми у файлі index.html:

<link rel="stylesheet" href="dist/theme/solarized.css">

Якщо ви хочете додати власну тему, перегляньте інструкції зі створення тем.

5.2. Переходи

За замовчуванням, переходи між слайдами здійснюються у презентації з анімацією справа-наліво. Стиль переходів між слайдами може бути змінений для певного слайда за допомогою атрибута data-transition. Це ж можна виконати і для усієї презентації, налаштувавши параметр transition.

Повний перелік усіх доступних стилів переходу поданий в таблиці нижче. Ці переходи працюють як для слайдів, так і для тла слайдів, окрім того, швидкість переходів також можна змінювати.

Таблиця "Стилі переходів між слайдами"
Назва стилю	Ефект
`none`	Миттєво перемикати тло
`fade`	Перехресне зникнення (за замовчуванням для переходів тла слайдів)
`slide`	Слайд (за замовчуванням для переходів слайдів)
`convex`	Слайд під опуклим кутом
`concave`	Слайд під увігнутим кутом
`zoom`	Масштабування вхідного слайда з центру екрана

Використаємо подану HTML-розмітку для демонстрації деяких стилів переходів.

<div class="reveal">
    <div class="slides">
        <section data-transition="zoom">
            <h2>Стиль переходу: масштабування!</h2>
        </section>
        <section data-transition-speed="fast">
            <h2>Швидкості переходу: default (за замовчуванням), fast (швидко) або slow (повільно)!</h2>
        </section>
    </div>
</div>

Приклад 24

Можна також використовувати різні входи і виходи для одного слайда, додавши до назви переходу -in або -out відповідно.

<div class="reveal">
    <div class="slides">
        <section data-transition="slide">
           🚌 рухається за маршрутом…
        </section>
        <section data-transition="convex">
            продовжує рух…
        </section>
        <section data-transition="slide-in fade-out">
            і зупиняється на зупинці.
        </section>
        <section data-transition="slide-out">
            (Пасажири виходять і заходять)
        </section>
        <section data-transition="concave">
            І все розпочинається спочатку.
        </section>
    </div>
</div>

Приклад 25

Стиль переходів тла слайдів можна змінити для конкретних слайдів. Для зміни певного переходу необхідно використати атрибут data-background-transition на будь-якому тезі section.

За замовчуванням, для переходів тла слайдів використовується ефект вицвітання. Це можна змінити для усієї презентації, використовуючи параметр backgroundTransition в налаштуваннях презентації.

Reveal.initialize({
    backgroundTransition: 'slide'
});

5.3. Мультипрезентація

Найпоширеніший випадок використання reveal.js - це створення єдиної презентації, яка охоплює усе вікно вебпереглядача. Для цього необхідно ініціалізувати reveal.js за допомогою глобального об’єкта Reveal, використовуючи метод Reveal.initialize:

<script src="dist/reveal.js"></script>
<script>
    Reveal.initialize();
</script>

Для запуску декількох презентацій поруч на одній сторінці необхідно створити, відповідно, декілька екземплярів Reveal і для кожного з екземплярів встановити параметр embedded зі значенням true. Ця опція встановлює розміри презентацій у відповідність розмірам їх кореневого класу .reveal, а не вікна вебпереглядача.

За замовчуванням, reveal.js буде захоплювати всі події клавіатури в презентації. Тому, для кількох презентацій необхідно вказати параметр keyboardCondition: 'focused', щоб події натискання на клавіатуру фіксувалися лише тоді, коли увага буде зосереджена на конкретній презентації.

Приклад 26

5.4. Параметри

Поведінку презентації можна налаштувати за допомогою широкого набору параметрів, які вмикаються під час ініціалізації reveal.js. Усі значення опцій є необов’язковими і можуть бути увімкнені за потребою. За замовчуванням, при ініціалізації презентації будуть вказані значення, подані нижче.

Reveal.initialize({

    // Показати стрілки навігації
    controls: true,

    // Підказки для елементів керування
    controlsTutorial: true,

    // Місце розташування стрілок навігації на слайді: "edges" або "bottom-right"
    controlsLayout: 'bottom-right',

    // Видимість навігаційних стрілок "Назад": "faded", "hidden" або "visible"
    controlsBackArrows: 'faded',

    // Показати лінію прогресу презентації
    progress: true,

    // Відображення номера сторінки поточного слайда
    // - true:    показати номер слайда
    // - false:   сховати номер слайда
    //
    // Необов'язковий параметр для встановлення формату номера слайдів:
    // - "h.v":   горизонтальний.вертикальний (за замовчуванням)
    // - "h/v":   горизонтальний/вертикальний
    // - "c":     поточний номер слайда (включаючи як горизонтальні, так і вертикальні слайди)
    // - "c/t":   поточний_слайд/кількість_слайдів_презентації
    slideNumber: false,

    // Відображення номера слайда у різних контекстах
    // - "all":      завжди
    // - "print":    лише під час друку у PDF
    // - "speaker":  лише у режимі нотаток доповідача
    showSlideNumber: 'all',

    // Використовувати число 1 в індексації посилань на слайди (за замовчуванням, 0)
    hashOneBasedIndex: false,

    // Додати поточний номер слайда до хешу URL-адреси (перезавантаження сторінки/копіювання URL-адреси повертає до того ж слайда)
    hash: false,

    // Слідкувати за хешем і відповідно змінювати слайди
    respondToHashChanges: true,

    // Запам'ятати кожну зміну слайда в історії браузера (мається на увазі `hash: true`)
    history: false,

    // Увімкнути сполучення клавіш для навігації
    keyboard: true,

    // Якщо встановити 'focused', фіксуються події клавіатури
    // для вбудованих презентацій, коли вони є у фокусі глядача
    keyboardCondition: null,

    // Вимкнути макет слайда reveal.js за замовчуванням (масштабування та центрування),
    // це дає можливість використовувати користувацький макет CSS
    disableLayout: false,

    // Увімкнути режим огляду слайдів
    overview: true,

    // Увімкнути вертикальне центрування слайдів
    center: true,

    // Увімкнути навігацію на пристроях із сенсорним вводом
    touch: true,

    // Зациклити презентацію
    loop: false,

    // Змінити напрямок навігації презентації на "справа-наліво"
    rtl: false,

    // Зміна поведінки напрямків навігації
    //
    // "default"
    // клавіші зі стрілками вліво/вправо - перехід між горизонтальними слайдами
    // клавіші зі стрілками вгору/вниз - перехід між вертикальними слайдами
    // клавіша пропуску - прохід через усі слайди (як горизонтальні, так і вертикальні)
    //
    // "linear"
    // видалити стрілки вгору/вниз, стрілки вліво/вправо - прохід через усі слайди (як горизонтальні, так і вертикальні)
    //
    // "grid"
    // якщо ця опція ввімкнена, перехід ліворуч/праворуч від вертикального стека слайдів
    // до сусіднього вертикального стека слайдів перемістить вас на той же вертикальний індекс
    navigationMode: 'default',

    // Рандомізувати порядок слайдів щоразу, коли презентація завантажується
    shuffle: false,

    // Увімкнути/вимкнути фрагменти у презентації
    fragments: true,

    // Включити поточний фрагмент в URL-адресу, щоб перезавантаження сторінки спрямувало до тієї ж позиції фрагмента
    fragmentInURL: true,

    // Опція показу презентації у вбудованому режимі, тобто на обмеженій частині екрана
    embedded: false,

    // Увімкнути/вимкнути довідку при натисканні клавіші із знаком питання
    help: true,

    // Можливість призупинити презентацію клавішею `B` (затемнення презентації)
    pause: true,

    // Видимість нотаток доповідача для усіх слухачів
    showNotes: false,

    // Автоматичне відтворення вбудованих медіа (відео/аудіо/фрейм)
    // - null:   лише якщо доданий атрибут data-autoplay до медіа-елементу
    // - true:   незалежно від індивідуальних налаштувань
    // - false:  вимкнено
    autoPlayMedia: null,

    // Попереднє завантаження фреймів
    // - null:   з атрибутами data-src і data-preload в межах значення параметра viewDistance, з атрибутом data-src, коли стають видимі
    // - true:   з атрибутом data-src в межах значення параметра viewDistance
    // - false:  з атрибутом data-src, коли стають видимі
    preloadIframes: null,

    // Увімкнути/вимкнути автоматичну анімацію в презентації
    autoAnimate: true,

    // Налаштування за замовчуванням для автоматичних анімаційних переходів
    autoAnimateEasing: 'ease',
    autoAnimateDuration: 1.0,
    autoAnimateUnmatched: true,

    // Властивості CSS, які можна використовувати в автоматичній анімації
    // Позиція та масштаб узгоджуються окремо, тому не потрібно включати стилі, такі як
    // top/right/bottom/left, width/height, margin
    autoAnimateStyles: [
        'opacity',
        'color',
        'background-color',
        'padding',
        'font-size',
        'line-height',
        'letter-spacing',
        'border-width',
        'border-color',
        'border-radius',
        'outline',
        'outline-offset'
    ],

    // Керування автоматичним переходом до наступного слайду
    // - 0:      автоматичний перехід відбувається лише в тому випадку, якщо атрибут data-autoslide доданий до поточного слайда або фрагмента
    // - 1+:     усі слайди будуть демонструватися автоматично через заданий інтервал
    // - false:  вимкнено
    autoSlide: 0,

    // Зупинити автоматичний перехід слайдів після введення користувачем
    autoSlideStoppable: true,

    // Використовуйте цей метод для навігації під час автоматичного переходу (за замовчуванням, до navigateNext)
    autoSlideMethod: null,

    // Середній час у секундах, який, на вашу думку, витратите на демонстрацію кожного слайда
    // Застосовується для показу таймера кроків у режимі нотаток доповідача
    defaultTiming: null,

    // Увімкнути навігацію слайдами за допомогою миші
    mouseWheel: false,

    // Відкрити посилання у вкладці попереднього перегляду фрейма
    // Використовуйте атрибути data-preview-link і data-preview-link="false" для налаштування кожного посилання окремо
    previewLinks: false,

    // Зосередитись на тезі body, коли сторінка змінює видимість, щоб забезпечити роботу сполучення клавіш
    focusBodyOnPageVisibilityChange: true,

    // Стиль переходу
    transition: 'slide', // none/fade/slide/convex/concave/zoom

    // Швидкість переходу
    transitionSpeed: 'default', // default/fast/slow

    // Стиль переходу для тла слайдів
    backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

    // Максимальна кількість сторінок, на які може бути розгорнутий один слайд, під час друку в PDF,
    // за замовчуванням, необмежена кількість
    pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,

    // Друкувати кожен фрагмент на окремому слайді
    pdfSeparateFragments: true,

    // Зсув, що використовується для зменшення висоти вмісту на сторінках, експортованих у PDF,
    // для врахування відмінностей у різних середовищах друку у PDF
    pdfPageHeightOffset: -1,

    // Кількість слайдів від поточного, що визначає "дистанцію видимості" слайдів
    viewDistance: 3,

    // Кількість слайдів від поточного, що визначає "дистанцію видимості" слайдів на мобільних пристроях
    // Доцільно встановити менше значення, ніж viewDistance, щоб заощадити ресурси
    mobileViewDistance: 2,

    // Режим відображення, який буде використовуватися для показу слайдів
    display: 'block',

    // Сховати курсор миші, якщо неактивний
    hideInactiveCursor: true,

    // Час до приховання курсору (в мілісекундах)
    hideCursorTime: 5000

});

Налаштування параметрів презентації можна оновити й після ініціалізації reveal.js за допомогою методу configure, наприклад:

// Вимкнути автоматичне відтворення слайдів
Reveal.configure({ autoSlide: 0 });

// Починати автоматично відтворювати кожен слайд кожні 5 секунд
Reveal.configure({ autoSlide: 5000 });

5.5. Розмір презентації

Усі презентації автоматично масштабуються, щоб поміститися на будь-якому екрані чи у вікні перегляду, не змінюючи співвідношення сторін чи макету вмісту презентації. Нижче подано список параметрів, пов’язаних із розмірами, включаючи їх значення за замовчуванням.

Reveal.initialize({
    // Розмір презентації, співвідношення сторін буде збережено, коли презентація буде масштабована відповідно до різних значень роздільності (можна вказати за допомогою відсотків)
    width: 960,
    height: 700,

    // Коефіцієнт розміру монітора
    margin: 0.04,

    // Обмеження для найменшого/найбільшого значення масштабу, що застосовується до вмісту
    minScale: 0.2,
    maxScale: 2.0
})

Слайди вертикально центруються на екрані залежно від того, скільки вмісту вони зберігають. Щоб відключити цю функцію і залишити слайди зафіксованими на основі їх налаштованих значеннях висоти, необхідно встановити для параметра center значення false.

Reveal.initialize({ center: false });

За замовчуванням, reveal.js охоплює усе вікно перегляду вебпереглядача. Якщо необхідно вставити свою презентацію в меншу частину вебсторінки або показати кілька презентацій на одній сторінці використовують параметр embedded зі значеннями true (чи false у протилежному випадку).

Reveal.initialize({ embedded: true });

Вбудована презентація буде використовувати власні розміри, беручи за основу розміри встановлені для класу .reveal. Також, можна викликати метод Reveal.layout(), щоб запустити оновлення макета вручну.

// Змінити розмір презентації
document.querySelector( '.reveal' ).style.width = '50vw';

// Повідомити reveal.js про зміну розміру презентації
Reveal.layout();

Якщо необхідно відключити вбудоване масштабування та центрування і встановити власний макет, в налаштуваннях презентації необхідно застосувати параметр disableLayout: true. Це дозволить слайдам покрити 100% доступної ширини та висоти сторінки, а чуйну стилістику для презентації створювати самостійно.

Reveal.initialize({
    disableLayout: false
});

6. Особливості презентацій

6.1. Вертикальні слайди

За замовчуванням, слайди презентації змінюються горизонтально. Щоб логічно групувати вміст у ваших презентаціях, в межах одного горизонтального слайда можна, також, додавати вертикальні слайди.

Для переходу між горизонтальними слайдами використовують стрілки вліво/вправо. Коли ж ви потрапляєте на вертикальний стек слайдів, ви можете додатково натискати стрілки вгору/вниз, щоб переглянути вертикальні слайди або пройти повз них, натискаючи стрілку праворуч чи ліворуч.

Ось як виглядає розмітка для простого вертикального стеку.

<div class="reveal">
    <div class="slides">
        <section>Слайд 1</section>
        <section>Слайд 2</section>
        <section>
            <section>Слайд 3.1</section>
            <section>Слайд 3.2</section>
            <section>Слайд 3.3</section>
            <section>Слайд 3.4</section>
        </section>
        <section>Слайд 4</section>
    </div>
</div>

Приклад 27

При показі презентації клавіші Esc або O вмикають/вимикають сітку слайдів.

Поведінку навігації в презентації можна налаштувати за допомогою параметра navigationMode. Цей параметр корисний лише для презентацій, які використовують суміш горизонтальних та вертикальних слайдів. Доступні режими навігації представлені в таблиці нижче.

Таблиця "Режими навігації"
Значення	Опис
`default`	Клавіші зі стрілками вліво/вправо дозволяють переходити між горизонтальними слайдами, а клавіші зі стрілками вгору/вниз - між вертикальними слайдами. Клавіша пропуску дозволяє пройти через усі слайди (як горизонтальні, так і вертикальні).
`linear`	Видаляє стрілки вгору/вниз. Стрілки вліво/вправо дозволяють проходити через усі слайди (як горизонтальні, так і вертикальні).
`grid`	Якщо це значення використовується, перехід ліворуч/праворуч від вертикального стеку слайдів до сусіднього вертикального стеку приведе вас на той же вертикальний індекс слайда. Тобто, якщо ви перебуваєте на слайді `1.3` та переходите вправо, ви рухаєтеся, за замовчуванням, з `1.3` до `2.1`. Якщо ж навігація встановлена із значенням `grid`, то перехід відбудеться від `1.3` до `2.3`.

6.2. Автоанімація

reveal.js може автоматично додавати анімацію до елементів на слайдах. Все, що вам потрібно зробити, - це додати атрибут data-auto-animate до двох сусідніх тегів section, і анімація автоматично буде застосована для усіх елементів між ними.

Ось простий приклад, як працює автоматична анімація.

<div class="reveal">
    <div class="slides">
        <section data-auto-animate>
            <h1 style="margin-top: 100px;opacity: 0.1;color: #af929d">Автоанімація</h1>
        </section>
        <section data-auto-animate>
            <h1 style="color: #af929d">Автоанімація</h1>
        </section>
    </div>
</div>

Приклад 28

У цьому прикладі використовується властивість margin-top для переміщення на слайді текстового елемента, що міститься в тезі h1, а reveal.js забезпечує плавність руху при перетворенні за допомогою CSS. Цей же підхід до анімації працює з більшістю властивостей CSS, які застосовуються для анімації, зокрема:

position,
font-size,
line-height,
color,
background-color,
padding,
margin.

Коли відбувається перехід між двома слайдами, до яких додано автоанімацію, відбувається автоматичний пошук однакових елементів на цих двох слайдах.

Наприклад, збігом тексту вважається той випадок, коли вміст тексту та тип тега однакові. Для зображень, відео та фреймів порівнюється атрибут src. Також враховується порядок, в якому відображається елемент.

У ситуаціях, коли автоматично знайти відповідність неможливо, до об’єктів, до яких необхідно застосувати анімацію, додаються атрибути data-id, які мають вищий пріоритет, ніж автоанімація.

<div class="reveal">
    <div class="slides">
        <section data-auto-animate>
            <div data-id="box">🚁</div>
        </section>
        <section data-auto-animate>
            <div data-id="box" style="margin-bottom: 300px;">🚁</div>
        </section>
    </div>
</div>

Приклад 29

Параметри анімації, такі як затухання та тривалість, для всієї презентації, для слайду або окремо для кожного анімованого елемента можна змінити. В таблиці подані атрибути та їх значення, які можна використовувати для зміни налаштувань для певного слайда або елемента на слайді.

Таблиця "Параметри анімації"
Атрибут	Значення за замовчуванням	Опис
`data-auto-animate-easing`	`ease`	Функція `CSS` зміни швидкості анімації
`data-auto-animate-unmatched`	`true`	Визначає, чи повинні зникати елементи, що не відповідають цілі автоанімації. Встановіть значення `false`, щоб вони відображалися миттєво
`data-auto-animate-duration`	`1.0`	Тривалість анімації в секундах
`data-auto-animate-delay`	`0`	Затримка анімації в секундах (може встановлюватися лише для конкретних елементів, але не на рівні слайда)

Якщо ви хочете змінити для всієї презентації параметри анімації за замовчуванням, використовуйте наступні параметри:

Reveal.initialize({
    autoAnimateEasing: 'ease-out',
    autoAnimateDuration: 0.8,
    autoAnimateUnmatched: false
})

Подія autoanimate виникає кожен раз, коли виконується автоматична анімація між двома слайдами:

Reveal.on( 'autoanimate', event => {
    // event.fromSlide, event.toSlide
    console.log('анімація');
} );

Приклад використання анімації списку.

<div class="slides">
    <section data-auto-animate>
        <ul>
            <li>Меркурій</li>
            <li>Марс</li>
            <li>Уран</li>
        </ul>
    </section>
    <section data-auto-animate>
        <ul>
            <li>Меркурій</li>
            <li>Венера</li>
            <li>Земля</li>
            <li>Марс</li>
            <li>Юпітер</li>
            <li>Сатурн</li>
            <li>Уран</li>
            <li>Нептун</li>
        </ul>
    </section>
</div>

Приклад 30

6.3. Автослайд

Презентації можна налаштувати для автоматичного показу без керування доповідачем. Для цього потрібно буде вказати інтервал для зміни слайдів за допомогою параметра autoSlide. Інтервал вказується в мілісекундах.

<script>
    // Автоматична зміна слайдів кожні 5 секунд
    Reveal.initialize({
        autoSlide: 5000,
        loop: true
    });
</script>

Після цього з’явиться елемент керування відтворенням/паузою для автоматичного показу. Автоматична демонстрація призупиняється, якщо користувач починає взаємодіяти з презентацією.

Можна призупинити або відновити автоматичний показ з місця зупинки, натиснувши на клавішу A .

<div class="reveal">
    <div class="slides">
        <section>
           Слайд 1
        </section>
        <section>
           Слайд 2
        </section>
        <section>
           Слайд 3
        </section>
        <section>
           Слайд 4
        </section>
    </div>
</div>

Приклад 31

Зупинку автоматичного показу слайдів можна вимкнути, вказавши у налаштуваннях презентації параметр autoSlideStoppable: false. Окрім того, можна змінити тривалість окремих слайдів та фрагментів, використовуючи атрибут data-autoslide.

<div class="reveal">
    <div class="slides">
        <section data-autoslide="3000">
            <p>Через 3 секунди з'явиться наступний слайд</p>
        </section>
        <section data-autoslide="2000">
            <p>Через 2 секунди показаний перший фрагмент</p>
            <p class="fragment" data-autoslide="5000">Через 5 секунд показаний наступний фрагмент</p>
            <p class="fragment">Тепер фрагмент відображається 2 секунди до появи наступного слайда</p>
        </section>
        <section>
            <p>Останній слайд</p>
        </section>
    </div>
</div>

Приклад 32

Параметр autoSlideMethod може використовуватися для зміни функції за замовчуванням, що використовується для навігації при автоматичному показі.

За замовчуванням, переглядаємо всі слайди, як горизонтальні, так і вертикальні. Для ігнорування вертикальних слайдів можна встановити значення Reveal.navigateRight.

Reveal.configure({
	autoSlideMethod: Reveal.navigateRight
});

Коли автоматичний показ призупинено чи відновлено, запускаються події:

Reveal.on( 'autoslideresumed', event => { /* ... */ } );
Reveal.on( 'autoslidepaused', event => { /* ... */ } );

6.4. Нотатки доповідача

reveal.js має вбудований плагін для роботи з нотатками доповідача, який можна використовувати для подання приміток на слайд в окремому вікні вебпереглядача. Вікно приміток також надає попередній перегляд наступного слайду, тому це може бути корисним, навіть якщо ви не написали жодної нотатки.

Щоб відкрити вікно нотаток доповідача, натисніть клавішу S на клавіатурі.

У вікні нотаток присутній таймер, який вмикається, як тільки відкриється вікно нотаток доповідача. За потреби, таймер можна скинути, натиснувши на нього.

Нотатки визначаються додаванням тега aside до слайда. У випадку, якщо ви використовуєте Markdown, до aside необхідно додати атрибут data-markdown.

Крім того, нотатки можна додавати на слайд, використовуючи атрибут data-notes, наприклад:

<section data-notes="Щось важливе"></section>

Шоб використовувати нотатки доповідача локально на комп’ютері, необхідно для запуску reveal.js використовувати локальний вебсервер.

<div class="reveal">
    <div class="slides">
        <section>
            <h2>Деякий слайд</h2>
            <aside class="notes">
                Ваші нотатки 📝.
            </aside>
        </section>
    </div>
</div>

Щоб нотатки доповідача працювали, необхідно підключити плагін notes.js і ініцілізувати його.

<script src="plugin/notes/notes.js"></script>
<script>
    Reveal.initialize({
        plugins: [ RevealNotes ]
    });
</script>

Якщо ви використовуєте Markdown, спочатку необхідно підключити і ініцілізувати відповідні плагіни:

<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script>
    Reveal.initialize({
        plugins: [ RevealNotes, RevealMarkdown ]
    });
</script>

Далі можна додавати нотатки за допомогою спеціального розділювача:

<div class="reveal">
    <div class="slides">
        <section data-markdown="example.md" data-separator="^\r\n\r\n\r\n" data-separator-vertical="^\r\n\r\n" data-separator-notes="^Note:">
        </section>
    </div>
</div>

При цьому, файл example.md з розміткою Markdown, може мати схожу структуру:

## Слайд 1
Абзац з _деяким текстом_ та [посиланням](https://revealjs.com/).
Note:
Деякі нотатки доповідача 📝.



## Слайд 2
Деякий _текст_ на **другому слайді**.
Note:
Деякі інші нотатки доповідача 📝.



## Слайд 3.1
Вертикальний і горизонтальний **Слайд 3.1**


## Слайд 3.2
Вертикальний **Слайд 3.2**


## Слайд 3.3
Вертикальний **Слайд 3.3**



## Слайд 4
_Деякий текст_ на **четвертому слайді**.

Нотатки видимі лише в режимі доповідача. Якщо потрібно поділитися нотатками з іншими, можна ініціалізувати reveal.js з параметром showNotes в налаштуваннях презентації, встановленим зі значенням true. Примітки з’являться внизу презентації.

Коли showNotes ввімкнено, примітки також включаються під час експорту у PDF. За замовчуванням, нотатки друкуються у полі, розташованому вгорі слайда. Якщо необхідно роздрукувати їх на окремій сторінці, після слайду встановіть showNotes: "separate-page".

Вікно нотаток доповідача також показує:

час, що минув з початку презентації (якщо навести курсор миші над цим розділом, з’явиться кнопка скидання таймера);
поточний час системного годинника;
(необов’язково) таймер темпу, який вказує, чи поточний темп презентації нормальний (зелений колір), чи повинен доповідач пришвидшитись (червоний колір) чи сповільнитись (синій колір).

Таймер темпу може бути увімкнений за допомогою параметру defaultTiming у налаштуваннях параметрів reveal.js. Він визначає час у секундах, протягом якого відбувається показ слайда.

Крім того, ви можете увімкнути таймер, встановивши значення загальної тривалості презентації (також у секундах) в параметрі totalTime.

Якщо вказані обидва значення, враховується параметр totalTime, а параметр defaultTiming ігнорується.

Незалежно від базових налаштувань презентації, часові позначки також можна задавати для слайдів, встановивши атрибут data-timing (знову ж таки, у секундах) в тезі section.

6.5. Номери слайдів

Для відображення номера сторінки поточного слайда, необхідно встановити параметр slideNumber зі значенням true.

Reveal.initialize({ slideNumber: true });

Формат номера слайда можна налаштувати, встановивши для slideNumber одне із значень, наведених у таблиці нижче.

Таблиця "Формат номера слайду"
Значення	Опис
`h.v`	Горизонтальний.вертикальний номер слайда (за замовчуванням)
`h/v`	Горизонтальний/вертикальний номер слайда
`c`	Поточний номер слайда, включаючи як горизонтальні, так і вертикальні слайди
`c/t`	Номер поточнного слайда/загальна кількість слайдів

Для прикладу, наступний код дозволить відображати на слайдах поточний номер слайда і загальну кількість слайдів презентації:

<div class="reveal">
    <div class="slides">
        <section>
            Слайд 1
        </section>
        <section>
            Слайд 2
        </section>
        <section>
            Слайд 3
        </section>
    </div>
</div>

Reveal.initialize({ slideNumber: 'c/t' });

Приклад 33

Якщо жоден із існуючих форматів вам не подобається, ви можете використати генератор номерів слайдів.

Reveal.initialize({ slideNumber: slide => {
    // Ігнорувати нумерацію вертикальних слайдів
    return [ Reveal.getIndices( slide ).h ];
}});

Коли увімкнено номери слайдів, вони будуть включені у всі контексти за замовчуванням. Якщо ви хочете показувати номери слайдів лише в конкретному контексті, ви можете встановити для параметра showSlideNumber одне із значень, представлених в таблиці нижче.

Таблиця "Номери слайдів в різних контекстах"
Значення	Опис
`all`	Показувати номери слайдів у всіх контекстах (за замовчуванням)
`print`	Показувати номери слайдів лише під час друку в `PDF`
`speaker`	Показувати номери слайдів лише у вікні нотаток доповідача

Наприклад:

Reveal.initialize({ showSlideNumber: 'print' });

6.6. Сенсорні пристрої

Ви можете провести пальцем по екрану, щоб переміщуватися по презентації, на будь-якому пристрої з дотиком. Горизонтальні рухи змінюють горизонтальні слайди, вертикальні рухи, відповідно, змінюють вертикальні слайди.

Якщо необхідно відключити таку поведінку, в налаштуваннях презентації встановлюють параметр touch зі значенням false під час ініціалізації reveal.js.

Reveal.initialize({
    touch: false
})

Якщо є якась частина вмісту, яка повинна залишатися доступною для подій дотиком, додайте атрибут data-prevent-swipe до такого елемента. Поширений приклад, коли це корисно - елементи, які потрібно прокрутити.

<section>
    <p data-prevent-swipe>
        Неможливо змінити слайди, провівши по цьому елементу.
    </p>
</section>

6.7. Експорт у PDF

Презентації можна експортувати у PDF через спеціальний аркуш стилів друку.

Функція екпорту вимагає для своєї роботи Google Chrome і Chromium.

Для екпорту у PDF виконайте наступний алгоритм:

Відкрити презентацію, додавши в адресному рядку до адреси значення ?print-pdf, на зразок: http://localhost:8000/?print-pdf.
Відкрити діалогове вікно друку у вебпереглядачіі (Ctrl+P).
Змінити налаштування Місце призначення на Зберегти у форматі PDF.
Вказати у рядку Поля значення Немає.
Увімкнути опцію Фонові зображення.
Натиснути Зберегти.

Нотатки доповідача можна також включити до експорту у PDF, увімкнувши параметр showNotes зі значенням true.

Reveal.configure({ showNotes: true });

Примітки друкуються у вікні у верхній частині слайда. Якщо ви бажаєте роздрукувати їх на окремій сторінці, після слайду встановіть параметр showNotes зі значенням separate-page.

Reveal.configure({ showNotes: 'separate-page' });

Для того, щоб при друці відображати нумерацію сторінок, переконайтеся, що ввімкнено номери слайдів.

Розміри презентації при експорті виводяться з налаштованого розміру презентації. Якщо слайди завеликі для розміщення на одній сторінці, вони розширяться на кілька сторінок.

Кількість сторінок, на які слайд може розширюватися, можна обмежити, використовуючи параметр pdfMaxPagesPerSlide. Наприклад, щоб гарантувати, що жоден слайд ніколи не перевищить більш ніж однієї друкованої сторінки, можна встановити для цього параметра значення 1.

Reveal.configure({ pdfMaxPagesPerSlide: 1 })

Фрагменти слайдів друкуються на окремих слайдах за замовчуванням. Тобто, якщо є слайд з трьома фрагментами, то відбудеться генерація трьох окремих слайдів, де фрагменти будуть відображатися поступово.

Якщо ви віддаєте перевагу друку всіх фрагментів у їх видимих станах на одному слайді, можна скористатися параметром pdfSeparateFragments зі значенням false.

Reveal.configure({ pdfSeparateFragments: false });

6.8. Режими перегляду

Щоб побачити усі слайди презентації на одному екрані, можна увімкнути/вимкнути режим огляду усіх слайдів за допомогою клавіш Esc або O . Поки ви перебуваєте в цьому режимі, ви все ще можете переходити між слайдами і знаходитесь, ніби, над своєю презентацією.

Приклад 34

Ви можете використовувати метод toggleOverview() для активації або деактивації режиму огляду за допомогою JavaScript.

// Переключитися на протилежний поточному стану
Reveal.toggleOverview();

// Активувати режим огляду
Reveal.toggleOverview( true );

// Деактивувати режим огляду
Reveal.toggleOverview( false );

Окрім того, коли режим перегляду усіх слайдів активовано та вимкнено, викликаються події:

Reveal.on( 'overviewshown', event => { /* ... */ } );
Reveal.on( 'overviewhidden', event => { /* ... */ } );

Існує, також, вбудована підтримка повноекранного режиму і режиму паузи.

Натисніть F на клавіатурі, щоб переглянути презентацію в повноекранному режимі або клавішу Esc для виходу з нього. А за допомогою клавіші B показ презентації можна поставити на паузу, при якій тло презентації стає чорного кольору і з’являється кнопка Resume presentation (продовжити презентацію).

7. Вбудовані плагіни

Для розширення функціональності reveal.js можна використовувати плагіни.

Щоб скористатися плагіном, необхідно зробити дві речі:

включити у файл презентації скрипт плагіна (для деяких плагінів може знадобитися, також, підключення стилів CSS);
«повідомити» reveal.js про плагін, включивши його назву в масив plugins при ініціалізації.

Наприклад, код підключення плагіна для роботи з Markdown виглядає так:

<script src="plugin/markdown/markdown.js"></script>
<script>
    Reveal.initialize({
        plugins: [ RevealMarkdown ]
    });
</script>

Плагіни, які додають підтримку Markdown, виділення синтаксису коду та нотатки доповідача, вже включені до шаблону презентації за замовчуванням. Ці плагіни поширюються разом з reveal.js.

Повний список усіх вбудованих плагінів представлений у таблиці нижче.

Таблиця "Вбудовані плагіни"
Ім’я	Опис
`RevealHighlight`	Підсвітка коду (`plugin/highlight/highlight.js`)
`RevealMarkdown`	Створення контенту за допомогою `Markdown` (`plugin/markdown/markdown.js`)
`RevealSearch`	Пошук слайдів за допомогою `Ctrl`+`Shift`+`F` (`plugin/search/search.js`)
`RevealNotes`	Показ нотаток доповідача в окремому вікні (`plugin/notes/notes.js`)
`RevealMath`	Візуалізація математичних рівнянь (`plugin/math/math.js`)
`RevealZoom`	`Alt` + клік для збільшення елементів (`plugin/zoom/zoom.js`)

До презентацій можна додавати й інші плагіни, зокрема створені власноруч чи створені іншими розробниками.

Наприклад, Multiplex - плагін, що дозволяє вашій аудиторії стежити за слайдами презентації, яку ви контролюєте за допомогою власного смартфона, планшета чи ноутбука. Тобто, коли ви змінюєте слайди у вашій головній презентації на вашому пристрої, усі будуть стежити та бачити той самий вміст на власних пристроях. Цей плагін можна знайти у сховищі за адресою github.com/reveal/multiplex .

Обирайте додаткові плагіни серед колекції плагінів від інших розробників.

8. Додаткові плагіни

Розглянемо підключення деяких додаткових плагінів.

8.1. PdfExport

Сторінка плагіна: github.com/McShelby/reveal-pdfexport .

Опис: Перемикає режим демонстрації презентації в режим експорту у PDF і навпаки за допомогою клавіатури (клавішу можна обрати довільно). В режимі PDF можна зберегти слайди презентації у pdf-файл, натиснувши сполучення клавіш Ctrl+P.

Для встановлення плагіна необхідно створити каталог plugin/pdfexport, завантажити файл плагіна pdfexport.js і зберегти у цей каталог.

Щоб використовувати плагін, додайте плагін до ініціалізації презентації, як показано нижче.

<script src="plugin/pdfexport/pdfexport.js"></script>
<script>
    Reveal.initialize({
        plugins: [ PdfExport ],
        // Клавіша для перемикання між екраном та режимом PDF
        pdfExportShortcut: 'E'
    });
</script>

Приклад 35

8.2. HelpButton

Сторінка плагіна: github.com/McShelby/reveal-helpbutton .

Опис: Відкриває вікно довідки reveal.js, натиснувши на кнопку довідки. Це зручно, якщо хтось, хто не знає комбінацій клавіш, що використовуються в reveal.js, хоче переглянути вашу презентацію. Плагін можна налаштувати, коли показувати кнопку довідки.

Для встановлення плагіна необхідно створити каталог plugin/helpbutton, завантажити файл плагіна helpbutton.js й файл стилів helpbutton.css і зберегти у цей каталог.

Щоб використовувати плагін, додайте плагін до ініціалізації презентації, як показано нижче.

<script src="plugin/helpbutton/helpbutton.js"></script>
<script>
    Reveal.initialize({
        plugins: [ HelpButton ],
        // Відображає кнопку довідки в лівому нижньому куті
        // При натисканні на кнопку відкривається вікно довідки
        // Можливі значення:
        //   'none'      не показувати кнопку
        //   'first'     показувати на першому слайді
        //   'intro'     показувати кнопку на всіх слайдах першого стовпця слайдів
        //   'always'    показувати на кожному слайді
        helpButtonDisplay: 'first'
    });
</script>

Щоб змінити вигляд кнопки довідки, необхідно внести відповідні зміни у файл зі стилями helpbutton.css і перед закриваючим тегом head розмістити посилання на файл helpbutton.css у коді HTML-файла презентації:

<link rel="stylesheet" href="plugin/helpbutton/helpbutton.css">

Приклад 36

8.3. ThemeOverride

Сторінка плагіна: github.com/McShelby/reveal-themeoverride .

Опис: Легко змінює теми reveal.js і стиль підсвітки синтаксису коду.

Для встановлення плагіна необхідно створити каталог plugin/themeoverride, завантажити файл плагіна themeoverride.js і зберегти у цей каталог.

Щоб використовувати плагін, додайте стилі для теми і підсвітки коду, які будуть використовуватися за замовчуванням, у файл презентації, як показано нижче. Зверніть увагу, на наявність ідентифікаторів theme і highlight-theme.

<link rel="stylesheet" href="dist/theme/white.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">

Далі, додайте плагіни highlight.js і reveal-themeoverride.js до ініціалізації презентації, як показано нижче. Зверніть увагу, на параметри конфігурації theme: 'serif' і highlightTheme: 'zenburn', які перезаписують тему презентації і стиль підсвітки коду, які визначені за замовчуванням.

<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/themeoverride/themeoverride.js"></script>
<script>
    Reveal.initialize({
        plugins: [ RevealHighlight, ThemeOverride ],
        theme: 'serif',
        highlightTheme: 'zenburn'
    });
</script>

Приклад 37

За замовчуванням, разом з reveal.js поширюються стилі підсвітки коду monokai (monokai.css) і zenburn (zenburn.css). Повний список доступних стилів для бібліотеки highlight.js можна знайти на highlightjs.org .

Використовуючи параметри адресного рядка у вебпереглядачі, можна легко спробувати нові теми і стилі підсвітки коду, не редагуючи файл презентації: https://example.com/demo.html?theme=serif&highlightTheme=zenburn.

8.4. Chalkboard

Сторінка плагіна: https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard .

Опис: За допомогою цього плагіна ви можете додати полотно приміток до вашої презентації чи дошку, на яких є можливість вручну робити нотатки. Є два режими використання плагіна, між якими можна перемикатися:

полотно приміток - нотатки виконуються безпосередньо на слайдах, наприклад, можна коментувати певні аспекти вмісту презентації;
дошка - робити нотатки як на крейдяній дошці.

Скопіюйте зі сторінки плагіна файл plugin.js та каталог img у каталог вашої презентації по шляху plugin/chalkboard.

Щоб використовувати плагін, додайте плагін до ініціалізації презентації, як показано нижче.

<script src="plugin/chalkboard/plugin.js"></script>
<script>
    Reveal.initialize({
        plugins: [ RevealChalkboard ],
      });
</script>

Щоб увімунути відображення кнопок для відкриття та закриття полотна нотаток або дошки на слайдах презентації, необхідно перед закриваючим тегом head розмістити посилання на стилі для цих кнопок у коді HTML-файла презентації:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

Приклад 38

Полотно приміток відкривається та закривається при натисканні клавіші C (), а дошка відкривається та закривається при натисканні кнопки B ().

Використання миші:

Натисніть ліву кнопку миші та перетягніть, щоб писати на полотні нотаток або дошці.
Натисніть правою кнопкою миші та перетягніть, щоб стерти малюнки.

Сенсорні екрани:

Торкніться і перемістіться, щоб писати на полотні нотаток або дошці.
Торкніться і утримуйте півсекунди, а потім рухайтеся, щоб стерти малюнки.

Використання клавіатури:

Натисніть клавішу Del, щоб очистити дошку.
Натисніть клавішу D, щоб завантажити креслення на дошці у JSON -форматі.
Натисніть клавішу BackSpace, щоб видалити всі креслення на дошці на поточному слайді.
Натискайте клавішу X, щоб перемикати кольори вперед.
Натисніть клавішу Y, щоб перемикати кольори у зворотному порядку.

Плагін має параметри за замовчуванням, значення яких показані нижче (за потреби, ці параметри можна змінювати).

<script>
    Reveal.initialize({
        plugins: [ RevealChalkboard ],
        chalkboard: {
            boardmarkerWidth: 3, (1)
            chalkWidth: 7, (2)
            chalkEffect: 1.0, (3)
            src: null, (4)
            readOnly: undefined, (5)
            toggleChalkboardButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" }, (6)
            toggleNotesButton: { left: "70px", bottom: "30px", top: "auto", right: "auto" }, (7)
            transition: 800, (8)
            theme: "chalkboard", (9)
            background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ], (10)
            grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2}, (11)
            eraser: { src: path + 'img/sponge.png', radius: 20}, (12)
            boardmarkers : [ (13)
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
            ],
            chalks: [ (14)
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
            ],
            rememberColor: true, (15)
        },
    });
</script>

Ціле число, ширина креслення маркера дошки (з більшими значеннями лінії будуть товстішими).
Ціле число, ширина крейди (з більшими значеннями лінії будуть товстішими).
Інтенсивність ефекту крейди на крейдяній дошці (повний ефект, за замовчуванням, 1.0, без ефекту 0.0).
Необов’язкове ім’я файла для попередньо записаних малюнків.
Параметр конфігурації, що дозволяє запобігти змінам існуючих креслень (якщо встановлено значення true - не можна вносити зміни, а якщо встановлено значення false - зміни можна зробити, якщо нічого не встановлено або встановлено як undefined, креслення можна зробити після повернення до слайда або фрагмента, для якого малюнки були записані раніше, у будь-якому випадку записані креслення для слайда або фрагмента можна очистити, натиснувши клавішу Del (тобто за допомогою функції RevealChalkboard.clear()).
Позиція кнопки для увімкнення/вимкнення дошки.
Позиція кнопки для увімкнення/вимкнення полотна для нотаток.
Вказує тривалість (у мілісекундах) переходу для зміни слайда, так що полотно нотаток можна активувати після завершення переходу.
Можна встановити теми: chalkboard або whiteboard.
Перше значення - колір тла зі значенням прозорості для полотна нотаток, друге значення - ім’я файла, що містить фонове зображення для дошки.
За замовчуванням, поруч з кольоровою темою дошки міститься малюнок із сітки на задньому плані. Цей шаблон можна змінити, встановивши колір, відстань між лініями та ширину лінії, наприклад { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}. Крім того, сітку можна вимкнути, встановивши значення false.
Шлях до файла із зображенням гумки і радіус зображення гумки.
Список маркерів на дошці із заданим кольором та курсором.
Список крейди із заданим кольором та курсором.
Запам’ятовувати останній вибраний колір для полотна слайда або дошки.

8.5. Menu

Сторінка плагіна: https://github.com/denehyg/reveal.js-menu .

Опис: За допомогою цього плагіна можна додати до презентації висувне меню для швидкого переходу до будь-якого слайда за назвою і змінити тему презентації та встановити переходи за замовчуванням.

Завантажте архів сховища (репозиторія), розпакуйте архів і скопіюйте вміст архіву у каталог вашої презентації по шляху plugins/menu.

Щоб використовувати плагін, додайте плагін до ініціалізації презентації, як показано нижче.

<script src="plugin/menu/menu.js"></script>
<script>
    Reveal.initialize({
        plugins: [ RevealMenu ],
      });
</script>

Приклад 39

Вигляд меню, за потреби, можна налаштувати, змінюючи параметри конфігурації плагіна, які зазначені нижче і використовуються за замовчуванням.

<script>
    Reveal.initialize({
        plugins: [ RevealMenu ],
        menu: {
            // З якого боку слайда буде значок меню:
            // left або right.
            side: 'left',

            // Значення ширини меню:
            // normal, wide, third, half, full, або
            // будь-яке правильне значення довжини в одиницях CSS
            width: 'normal',

            // Додати відповідні номери слайдів до заголовків слайдів в меню:
            // true або false
            numbers: true,

            // Вказує, які елементи слайда будуть використані для створення
            // назв слайдів у меню. За замовчуванням вибирається перший
            // елемент заголовка, знайдений на слайді, але можна вказати будь-який
            // дійсний селектор CSS, і буде використаний текст із першого відповідного елемента.
            // Примітка: атрибут data-menu-title розділу або елемент
            // з класом title-menu матимуть перевагу над цим параметром.
            titleSelector: 'h1, h2, h3, h4, h5, h6',

            // Якщо слайди не мають відповідного заголовка, буде спроба
            // використати початок текстового вмісту як заголовка
            useTextContentForMissingTitles: false,

            // Сховати слайди з меню, які не мають заголовків.
            // Встановлюємо на true, щоб перераховувати лише слайди з заголовками.
            hideMissingTitles: false,

            // Додає маркери до заголовків слайдів для позначення прогресу презентації.
            // Встановити на false, щоб приховати маркери.
            markers: true,

            // Вкажіть власні вкладки, які будуть включені в меню,
            // створивши масив об'єктів із властивостями
            // title, icon та src або content та їх значеннями.
            custom: false,

            // Вказує теми, які будуть доступні на вкладці меню Themes.
            // Встановлене значення true зі списком тем за замовчуванням.
            // В якості альтернативи, надайте масив, щоб вказати теми,
            // які будуть доступні на вкладці меню Themes, наприклад
            //
            // [
            //  { name: 'Beige', theme: 'dist/theme/beige.css' },
            //  { name: 'Black', theme: 'dist/theme/black.css' },
            //  { name: 'Blood', theme: 'dist/theme/blood.css' },
            //  { name: 'League', theme: 'dist/theme/league.css' },
            //  { name: 'Moon', theme: 'dist/theme/moon.css' },
            //  { name: 'Night', theme: 'dist/theme/night.css' },
            //  { name: 'Serif', theme: 'dist/theme/serif.css' },
            //  { name: 'Simple', theme: 'dist/theme/simple.css' },
            //  { name: 'Sky', theme: 'dist/theme/sky.css' },
            //  { name: 'Solarized', theme: 'dist/theme/solarized.css' },
            //  {
            //       name: 'White',
            //       theme: 'dist/theme/white.css',
            //       highlightTheme: 'plugin/highlight/monokai.css'
            //     },
            //     {
            //       name: 'Code: Zenburn',
            //       highlightTheme: 'plugin/highlight/zenburn.css'
            //     }
            // ]
            //
            // Примітка: значення highlightTheme (тема підсвічування коду) без теми
            // змінить тему підсвічування коду, залишаючи тему презентації незмінною.
            themes: true,

            // Вказує шлях до файлів тем за замовчуванням. Якщо презентація
            // використовує інший шлях до стандартного макета,
            // то необхідно вказати цю опцію, але лише тоді, коли для themes
            // встановлено значення true. Якщо ви надаєте свій власний
            // список тем або для themes встановлено значення false, параметр
            // themesPath ігнорується.
            themesPath: 'dist/theme/',

            // Вказує, чи відображатиметься у меню вкладка переходів.
            // Встановлюємо на true для списку переходів за замовчуванням.
            // В якості альтернативи надайте масив, щоб вказати переходи,
            // які будуть доступні на вкладці переходів, наприклад ...
            // ['None', 'Fade', 'Slide']
            transitions: true,

            // Додає на слайди кнопку меню, щоб відкрити вкладки меню.
            // Встановити значення false, щоб приховати кнопку.
            openButton: true,

            // Якщо true, дозволяє номеру слайда в презентації
            // відкрити панель меню. Щоб це відбулося,
            // параметр slideNumber повинен бути увімкненим в reveal.js
            openSlideNumber: false,

            // Якщо true, дозволяє користувачу відкривати та переміщатися по меню,
            // використовуючи клавіатуру. Стандартна взаємодія клавіатури з reveal.js
            // буде відключена, поки меню відкрито.
            keyboard: true,

            // Зазвичай, меню закривається внаслідок дій користувача, таких як
            // вибір пункту меню або натискання області презентації.
            // Якщо true, меню буде залишатися відкритим,
            // поки воно явно не буде закрито, тобто за допомогою кнопки закрити
            // або натискання клавіші ESC або M (коли увімкнена опція
            // взаємодії клавіатури)
            sticky: false,

            // Якщо true, стандартні пункти меню будуть автоматично відкриті
            // під час навігації за допомогою клавіатури.
            // Примітка: це дасть ефект, коли ввімкнено параметри keyboard та sticky.
            autoOpen: true,

            // Якщо true, меню не створюватиметься, доки це явно
            // не буде зроблено за допомогою виклику RevealMenu.init().
            // Зверніть увагу, що це затримає створення всіх вкладок меню,
            // включаючи власні вкладки та кнопку меню.
            delayInit: false,

            // Якщо true, меню буде показано при ініціалізації меню.
            openOnInit: false,

            // За замовчуванням, меню завантажує бібліотеку шрифтових піктограм
            // font-awesome. Якщо у презентації необхідно завантажити іншу бібліотеку,
            // встановіть опцію loadIcons у значення false і меню не намагатиметься
            // завантажити бібліотеку шрифтів за замовчуванням.
            loadIcons: true
        }
    });
</script>

Щоб використовувати вкладки тем, необхідно у файлі презентації в тезі link, яким здійснюється підключення основної таблиці стилів теми презентації, вказати атрибут id="theme". Наприклад:

<link rel="stylesheet" href="dist/theme/black.css" id="theme">

Якщо конфігурація тем презентації включає ще й теми підсвічування коду, у файлі презентації в тезі link, яким здійснюється підключення основної таблиці стилів теми підсвічування коду, вказати атрибут id="highlight-theme". Наприклад:

<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">

Приклад 40

В меню можуть бути додані спеціальні вкладки за допомогою опції custom, що має значення title і icon, які використовуються для назв і позначень кнопок панелі інструментів у верхній частині меню, а також значення src або content.

Існує два підходи, якими можна скористатися для забезпечення вмісту спеціальних вкладок.

Вказати HTML-код безпосередньо в content і це буде додано як вкладку.
Вказати URL-адресу в атрибуті src для завантаження HTML-коду з іншого файлу.

Використаємо одночасно ці два підходи для створення, відповідно, двох спеціальних вкладок в меню.

Reveal.initialize({
  // ...

  menu: {
    // ...

    custom: [
        {
            title: 'Лінки',
            icon: '<i class="fa fa-external-link-alt">',
            src: 'links-tab.html'
        },
        {
            title: 'Про нас',
            icon: '<i class="fa fa-info">',
            content: '<p>Створюйте презентації з <span style="font-size:1.33em;color:#d53f8c;">reveal.js</span>!</p>'
        }
    ],
  }
});

Зовнішній HTML-файл links-tab.html, що визначатиме одну із спеціальних вкладок, буде мати внутрішні посилання на слайди презентації і зовнішні посилання на деякі вебсторінки в мережі Інтернет.

Файл links-tab.html, як видно із конфігурації custom, зберігається в корені каталогу презентації поруч з HTML-файлом презентації. За потреби, шлях до файла links-tab.html можна вказати інший.

links-tab.html

<h3>Додаткові лінки</h3>
<p>Cписок слайдів</p>
<p>Натисніть на посилання, щоб змінити слайди, або спробуйте навігацію за допомогою клавіатури</p>
<p></p>
<ul class="slide-menu-items">
    <li class="slide-menu-item"><a href="#/0">Слайд 1</a></li>
    <li class="slide-menu-item"><a href="#/1">Слайд 2</a></li>
    <li class="slide-menu-item"><a href="#/2">Слайд 3</a></li>
</ul>

<h3>Зовнішні лінки</h3>
<p>Ці пункти меню можуть посилатися на зовнішні вебсторінки</p>
<ul class="slide-menu-items">
    <li class="slide-menu-item"><a href="https://github.com/hakimel/reveal.js" target="_blank">Reveal.js</a></li>
    <li class="slide-menu-item"><a href="https://github.com/denehyg/reveal.js-menu" target="_blank">Reveal.js-menu</a></li>
</ul>

Приклад 41

Для функціонування спеціальної вкладки, яка створюється за допомогою зовнішнього HTML-файла, презентацію необхідно розмістити на вебсервері.

Для керування меню презентації можна використовувати JavaScript API reveal.js-menu .

Додаток A: Редактори коду

У підручнику, для написання коду презентацій, використовується редактор Visual Studio Code.

Visual Studio Code - це легкий, але потужний редактор початкового коду, який розповсюджується безкоштовно і доступний у версіях для платформ Windows, Linux і macOS.

Оглянути можливості, встановити і налаштувати редактор ви зможете за допомогою онлайн-підручника .

Є й інші чудові редактори коду, які можуть бути використані для наших цілей, наприклад:

Notepad++ (Windows)
Atom (Windows, Linux, macOS);
Sublime Text (Windows, Linux, macOS).

Додаток B: API

При ініціалізації презентації

<script src="dist/reveal.js"></script>
<script>
    Reveal.initialize();
</script>

метод initialize повертає результат готовності презентації для взаємодії за допомогою API:

Reveal.initialize.then( () => {
    // reveal.js готовий до взаємодії
} )

reveal.js надає широкий API - набір визначених методів для взаємодії різних компонентів.

B.1. Методи

Якщо ви працюєте з одним екземпляром презентації, доступ до API можна отримати через глобальний об’єкт Reveal за допомогою методів, які представлених нижче у відповідних групах.

Навігація

// Перехід до певного слайда
Reveal.slide( indexh, indexv, indexf );

// Навігація відносно поточного слайда
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();

// Навігація фрагментами
Reveal.prevFragment();
Reveal.nextFragment();

// Перевірити, в яких напрямках можна рухатися
// {top: false, right: true, bottom: false, left: false}
Reveal.availableRoutes();

Слайди

// Отримати елементи попереднього/поточного слайдів
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

// Повернути усі горизонтальні/вертикальні слайди презентації
Reveal.getHorizontalSlides();
Reveal.getVerticalSlides();

// Загальна кількість слайдів презентації
Reveal.getTotalSlides();
Reveal.getSlidePastCount();

// Масив усіх слайдів презентації
Reveal.getSlides();

Показ слайдів

// Перевірити, чи містить презентація два чи більше горизонтальних/вертикальних слайдів
Reveal.hasHorizontalSlides();
Reveal.hasVerticalSlides();

// Перевірити, чи була здійснена навігація по будь-якій осі хоча б один раз
Reveal.hasNavigatedHorizontally();
Reveal.hasNavigatedVertically();

Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isVerticalSlide();

Режими

// Показати довідку із сполученнями клавіш, значення true/false для примусового увімкнення/вимкнення довідки
Reveal.toggleHelp();

// Перемикання станів презентацій, значення true/false для примусового увімкнення/вимкнення станів
Reveal.toggleOverview();
Reveal.toggleAutoSlide();
Reveal.togglePause();

Reveal.isOverview();
Reveal.isAutoSliding();
Reveal.isPaused();

Елементи DOM

// Отримати ключові елементи DOM
Reveal.getRevealElement(); // <div class="reveal">
Reveal.getSlidesElement(); // <div class="slides">
Reveal.getViewportElement(); // <div class="reveal-viewport">

Стан презентації

Поточний стан презентації можна отримати за допомогою методу getState. Об’єкт стану містить всю інформацію, необхідну для повернення презентації такою, якою вона була, коли getState був викликаний вперше. Цей простий об’єкт, ніби, знімок, і його легко можна розшифрувати, зберегти або надіслати.

// Переміщення на слайд 1
Reveal.slide( 1 );

let state = Reveal.getState();
// {indexh: 1, indexv: 0, indexf: undefined, paused: false, overview: false}

// Переміщення на слайд 3
Reveal.slide( 3 );

// Відновлення збереженого стану, переміщення на слайд 1
Reveal.setState( state );

Інші методи

// Оновлення параметрів при додаванні чи видаленні слайдів
Reveal.sync();

// Оновлення макету презентації
Reveal.layout();

// Випадково визначити порядок слайдів
Reveal.shuffle();

// Повернути наявні параметри налаштування презентації
Reveal.getConfig();

// Визначити поточну шкалу презентації
Reveal.getScale();

// Повернути об'єкт із масштабуванням presentationWidth і presentationHeight
Reveal.getComputedSlideSize();

Reveal.getIndices();        // { h: 0, v: 0, f: 0 }
Reveal.getProgress();       // (0 == first slide, 1 == last slide)

// Повернути нотатки доповідача для поточного слайда
Reveal.getSlideNotes();

B.2. Події

API містить ряд подій, за допомогою яких легко реагувати на зміни в презентації. Для додавання обробників подій використовується метод Reveal.on(), а для їх видалення - Reveal.off().

Наприклад:

Reveal.on( 'eventname', callbackFunction );

Подія ready викликається, коли reveal.js завантажив усі залежності і готовий до прийому викликів API (при цьому, до елемента з .reveal додається клас .ready).

Reveal.on( 'ready', event => {
    // event.currentSlide, event.indexh, event.indexv
} );

Щоб перевірити, чи готовий reveal.js, можна викликати метод Reveal.isReady().

Подія slidechanged викликається кожен раз, коли відбувається зміна слайда. Об’єкт події містить значення індексу поточного слайда, а також посилання на попередній та поточний HTML-елементи слайдів.

Reveal.on( 'slidechanged', event => {
   // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

Подія slidechanged спрацьовує миттєво, як тільки слайд змінюється. Якщо ви бажаєте викликати обробника події, коли слайд закінчує перехід і його повністю видно, ви можете використовувати подію slidetransitionend - вона включає в себе ті ж дані, що і подія slidechanged.

Reveal.on( 'slidetransitionend', event => {
    console.log( event.currentSlide );
});

Коли reveal.js змінює масштаб викликається подія resize:

Reveal.on( 'resize', event => {
    // event.scale, event.oldScale, event.size
} );

Декілька інших подій, що визначають особливості презентації, наведені нижче.

Коли режим перегляду усіх слайдів активовано чи вимкнено, викликаються події:

Reveal.on( 'overviewshown', event => { /* ... */ } );
Reveal.on( 'overviewhidden', event => { /* ... */ } );

Під час показу або приховування фрагмента, reveal.js викликає такі події:

Reveal.on( 'fragmentshown', event => {
    // event.fragment = фрагмент елемента DOM
    console.log('фрагмент показаний');
} );
Reveal.on( 'fragmenthidden', event => {
    // event.fragment = фрагмент елемента DOM
    console.log('фрагмент прихованй')
} );

Коли автоматичний показ призупинено чи відновлено, запускаються такі події:

Reveal.on( 'autoslideresumed', event => { /* ... */ } );
Reveal.on( 'autoslidepaused', event => { /* ... */ } );

B.3. Клавіатура

Якщо ви бажаєте змінити використання клавіш клавіатури за замовчуванням, необхідно використати параметр keyboard.

Reveal.configure({
    keyboard: {
        27: () => { console.log('esc') }, // робити щось до натискання клавіши Esc
        13: 'next', // при натисканні клавіші Enter перейти до наступного слайда
        32: null // нічого не робити під час натискання клавіші Пропуск (тобто вимкнути значення за замовчуванням)
    }
});

Користувацькі налаштування клавіш можна додавати та видаляти за допомогою JavaScript. Це замінить типові сполучення клавіш клавіатури, але, в свою чергу, також будуть замінені визначені користувачем сполучення клавіш в налаштуваннях параметра keyboard.

Reveal.addKeyBinding( binding, callback );
Reveal.removeKeyBinding( keyCode );

Наприклад:

// Параметри прив'язування до клавіш:
//      keyCode: код клавіші для прив'язування до виклику
//          key: назва клавіші, яка відображатиметься у довідці
//  description: опис дії клавіші, що відображається у довідці
Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Початок запуску' }, () => {
  // початок запуску таймера
} )

// Параметр прив'язування також може бути прямим кодом клавіші, без опису у довідці
Reveal.addKeyBinding( 82, () => {
  // скинути таймер
} )

Додаток C: Бланк проєкту

Для швидкого написання власних презентацій ви можете використовувати готовий проєкт порожньої презентації вже з підключеними основними плагінами.

Файл-архів бланку можна вільно завантажити за посиланням .

Путівник із розробки HTML-презентацій
Створення презентацій за допомогою reveal.js

Автор ідеї та втілення: Олександр Мізюк.

Для усіх, хто цікавиться вебтехнологіями.