So erstellen Sie eine Diashow aus Markdown-Notizen

Markdown Die Textformatierung hat das Notieren 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.

HTML-Abzug

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

Schon seit Rubin ist auf allen Macs vorinstalliert und wird installiert kramdown ist einfach. K installierenNiedergang, Öffne ein Terminal und Typ:

sudo gem installieren kramdown

Einmal installiert, die kramdown Befehl ist verwendbar. Geben Sie als Beispiel Folgendes an Markdown in eine Datei namens test.md:

# Dies ist eine Kopfzeile - Aufzählungselement - Ein anderes Aufzählungselement Nur etwas Text.

Geben Sie in der Befehlszeile Folgendes ein:

kramdown test.md> test.html

Es wird jetzt ein test.html Datei mit diesem Inhalt:

Dies ist ein Header

Aufzählungselement
Ein weiterer Punkt

Nur ein Text.

Das kramdown Programm übersetzt nur das Markdown gültig gegeben HTML. Es wird nicht versucht, eine vollständige Seite mit korrekt formatierten Seiten zu erstellen HTML mit einem Header und Body Abschnitten. Dies ist wichtig, um eine Diashow von erstellen zu können Markdown. Für jede Folie die HTML für den angegebenen Inhalt wird generiert und nicht extra. Es ist einfach, die Folien in das Hauptfach einzuwickeln HTML für die Diashow-Seite.

Grundlagen für eine HTML-Diashow

Die Diashow-Seite hat einen Anfang HTML, die Folien HTML, und das Ende HTML. Die Anfangs- und Endabschnitte werden während der Folien kopiert HTML wird von generiert kramdown mit einigen zusätzlichen Aufräumarbeiten.

Erstellen Sie eine Datei mit dem Namen presbegin.html mit diesem Code:

   Diashow

Dies ist der Beginn der Diashow. Es ist nicht vollständig HTML Seite. Der Körper der HTML hat drei divs: Container div, Abschnitt0 div und a rutschen div. Das Container div enthält die gesamte Diashow.

Im Inneren des Behälters befindet sich der Abschnitt0 div und es ist rutschen 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! Es schließt die Divs der letzten Folie und die Karosserie und html Stichworte.

Die einzige spezielle Formatierung, die in den Markdown-Notizen benötigt wird, ist für alle Bilder und für das Detail jeder Folie. Schon seit Markdown Hat einen Ankertyp für Bilder, wird dieses Tag mit einem Unterschied verwendet: Anstatt einer Textbeschreibung für das Bild werden in diesem Bereich die Klassen beschrieben, die an das Bild angehängt werden sollen. Auch die Markdown Code für horizontale Regeln wird verwendet, um Folien zu trennen.

Die Grundformel zum Erstellen der Diashow lautet daher: Kopieren Sie die presbegin.html, generieren HTML Übersetzen Sie alles vom Abschlag

Tags zu

, Korrigieren Sie alle Bild-Tags, um den Subtext als Klassen zu verwenden, und kopieren Sie das presend.html.

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

#! / usr / bin / ruby # # Stellen Sie einige Variablen ein. # required ("FileUtils") $ presDir = "" pressBaseDir = File.dirname (__ FILE__) theme = ARGV [1] # # Liefert die geladenen Folien. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Ruft das Verzeichnis der Präsentation ab. # $ presDir = File.dirname (ARGV [0]) # # Konvertieren Sie den Markdown in HTML. # presTextHTML = 'cat' # ARGV [0] '| kramdown '# # Wandelt die horizontalen Regeln in die benötigten Divs um. # $ divCount = 1 während presTextHTML.sub! (/ \
/, "

")! = nil do $ divCount = $ divCount + 1 end $ divCount = $ divCount -1 # # Stellen Sie sicher, dass das letzte div geschlossen wird. # presTextHTML + ="

"; # # Festlegen, dass alle Bilder nach der Dia div. Stehen. # M = / \\\<\/p\>/.match(presTextHTML) wenn m! = nil postMatch = "" presTextHTML = "" während m! = nil presTextHTML + = m.pre_match presTextHTML + = "

Diese Rubin 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

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.

Formatierung mit CSS

Mit der Massenübersetzung der Markdown Datei in HTML fertig ist der nächste Schritt das Formatieren der Folien. Um die benötigten Stile zu erstellen, fügen Sie diesen Code dem Header-Abschnitt des hinzu presbegin.html Datei:

Der erste Teil ist ein Reset-Skript, das MeyerWeb Reset verwendet. Wann immer mit HTML und CSS, Mit einem Reset-Skript sollte jeder Browser auf das gleiche Spielfeld gestellt werden. Dies 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 Designdatei. Machen Sie eine Datei mit dem Namen Basic.css und geben Sie den folgenden Code ein:

/ * * Wird die CSS-Datei für das Basic Theme sein * / body background-color: rgba (79, 150, 200, 0.4);  .slide color: rgb (221, 239, 252); Hintergrundfarbe: rgba (79, 150, 200, 0,4);  .slide h1, .slide h2, .slide h3, .slide h4, .slide h5, .slide h6, .slide p, .slide ol li, .slide ul li font-family: Times;  .background Deckkraft: .80;  .slide h1 font-size: 10em;  .slide h2 font-size: 8em;  .slide h3 font-size: 6em;  .slide h4 font-size: 4em;  .slide h5 font-size: 2em;  .slide h6 font-size: 1em;  .slide p font-size: 2em;  .slide ol list-style: dezimal-führende-null; Text ausrichten: links;  .slide ol li font-size: 2em;  .slide ul list-style: disc; Text ausrichten: links;  .slide ul li font-size: 2em;

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

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

![Hintergrund] (image-01.jpg)

Fügen Sie das Javascript hinzu

Für das schnellste Laden einer Webseite können Sie die JavaScripts sollte am unteren Rand der Seite sein. Deshalb in der presend.html, Fügen Sie diesen Code kurz vor dem Schließen hinzu Karosserie Etikett:

Dieser Code wird geladen Mausefalle um die Diashow zu steuern und jQuery die Übergänge durchführen. Zur Steuerung der Diashow werden zwei globale Variablen verwendet: SlideNum und Dauer. Das SlideNum ist die Nummer für die aktuelle Folie und Dauer legt die Geschwindigkeit der Änderung fest. Je niedriger die Dauer, desto schneller wechseln die Folien.

Als nächstes werden drei Funktionen definiert: nächste Folie(), 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 habe 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 linker Pfeil Schlüssel ist an die gebunden prevSlide () Funktion, die rechte Pfeiltaste ist an die gebunden nächste Folie() Funktion und die b Schlüssel ist an die gebunden beginSlide () Funktion.

Im Code sehen Sie die window.MaxSlideNum Globale Variable. Das Rubin Code zum Erstellen der Folien legt diese Variable im HTML für die Folienpräsentation generiert. 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, Dropzone 3-Aktionen schreiben, zeigt, wie man ein erstellt Dropzone 3 Aktion. Folgen Sie diesem Tutorial, um ein neues zu erstellen Dropzone 3 Aktion mit dem folgenden Code:

# Dropzone Aktionsinfo # Name: MD to HTML Presentation Converter # Beschreibung: Übernimmt eine Markdown-Datei und konvertiert diese in eine HTML / CSS-Präsentation im Dateiverzeichnis. Es wird davon ausgegangen, dass Sie Kramdown lokal installiert haben. Gehen Sie zur Installation in eine Befehlszeile und geben Sie "sudo gem install kramdown" ein. # Handles: Dateien # Ersteller: Richard Guay # URL: http://customct.com # Ereignisse: Geklickt, gezogen # KeyModifiers: Befehl, Option, Steuerelement, Shift # SkipConfig: Nein # RunsSandboxed: Ja # Version: 1.0 # MinDropzoneVersion: 3.0 # # Funktion: dragged # # Beschreibung: Diese Funktion wird mit Dropzone aufgerufen, bei der Dateien gelöscht wurden. # Sie hat dann jede Datei als Abschriftenpräsentation verarbeitet. # def gezogen # # Einige Variablen setzen. # $ presDir = "" pressBaseDir = File.expand_path (".") presNum = $ items.count theme = definiert? (ENV ['theme'])? ENV ['theme']: "Basic" # # Sagen Sie Dropzone, dass wir anfangen. # $ dz.begin ("Konvertieren von # presNum -Präsentationen…") $ dz.determinate (true) # # Lädt die Teile der Folienpräsentation. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Index für alle angegebenen Präsentationen. # für den Index in 0… presNum # # Liefert das Verzeichnis der Präsentation. # $ presDir = File.dirname ($ items [Index]) # # Konvertieren Sie den Markdown in HTML. # presTextHTML = 'cat' # $ items [index] '| kramdown '# # Wandelt die horizontalen Regeln in die benötigten Divs um. # $ divCount = 1 während presTextHTML.sub! (/ \
/, "

")! = nil do $ divCount = $ divCount + 1 end $ divCount = $ divCount -1 # # Stellen Sie sicher, dass das letzte div geschlossen wird. # presTextHTML + ="

"postMatch = m.post_match m = / \\\<\/p\>/.match(m.post_match) end presTextHTML + = postMatch end presTextHTML + = ""# # Schreibe den HTML-Code in eine index.html-Datei in diesem Verzeichnis. # Target = open (" # $ presDir / index.html ", 'w') target.truncate (0) target.write (presBegin + presTextHTML.) + presEnd) target.close # # Kopieren Sie die CSS-Datei in dieses Verzeichnis und benennen Sie sie in theme.css um. # FileUtils.cp ("# pressBaseDir / # theme .css", $ presDir) File.rename (" # $ presDir / # theme .css "," # $ presDir /theme.css ") # # Teilen Sie Dropzone mit, wie viel Prozent ausgeführt werden. # $ dz.percent ((((index + 1) * 100) ) / presNum) .to_i) end # # Sagen Sie Dropzone, dass wir fertig sind. # $ dz.finish ("All Presentations Made.") # Sie sollten in Ihrem Skript immer $ dz.url oder $ dz.text als letztes aufrufen unterhalb der $ dz.text-Zeile wird Text in die Zwischenablage eingefügt. # Wenn Sie nichts in die Zwischenablage einfügen möchten, sollten Sie weiterhin $ dz.url (false) $ dz.url ("file: // # $ presDir.) aufrufen /index.html ") end def click # # Der Benutzer kann ein Thema auswählen. # theme =" Basic "# # Liste der Designs anzeigen. # qstr =" standard-dropdown --title \ "Compress Files: Graphic Format \ "--text \" What Theme? \ "--Ite ms "themlist = [] i = 0 Dir.glob (" *. css ") | Dateiname | Dateiname = Dateiname (Dateiname, ". css") qstr + = "\" # Dateiname \ "" themlist [i] = Dateiname i + = 1 button2, index = $ dz.cocoa_dialog (qstr) .split ("\ n") index = index.to_i theme = themlist [index] # # Legt das ausgewählte Design fest. # $ dz.save_value ("theme", theme) # # Sagen Sie dem Benutzer, was er ausgewählt hat. # $ dz.finish ("Sie haben '# theme' für Ihr Design ausgewählt.") $ dz.url (false) end

Laden Sie die Aktion nach dem Erstellen in Dropzone 3. Wenn ein Markdown Wenn die Datei in der Zone abgelegt wird, wird die Präsentation in demselben Verzeichnis erstellt.

Dropzone 3 Aktion

Schon seit Dropzone 3 eignet sich hervorragend für das Ablegen vieler Elemente, es können sehr viele Präsentationen gleichzeitig angezeigt werden. Sammeln Sie einfach die Dateien in der Drop Bar. Bewegen Sie sie dann zum Konvertieren in die Dropzone. Wenn Sie auf die Aktion klicken, können Sie das zu verwendende Design auswählen. Das abgeschlossen Dropzone 3 Aktion ist im Download enthalten.

Markieren Sie auf die Präsentation Alfred Workflow

Dies kann auch zu einem gemacht werden Alfred Workflow. Der abgeschlossene Workflow ist im Download enthalten. Das MDS: Thema Mit dem Befehl können Sie das zu verwendende Design auswählen. Das mds: showtheme zeigt den Namen der aktuell eingestellten in einer Benachrichtigung an. Du kannst den ... benutzen Alfred Browser um eine Markdown-Datei anzuzeigen. Wenn du schlägst rechter Pfeil In der Datei können Sie das auswählen Markieren Sie zu den Folien Befehl zum Erstellen der Präsentation.

Deckset macht alles

Wenn Sie dieses Programm nützlich finden, möchten Sie vielleicht auschecken Deckset.

Deckset Markdown zur Präsentation

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

Fazit

Da die Zeit immer knapp ist, ist es großartig, Notizen als Grundlage für eine Präsentation zu verwenden. Nachdem Sie nun 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.

Computerfähigkeiten