Привет, Хабр!

Я ведущий Java-разработчик в компании «Рексофт». Помимо основной работы, я преподаю в вузе. И при подготовке к занятиям мне постоянно приходится готовить презентации и сопутствующие материалы. Именно о том, как упростить этот процесс, и пойдет речь.

Что не так с классическим Power Point?

Когда готовишь материалы для обучения программированию, Power Point превращается в идеально подогнанную сковородку, на которой мучительно жарится преподаватель. Как вставить фрагмент кода? А чтобы была подсветка синтаксиса? А что, если студентам надо скопировать кусок кода, а вставляются дополнительные символы? И на сладкое: как быть, если слайды надо переделать или поменять темы местами в разных презентациях?

Есть ли выход?

После пары семестров мучений я начал искать альтернативу и нашел Reveal.js. Это отличный инструмент, который позволяет хранить презентацию в формате Markdown (с этим прекрасным форматом, мягко говоря, хорошо знаком любой разработчик) и генерировать из обычного .md-файла полноценную HTML-презентацию (к примеру). Помимо подсветки синтаксиса, удобства поиска, редактирования, возможности открывать в любом блокноте, Reveal.js предлагает множество готовых тем. Кроме того, при желании можно создать свою тему и прикрутить ее к презентации.

Потом я наткнулся на еще один инструмент — Quarto. Именно о нем сегодня пойдет речь. Quarto включил в себя возможности Reveal.js, расширил формат Markdown и взял за основу свой формат (qmd). Вот какие минимальные фишки он позволяет сделать с вашей презентацией:

Генерация титульного листа по метаданным

Сначала описываем блок метаинформации:

title: "Java"
subtitle: Занятие 7
format:
  revealjs:
    transition: slide
    background-transition: fade
    footer: "Java. Занятие 7. Хитёв А.Ю."

Часть информации (например, тему, иконки и какие-то настройки) можно вынести в отдельный файл, единый для всего проекта (то есть для всех презентаций курса) — _quarto.yml.

project:
  output-dir: target
lang: RU
format:
  revealjs:
    theme: [solarized, custom.scss]
    slide-number: true
    logo: "./attachments/Pasted%20image%2020250101135457.png"
    highlightTheme: vs;
    mermaid:
      theme: forest

Получаем на выходе готовый слайд:

Можно использовать колонки

Ниже приведен код и то, как это будет выглядеть в презентации:

## Перечисление (enum)
:::: {.columns}
::: {.column width="50%"}

- Ключевое слово enums создает новый тип с ограниченным набором именованных значений, и работать с этим типом можно как с обычными компонентами программы.
...

:::
::: {.column width="50%"}

```java
public enum LocalizedDayOfWeek {
  ...
}
```
...

:::
::::

Вид в презентации:

Кстати, ширину колонок можно регулировать.

Имя исходника для блока кода

Помимо простой вставки блока кода, который мы, как и в Markdown, начинаем с ```java, в Quarto можно добавлять различную дополнительную информацию, включая имя файла-источника:  ```{.java filename="lesson_6.examples.lists.Application"}

Код и то, как он будет представлен на слайде:

## Как можно потерять исключение #2?
```{.java filename="lesson_7.examples.exception.LostException"}
private static void method2() {
  try {
    throw new RuntimeException();
  } finally {
    return;
  }
}
```
```sh
В начале
В конце
```

Визуальные эффекты

Можно настроить выезжающие слайды, появление элементов списка по нажатию кнопки или просто вставить в рандомное место нужный оператор (. . .). И следующий блок не появится сразу при загрузке слайда, а отобразится только после нажатия кнопки.

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

Выделение блоков в отдельные файлы

Quarto позволяет вставлять содержимое из других файлов при помощи оператора {{< include oop/enum_short.qmd >}}. Это крайне удобно, так как позволяет разбить большую презентацию на блоки, каждый из которых можно править отдельно (но подробнее об этом далее).

Меню презентации

Помимо фишек при редактировании, Quarto генерирует удобное меню, позволяющее быстро перейти к нужному слайду.

Каковы основные принципы?

Если говорить об учебных презентациях, то их можно разделить на две основные части:

• Каркас презентации (ее структура)

• Наполнение (которое меняется)

К примеру, в качестве каркаса может быть что-то такое:

Что было в прошлый раз?
...

Что будет сегодня?

Перечисление тем

Основной блок

Вопросы для самопроверки
...

Немного самостоятельной работы
...

В следующей серии…
...

Полезные ссылки
...

Каркас я вставляю в файл lesson_N.qmd и размещаю его в корне. Таким образом, если мне нужно пробежаться по структуре какого-то урока, я просто в корне нахожу нужный qmd-файл — и вперед!

Ну а что делать с содержимым?

Его мы выносим в отдельные файлы по темам. К примеру, я хочу рассказать про интерфейсы в Java. В таком случае я создаю файл interface.qmd и в нем описываю будущие слайды с листингами кода, таблицами и прочим. Чтобы не запутаться в огромном количестве тем, я раскладываю эти файлы в подпапки. Допустим, interface.qmd укладывается в папку oop.

Однако в структуре презентации есть и другие блоки: полезные ссылки, вопросы для самопроверки, самостоятельная работа и прочее. Как их наполнять?

Ответ прост: рядом с файлом с описанием темы я создаю дополнительные файлы.

Давайте теперь соберем все вместе:

title: "Java"
subtitle: Занятие 7
format:
  revealjs:
    transition: slide
    background-transition: fade
    footer: "Java. Занятие 7. Хитёв А.Ю."

# Что было в прошлый раз?
{{< include oop/enum_short.qmd >}}
{{< include oop/generics_short.qmd >}}
{{< include java_basic/comparable_short.qmd >}}
{{< include oop/data_structures_short.qmd >}}
{{< include design_patterns/abstract_dao_short.qmd >}}
 
## Что будет сегодня?
::: {.incremental}
- Внутренние и вложенные классы
- Анонимные классы
- Классы внутри метода
- Работа с ошибками (исключения)
- Шаблоны проектирования
  - Строитель
:::
 
{{< include oop/nested_inner_annon.qmd >}}
{{< include java_basic/exception.qmd >}}
{{< include design_patterns/builder.qmd >}}
 
# Вопросы для самопроверки
{{< include java_basic/exception_questions.qmd >}}
{{< include oop/nested_inner_annon_questions.qmd >}}
 
# Немного самостоятельной работы
{{< include design_patterns/builder_tasks.qmd >}}
 
## В следующей серии…
- Функциональное программирование
  - Функции
  - Лямбды, MethodReference
  - Stream API
- Ввод/Вывод
  - FIle, FileNameFilter
- Шаблоны проектирования
  - Декоратор
 
# Полезные ссылки
{{< include oop/nested_inner_annon_refs.qmd >}}
{{< include java_basic/exception_refs.qmd >}}
{{< include design_patterns/builder_refs.qmd >}}

Что нам это дает?

Мы четко видим структуру. Не нужно скролить до бесконечности, если хочется что-то найти или поменять темы местами (достаточно перетасовать блоки «include»). Если мы что-то хотим поправить или дополнить в теме, мы идем в нужный файл и находим все гораздо быстрее.

Вишенка на торте

Помимо генерации HTML-презентации, тот же самый материал можно сгенерировать в DOCX при помощи команды quarto render --to docx. Это позволяет получить и выдать ученикам тот же самый вариант в удобном формате для чтения и печати. Учитывая возможность рендеринга в DOCX, этот механизм можно применять и при написании статей и диссертаций, при подготовке документации и других материалов.

Если подытожить, Quarto значительно упрощает подготовку учебных материалов. Он позволяет сосредоточиться на содержании, а не на оформлении, обеспечивает простоту повторного использования материалов и легкое обновление контента.

Надеюсь, этот небольшой обзор был полезен. Удачи в создании ваших презентаций!