Softonic

Markdown в слайды

Шаг 1 / 3
Далее

Создавайте презентации так же, как вы пишете README: заголовки Markdown, маркированные списки и блоки кода, разделённые горизонтальными линиями --- на слайды. Инструмент отображает вашу колоду вживую с помощью Reveal.js (темы: чёрная, белая, простая, solarized), поддерживает заметки докладчика через Note:, вложенные вертикальные слайды через -- и экспортирует в автономный HTML-файл или готовый к печати PDF.

Как Markdown становится набором слайдов

  1. 1

    Напишите Markdown

    Используйте `---` для разделения слайдов. Стандартные заголовки, списки и блоки кода работают как обычно.

  2. 2

    Добавьте заметки докладчика

    Начните абзац с `Note:`: он отображается только в режиме докладчика.

  3. 3

    Просмотрите колоду

    Живой предпросмотр показывает колоду с навигацией по стрелкам.

  4. 4

    Выберите тему

    Чёрная, белая, league, sky, простая, solarized: любая тема Reveal.js.

  5. 5

    Экспорт

    Автономный HTML-файл или PDF через печать браузера.

Синтаксис слайдов

# Начальный слайд

Текст подзаголовка здесь

---

## Второй слайд

- Пункт один
- Пункт два
- Пункт три

Note: это заметки докладчика, видимые только в режиме докладчика.

---

## Слайд с кодом

\`\`\`python
def hello(name):
    return f"Hi {name}"
\`\`\`
  • --- (три дефиса на отдельной строке) начинает новый горизонтальный слайд.
  • -- (два дефиса) начинает вертикальный слайд внутри текущей колонки слайдов, нажмите стрелку вниз, чтобы спуститься.
  • Note: в начале абзаца превращается в заметку докладчика.

Навигация с клавиатуры

Клавиша Действие
Вправо / Пробел Следующий слайд
Влево Предыдущий слайд
Вниз / Вверх Навигация по вертикальному стеку
s Открыть режим докладчика
o Обзор слайдов
f Полноэкранный режим
? Окно справки

Приёмы вёрстки

  • Двухколоночная вёрстка: используйте сырой HTML внутри слайда, <div class="columns">...</div>.
  • Показ фрагментов: маркированные списки появляются по одному с помощью атрибута {.fragment} при прямом использовании Reveal.js. При необходимости добавьте это как сырой HTML.
  • Фоновые изображения: атрибут уровня слайда <!-- .slide: data-background="url" --> задаёт фон на весь экран.
  • Автоанимация между слайдами: Reveal 4 поддерживает плавные переходы для совпадающих элементов, включите её в настройках темы.

Экспорт в PDF

Из живого предпросмотра откройте ?print-pdf в адресной строке браузера и воспользуйтесь окном печати браузера. Выберите A4 в альбомной ориентации, включите фоновую графику и минимальные поля. Reveal.js выводит по одному слайду на страницу, а заметки докладчика, на дополнительных страницах по желанию.

Когда слайды на основе Markdown блистают

  • Технические доклады с большим количеством примеров кода.
  • Колоды, где на первом месте содержание, а вёрстка вторична.
  • Документы в виде слайдов, храните презентации рядом с файлом README проекта в git.
  • Учебные материалы под контролем версий.

Когда не подходит

  • Насыщенные дизайном кейноуты с точным размещением изображений.
  • Слайды, которым нужны сложные анимации или тайминг встроенного видео.
  • Колоды под управлением бренда, где шаблоны диктуют каждую деталь.

Часто задаваемые вопросы

Да, работает обычный синтаксис изображений Markdown. Используйте абсолютные URL или сначала загрузите изображения, чтобы они были доступны из экспортированного HTML.

Да, по желанию. Режим печати Reveal поддерживает «заметки на отдельной странице», каждый слайд превращается в две PDF-страницы: одну со слайдом, другую с заметками.

Нет. Рендеринг происходит локально в вашем браузере. Исходник Markdown и экспортированный HTML никогда не покидают ваш компьютер.

Да. Добавьте блок <style> в начало вашего Markdown или подключите внешнюю таблицу стилей в настройках темы. Она встраивается в вывод Reveal.js.

Экспортированный HTML, это автономный файл, работающий на любом статическом хостинге: GitHub Pages, Netlify, S3. Загрузите HTML, и готово.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Инструмент доступен на других языках