Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Computer Skills
  2. Markdown
Computers

Wie kann man eine Diashow aus Markdown-Notizen erstellen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Die Textformatierung von Markdown hat die Notizenaufzeichnung revolutioniert. Sie können formatieren, ohne das Geschriebene zu stören. Jetzt kommt der Moment, in dem Sie eine Präsentation auf Basis Ihrer Notizen erstellen müssen.  Sie benötigen eine effektive und einfache Möglichkeit, Ihre Präsentation aus Ihren Notizen zu erstellen. In diesem Tutorial zeige ich Ihnen, wie Sie eine HTML-Diashow aus Markdown-Notizen erstellen.

HTML-Markdown  

Ein Rendering-Programm ist ein Programm, das den Markdown übernimmt und in ein anderes Format übersetzt. Der beste Renderer, den ich verwendet habe, ist kramdownKramdown ist ein Ruby-Programm, das Text in einem Format übernimmt und in ein anderes übersetzt. Der Standardwert ist HTML-Markdown.

Da Ruby auf allen Macs vorinstalliert ist, ist die Installation von kramdown einfach. Um kramdown zu installieren, öffnen Sie ein Terminal und geben Folgendes ein:

sudo gem install kramdown

Nach der Installation kann der Befehl kramdown verwendet werden. Fügen Sie als Beispiel den folgenden Markdown in eine Datei namens test.md ein:

Geben Sie in der Befehlszeile Folgendes ein:

kramdown test.md > test.html

Es wird jetzt eine test.html-Datei mit diesem Inhalt geben:

Das kramdown-Programm übersetzt nur den angegebenen Markdown in gültiges HTML. Es wird nicht versucht, eine vollständige Seite mit ordnungsgemäß formatiertem HTML-Code mit Kopf- und Hauptteil zu erstellen.  Das ist wichtig für das Erstellen einer Diashow aus Markdown. Für jede Folie wird der HTML-Code für den angegebenen Inhalt generiert und nicht zusätzlich. Es ist einfach, die Folien innerhalb des Haupt-HTML-Codes für die Diashow-Seite einzuwickeln.

Grundlagen für eine HTML-Diashow

Die Slideshow-Seite enthält einen Anfangs-HTML, einen Folien-HTML-Code und einen HTML-Abschluss. Die Anfangs- und Endabschnitte werden kopiert, während die HTML-Folien der Folien von kramdown mit zusätzlichen Aufräumarbeiten generiert werden.

Erstellen Sie eine Datei namens presbegin.html mit diesem Code:

Dies ist der Beginn der Diashow. Es ist keine vollständige HTML-Seite. Der Hauptteil des HTML-Codes hat drei divs: container div, section0 div und ein slide div. Der Container div enthält die gesamte Diashow.

Innerhalb des Containers befindet sich die sektion0 div0 und die slide div. In den Abschnitten wird alles in jedem Folienabschnitt formatiert, während die einzelne Folie die Formatierung für diese Folie enthält.

Das Ende wird ähnlich sein. Erstellen Sie eine Datei mit dem Namen presend.html und geben Sie den folgenden Code ein:

Nicht viel! Die divs der letzten Folie sowie die Tags body und html werden geschlossen.

Die einzige spezielle Formatierung, die in den Markdown-Notizen benötigt wird, ist für alle Bilder und für das Detail jeder Folie. Da markdown einen Ankertyp für Bilder hat, wird dieses Tag mit einem Unterschied verwendet: Anstelle einer Textbeschreibung für das Bild werden in diesem Bereich die Klassen beschrieben, die an das Bild angehängt werden sollen.  Der Markdown-Code für horizontale Regeln wird auch zum Trennen von Folien verwendet.

Die Grundformel für das Erstellen der Diashow lautet daher: Kopieren Sie die Datei presbegin.html, generieren Sie HTML-Code aus dem Markdown und übersetzen Sie alle <hr /> Tags in </div></div><div id='section1' class='section'><div class='slide'></code>, korrigieren Sie alle Bild-Tags, um den Subtext als Klassen zu verwenden, und kopieren Sie die Datei presend.html.

Erstellen Sie eine neue Datei mit dem Namen pres.rb und geben Sie diesen Code ein:

Dieser Ruby-Code führt die Aktionen wie beschrieben aus. Die Programmdatei muss ausführbar gemacht werden mit:

chmod a + x pres.rb

Das Programm wird mit der folgenden Befehlszeile verwendet:

pres.rb <name of markdown file> <theme name> 

Bei diesem Code wird davon ausgegangen, dass sich die Präsentation nicht im selben Verzeichnis befindet wie der Code. Stellen Sie daher sicher, dass Sie den Code an Ihrem Pfad hinzufügen, wo immer Sie den Code haben.

Mit CSS formatieren

Nach der Massenübersetzung der Markdown-Datei in HTML erfolgt der nächste Schritt im Formatieren der Folien. Um die benötigten Stile zu erstellen, fügen Sie diesen Code zum Header-Abschnitt der Datei presbegin.html hinzu:

Der erste Teil ist ein Reset-Skript, das MeyerWeb Reset verwendet. Bei der Arbeit mit HTML und CSS sollte ein Reset-Skript verwendet werden, um jeden Browser auf das gleiche Spielfeld zu setzen. Das ist eine gute Designpraxis.

Der zweite Teil enthält die Stile, die erforderlich sind, damit die Folien den Bildschirm aufnehmen, den zu zentrierenden Text, die grundlegende Reihenfolge und Formatierung der Bilder sowie die Grundeinstellungen für ein Hintergrundbild.

Ich habe die Bildschirmgröße auf 1200 x 640 Pixel eingestellt, was auf meinem MacBook Air 11 "-Bildschirm hervorragend funktioniert. Sie können die Anzeige nach Ihren Wünschen ändern.

Erstellen Sie jetzt eine Design-Datei. Erstellen Sie eine Datei mit dem Namen Basic.css und geben Sie den folgenden Code ein:

Dies ist ein grundlegendes Thema, mit dem Sie Ihre eigenen Designs erstellen können. Diese Designdatei wird in das Präsentationsverzeichnis kopiert und in theme.css umbenannt. Das ist die Datei, die von der Diashow geladen wurde.

Um Bildern einen zusätzlichen Stil zu verleihen, erstellen Sie in der CSS-Datei des Designs ein Klassen-Tag. Fügen Sie das Klassentag dem Text für das Bild hinzu. Ein Bild mit dem Hintergrund-Tag würde daher folgendermaßen aussehen:

Fügen Sie das Javascript hinzu

Um ein schnelles Laden einer Webseite zu ermöglichen, sollten sich die JavaScripts unten auf der Seite befinden. Fügen Sie daher in der Datei presend.html diesen Code unmittelbar vor dem schließenden body-Tag hinzu:

Dieser Code wird in Mousetrap geladen, um die Diashow zu steuern, und jQuery, um die Übergänge auszuführen.Zur Steuerung der Diashow werden zwei globale Variablen verwendet: slideNum und Duration.  Die SlideNum ist die Nummer für die aktuelle Folie. Die duration bestimmt die Geschwindigkeit der Änderung. Je niedriger die Dauer ist, desto schneller wechseln die Folien.

Als nächstes werden drei Funktionen definiert: nextSlide(), prevSlide() und beginSlide(). Mit diesen Funktionen kann der Benutzer zur nächsten Folie, zur vorherigen Folie bzw. zurück zur ersten Folie wechseln.

Nach den Funktionen verwendete ich einen Haken an der jQuery-Ready-Funktion, die Code verarbeitet, nachdem alles in den Browser geladen wurde. Sobald alles geladen ist, werden alle Folien ausgeblendet und nur die erste Folie wird sichtbar.  Dann ist die linke Pfeiltaste an die Funktion prevSlide() gebunden, die rechte Pfeiltaste an die Funktion nextSlide() und die Taste b an die Funktion beginSlide().

Im Code werden Sie die globale Variable window.MaxSlideNum bemerken. Der Ruby-Code zum Erstellen der Folien legt diese Variable im HTML-Code fest, der für die Folienpräsentation generiert wird.  Sie teilt den Steuerfunktionen mit, wie viele Folien in dieser Präsentation vorhanden sind.

Andere Möglichkeiten, das Skript zu verwenden

Die Verwendung des Befehlszeilenprogramms ist zwar machbar, aber nicht bequem. Das Tutorial Schreiben von Dropzone 3-Aktionen zeigt, wie Sie eine Dropzone 3-Aktion erstellen. Folgen Sie diesem Tutorial, um eine neue Dropzone 3-Aktion mit dem folgenden Code auszuführen:

Laden Sie nach der Erstellung die Aktion in Dropzone 3. Wenn eine Markdown-Datei in der Zone abgelegt wird, erstellt sie die Präsentation in demselben Verzeichnis.

Dropzone 3 Action
Dropzone 3 Aktion

Da Dropzone 3 zum Ablegen vieler Elemente geeignet ist, können Sie sehr viele Präsentationen gleichzeitig anzeigen. Sammeln Sie einfach die Dateien in der Drop-Leiste.  Bewegen Sie sie dann zum Konvertieren in die Dropzone. Wenn Sie auf die Aktion klicken, können Sie das zu verwendende Thema auswählen. Die abgeschlossene Aktion Dropzone 3 ist im Download enthalten.

Markdown to Presentation Alfred Workflow
Markdown auf die Präsentation Alfred Workflow

Dies kann auch zu einem Alfred Workflow gemacht werden. Der abgeschlossene Workflow ist im Download enthalten. Mit dem Befehl mds: theme können Sie das zu verwendende Design auswählen. Das mds: showtheme zeigt den Namen der aktuell eingestellten in einer Benachrichtigung.  Mit dem Alfred-Browser können Sie eine Markdown-Datei anzeigen. Wenn Sie mit der rechten Maustaste auf die Datei klicken, können Sie den Befehl Markdown to Slides auswählen, um die Präsentation zu erstellen.

Deckset macht alles

Wenn Sie dieses Programm für nützlich halten, sollten Sie Deckset ausprobieren.

Deckset Markdown to Presentation
Deckset Markdown zur Präsentation

Deckset nimmt eine Markdown-Datei und konvertiert sie in eine Diashow. Es bietet mehr Funktionen als in diesem Tutorial beschrieben. Es hat auch viele tolle Themen zu verwenden.

Schlussfolgerung

Da die Zeit immer knapp ist, ist es großartig, Notizen als Grundlage für eine Präsentation zu verwenden. Jetzt, da Sie die Werkzeuge in der Hand haben, können Sie einige großartige Präsentationen machen.  Dieser Code ist sehr einfach und es gibt viel Raum für Verbesserungen. Wenn Sie Änderungen oder neue Designs für diesen Code haben, geben Sie diese bitte weiter 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.