Generieren Sie Google Slides aus Markdown und HTML. Über die Befehlszeile ausführen oder in eine andere Anwendung einbetten.
Dieses Projekt wurde als Beispiel für die Verwendung der Slides-API entwickelt.
Auch wenn damit noch keine atemberaubend schönen Decks erstellt werden, empfehlen wir Ihnen, dieses Tool für die schnelle Prototypenerstellung von Präsentationen zu verwenden.
Beiträge sind willkommen.
Für die Verwendung über die Befehlszeile installieren Sie md2gslides global:
npm install -g md2gslides
Dann holen Sie sich Ihre OAuth-Client-ID-Anmeldeinformationen:
client_id.json
(Name muss übereinstimmen) und speichern Sie es unter ~/.md2googleslides
.Importieren Sie nach der Installation Ihre Folien, indem Sie Folgendes ausführen:
md2gslides slides.md --title " Talk Title "
Dadurch werden in Ihrem Konto neue Google Slides mit dem Titel Talk Title
generiert.
HINWEIS: Bei der ersten Ausführung des Befehls werden Sie zur Autorisierung aufgefordert. OAuth-Token-Anmeldeinformationen werden lokal in einer Datei namens ~/.md2googleslides/credentials.json
gespeichert.
Jedes Mal, wenn Sie den obigen Kommentar ausführen, wird ein neues Foliendeck generiert. Um an genau demselben Deck zu arbeiten, benötigen Sie lediglich die ID der bereits generierten Folien. Sie können beispielsweise den folgenden Befehl verwenden:
# To reuse deck available at: https://docs.google.com/presentation/d/<some id>/edit#
md2gslides slides.md --title "Talk Title" --append <some id> --erase
md2gslides verwendet für den Markdown eine Teilmenge der CommonMark- und Github Flavored Markdown-Regeln.
Jede Folie wird normalerweise durch eine Kopfzeile dargestellt, gefolgt von null oder mehr Blockelementen.
Beginnen Sie eine neue Folie mit einer horizontalen Linie ( ---
). Für die erste Folie kann das Trennzeichen weggelassen werden.
Die folgenden Beispiele zeigen, wie Sie Folien mit verschiedenen Layouts erstellen:
--- # Dies ist eine Titelfolie ## Ihr Name hier
--- # Dies ist ein Abschnittstitel
--- # Abschnittstitel und Hauptfolie ## Dies ist ein Untertitel Das ist der Körper
--- # Titel- und Textfolie Dies ist der Folienkörper.
Fügen Sie {.big}
zum Titel hinzu, um eine Folie mit einem wichtigen Punkt zu erstellen
--- # Das ist der Hauptpunkt {.big}
Verwenden Sie {.big}
auch in Kombination mit einem Text für einen Header.
--- # 100 % {.big} Das ist der Körper
Trennen Sie Spalten mit {.column}
. Die Markierung muss in einer eigenen Zeile mit einem Leerzeichen davor und danach stehen.
--- # Zweispaltiges Layout Dies ist die linke Spalte {.Spalte} Dies ist die rechte Spalte
md2googleslides
bearbeitet oder kontrolliert keine themenbezogenen Optionen. Legen Sie einfach direkt in Google Slides das gewünschte Basisthema fest. Selbst wenn Sie die Option --append
für die Wiederverwendung des Decks verwenden, wird das Design nicht geändert.
Bilder können mithilfe von Bild-Tags auf Folien platziert werden. Es können mehrere Bilder eingebunden werden. Mehrere Bilder in einem einzelnen Absatz werden in Spalten angeordnet, mehrere Absätze in Zeilen.
Hinweis: Bilder werden derzeit so skaliert und zentriert, dass sie in die Folienvorlage passen.
--- # Folien können Bilder enthalten 
Legen Sie das Hintergrundbild einer Folie fest, indem Sie am Ende einer Bild-URL {.background}
hinzufügen.
--- # Folien können Hintergrundbilder haben {.background}
Fügen Sie YouTube-Videos mit einem geänderten Bild-Tag hinzu.
--- # Folien können Videos enthalten @[youtube](MG8KADiRbOU)
Fügen Sie mithilfe von HTML-Kommentaren Sprechernotizen zu einer Folie hinzu. Der Text in den Kommentaren kann Markierungen für die Formatierung enthalten, allerdings ist nur Textformatierung zulässig. Videos, Bilder und Tabellen werden in Sprechernotizen ignoriert.
--- # Folientitel {.background} <!-- Dies sind Sprechernotizen. ->
Grundlegende Formatierungsregeln sind zulässig, darunter:
Der folgende Markdown veranschaulicht einige gängige Stile.
**Fett**, *kursiv* und ~~durchgestrichen~~ können verwendet werden. Geordnete Listen: 1. Punkt 1 1. Punkt 2 1. Punkt 2.1 Ungeordnete Listen: * Punkt 1 * Punkt 2 * Punkt 2.1
Darüber hinaus wird eine Teilmenge von Inline-HTML-Tags für das Styling unterstützt.
<span>
<sup>
<sub>
<em>
<i>
<strong>
<b>
Unterstützte CSS-Stile zur Verwendung mit <span>
-Elementen:
color
background-color
font-weight: bold
font-style: italic
text-decoration: underline
text-decoration: line-through
font-family
font-variant: small-caps
font-size
(für Einheiten müssen Punkte verwendet werden) Sie können auch {style="..."}
-Attribute nach Markdown-Elementen verwenden, um Stile anzuwenden. Dies kann für Header, Inline-Elemente, Codeblöcke usw. verwendet werden.
Verwenden Sie Emojis im Github-Stil in Ihrem Text mit dem :emoji:
.
Im folgenden Beispiel werden Emojis in die Kopfzeile und den Textkörper der Folie eingefügt.
### I :heart: Katzen :heart_eyes_cat:
Es werden sowohl eingerückte als auch eingezäunte Codeblöcke mit Syntaxhervorhebung unterstützt.
Das folgende Beispiel rendert hervorgehobenen Code.
### Hallo Welt „Javascript console.log('Hallo Welt'); „
Um das Syntax-Hervorhebungsthema zu ändern, geben Sie die Option --style <theme>
in der Befehlszeile an. Alle Highlight.js-Themen werden unterstützt. Zum Beispiel, um das Github-Theme zu verwenden
md2gslides slides.md --style github
Sie können auch zusätzliche Stiländerungen auf den gesamten Block anwenden, z. B. die Schriftgröße ändern:
### Hallo Welt „Javascript console.log('Hallo Welt'); „{style="font-size: 36pt"}
Tabellen werden über die GFM-Syntax unterstützt.
Hinweis: Das Einfügen von Tabellen und anderen Blockelementen auf derselben Folie kann bei überlappenden Elementen zu schlechten Ergebnissen führen. Vermeiden Sie es entweder oder passen Sie das Layout nach der Folienerstellung manuell an.
Im Folgenden wird eine 2x5-Tabelle auf der Folie generiert.
### Top-Haustiere in den Vereinigten Staaten Tier | Nummer -------|-------- Fisch | 142 Millionen Katzen | 88 Millionen Hunde | 75 Millionen Vögel | 16 Millionen
Bilder, die auf lokale Pfade verweisen, wurden vorübergehend hochgeladen und auf file.io gehostet. File.io ist ein temporärer Dateiserverdienst, der kurzlebige, zufällige URLs zur Upload-Datei generiert und Inhalte kurz nach der Verwendung löscht.
Da lokale Bilder an einen Drittanbieter hochgeladen werden, ist für die Nutzung dieser Funktion eine ausdrückliche Einwilligung erforderlich. Fügen Sie die Option --use-fileio
hinzu, um dem Hochladen von Bildern zuzustimmen. Dies gilt sowohl für dateibasierte Bilder als auch für automatisch gerasterte Inhalte wie mathematische Ausdrücke und SVGs.
Folien können auch generierte Bilder enthalten, wobei $$$
umzäunte Blöcke für die Daten verwendet werden. Derzeit unterstützte generierte Bilder sind mathematischer Ausdruck (TeX und MathML) sowie SVG. Gerasterte Bilder werden wie lokale Bilder behandelt. Sie müssen sich für das Hochladen von Bildern zu einem Drittanbieterdienst über die Option --use-fileio
anmelden.
Verwendung von TeX:
# Wie wäre es mit etwas Mathe? $$$ Mathe cos (2theta) = cos^2 theta - sin^2 theta $$$
SVG
# Oder etwas SVG? $$$ SVG <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"> <defs> <path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/> </defs> <clipPath id="b"> <use xlink:href="#a" overflow="visible"/> </clipPath> <path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/> <path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/> <path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/> </svg> $$$
Generierte Bilder werden wie lokale Bilder vorübergehend über file.io bereitgestellt.
Pull-Requests für andere Bildgeneratoren (z. B. Mermaid, ChartJS usw.) sind willkommen!
Sie können Markdown auch über die Pipeline an das Tool weiterleiten, indem Sie das Dateinamenargument weglassen.
Mit Ausnahme von /bin/md2gslides.js
wird durchgehend TypeScript verwendet und mit Babel kompiliert. Zum Testen werden Mokka und Chai verwendet.
Stellen Sie vor allem sicher, dass Sie über alle Abhängigkeiten verfügen:
npm install
Zum Kompilieren:
npm run compile
So führen Sie Unit-Tests durch:
npm run test
So fusseln/formatieren Sie Tests:
npm run lint
Weitere Bedingungen finden Sie unter BEITRAGEN.
Diese Bibliothek ist unter Apache 2.0 lizenziert. Der vollständige Lizenztext ist unter LIZENZ verfügbar.