Markdown na slajdy

Twórz prezentacje tak, jak piszesz pliki README: nagłówki Markdown, listy punktowane i bloki kodu, rozdzielone poziomymi liniami --- na poszczególne slajdy. Narzędzie renderuje Twój zestaw slajdów na żywo za pomocą Reveal.js (motywy: czarny, biały, prosty, solarized), obsługuje notatki prelegenta z Note:, zagnieżdżone pionowe slajdy z -- oraz eksportuje do samodzielnego pliku HTML lub gotowego do druku PDF.

Jak Markdown staje się zestawem slajdów

  1. 1

    Napisz Markdown

    Użyj `---`, aby rozdzielić slajdy. Standardowe nagłówki, listy i bloki kodu działają jak zwykle.

  2. 2

    Dodaj notatki prelegenta

    Rozpocznij akapit od `Note:`: pojawi się on tylko w trybie prelegenta.

  3. 3

    Podejrzyj zestaw slajdów

    Podgląd na żywo pokazuje zestaw slajdów z nawigacją za pomocą klawiszy strzałek.

  4. 4

    Wybierz motyw

    Czarny, biały, league, sky, prosty, solarized: dowolny motyw Reveal.js.

  5. 5

    Wyeksportuj

    Samodzielny plik HTML lub PDF przez wydruk w przeglądarce.

Składnia slajdów

# Slajd otwierający

Tekst podtytułu tutaj

---

## Drugi slajd

- Punkt pierwszy
- Punkt drugi
- Punkt trzeci

Note: to są notatki prelegenta widoczne tylko w trybie prelegenta.

---

## Slajd z kodem

\`\`\`python
def hello(name):
    return f"Hi {name}"
\`\`\`
  • --- (trzy myślniki w osobnym wierszu) rozpoczyna nowy slajd poziomy.
  • -- (dwa myślniki) rozpoczyna slajd pionowy w obrębie bieżącej kolumny slajdów, naciśnij strzałkę w dół, aby zejść niżej.
  • Note: na początku akapitu staje się notatką prelegenta.

Nawigacja klawiaturą

Klawisz Działanie
Prawo / Spacja Następny slajd
Lewo Poprzedni slajd
W dół / W górę Nawigacja po stosie pionowym
s Otwórz widok prelegenta
o Przegląd slajdów
f Pełny ekran
? Okno pomocy

Sztuczki układu

  • Układ dwukolumnowy: użyj surowego kodu HTML w slajdzie, <div class="columns">...</div>.
  • Odsłanianie fragmentów: listy punktowane pojawiają się pojedynczo dzięki atrybutowi {.fragment}, gdy używasz Reveal.js bezpośrednio. Dodaj to jako surowy kod HTML w razie potrzeby.
  • Obrazy tła: atrybut na poziomie slajdu <!-- .slide: data-background="url" --> ustawia tło na całą powierzchnię.
  • Automatyczna animacja między slajdami: Reveal 4 obsługuje płynne przejścia dla pasujących elementów, włącz je w ustawieniach motywu.

Eksport do PDF

W podglądzie na żywo otwórz ?print-pdf w adresie URL przeglądarki i skorzystaj z okna drukowania przeglądarki. Wybierz A4 w orientacji poziomej, włączone grafiki tła, minimalne marginesy. Reveal.js generuje jeden slajd na stronę, a notatki prelegenta trafiają na opcjonalne dodatkowe strony.

Kiedy slajdy oparte na Markdown błyszczą

  • Prelekcje techniczne z wieloma przykładami kodu.
  • Zestawy stawiające treść na pierwszym miejscu, gdzie układ jest drugorzędny.
  • Dokumentacja jako slajdy, trzymaj prezentacje obok pliku README projektu w git.
  • Materiały szkoleniowe pod kontrolą wersji.

Kiedy nie

  • Efektowne wizualnie prezentacje z precyzyjnym rozmieszczeniem obrazów.
  • Slajdy wymagające złożonych animacji lub synchronizacji osadzonego wideo.
  • Zestawy zarządzane przez markę, w których szablony narzucają każdy szczegół.

Najczęściej zadawane pytania

Tak, standardowa składnia obrazów w Markdown działa. Użyj bezwzględnych adresów URL lub najpierw prześlij obrazy, aby były dostępne z wyeksportowanego HTML.

Tak, opcjonalnie. Tryb druku Reveal obsługuje opcję „notatki jako osobna strona“, każdy slajd staje się dwiema stronami PDF: jedną ze slajdem, drugą z notatkami.

Nie. Renderowanie odbywa się lokalnie w Twojej przeglądarce. Źródło Markdown i wyeksportowany HTML nigdy nie opuszczają Twojego komputera.

Tak. Dodaj blok <style> na górze swojego Markdown lub podlinkuj zewnętrzny arkusz stylów w ustawieniach motywu. Zostanie on wstrzyknięty do wyniku Reveal.js.

Wyeksportowany HTML to samodzielny plik, który działa na dowolnym hostingu statycznym, GitHub Pages, Netlify, S3. Prześlij plik HTML i gotowe.

Powiązane narzędzia

Narzędzie jest dostępne w innych językach