Så här skapar du en presentationspresentation från Markdown Notes

Prissänkning textformatering har revolutionerat notering. Det ger ett sätt att formatera utan att kladdra upp det som skrivs. Nu kommer det ögonblick du behöver göra en presentation baserat på dina anteckningar. Du behöver ett effektivt och enkelt sätt att skapa din presentation från dina anteckningar. I den här handledningen visar jag dig hur du skapar en html bildspel från markdown noter.

Markdown till HTML

Ett renderingsprogram är ett program som tar prissänkning och översätter den till ett annat format. Den bästa renderaren jag har använt är kramdown. Kramdown är ett Ruby-program som tar text i ett format och översätter det till ett annat. Det är standard för prissänkning till html.

Eftersom Rubin är förinstallerad på alla Mac-datorer, installeras kramdown är lätt. För att installera kramdown, öppna a Terminal och skriv:

sudo gem installation kramdown

När det är installerat, kramdown kommandot är användbart. Lägg till följande exempel prissänkning in till en fil som heter test.md:

# Det här är en rubrik - Bullet item - Another bullet item Bara lite text.

På kommandoraden skriver du:

kramdown test.md> test.html

Det kommer nu att bli en test.html filen med detta innehåll:

Detta är en rubrik

Bullet item
En annan punktpunkt

Bara lite text.

De kramdown programmet översätter bara prissänkning giltig html. Det försöker inte skapa en fullständig sida med korrekt formaterad html med huvud- och kroppssektioner. Detta är viktigt för att skapa en bildspel från prissänkning. För varje bild, html för det angivna innehållet kommer att genereras och inte något extra. Det är lätt att linda in glidarna i huvudet html för bildspelssidan.

Grunderna för en HTML-bildspel

Bildspelssidan har en början html, objektglasen html, och slutet html. Start- och slutsektionerna kopieras in, medan bilderna släpper html får genereras av kramdown med lite extra rengöringsarbete.

Skapa en fil som heter presbegin.html med den här koden:

   Bildspel

Detta är början på bildspelet. Det är inte komplett html sida. Kroppen av html har en tre divs: behållare div, section0 div och a glida div. De behållare div innehåller hela bildspelet.

Inne i behållaren är section0 div och det är glida div. Sektionerna hjälper till att formatera allt i varje bildsektion, medan den enskilda bilden innehåller formatering för den bildrutan.

Slutet kommer att likna. Skapa en fil som heter presend.html och ange följande kod:

Inte mycket! Det stänger ut den sista bildens divs och kropp och html taggar.

Den enda speciella formatering som behövs i markdown noterna är för alla bilder och för att specificera slutet på varje bild. Eftersom prissänkning har en ankertyp för bilder, den taggen används med en skillnad: istället för att ha en textbeskrivning för bilden kommer det att beskrivas vilka klasser som ska bifogas bilden. Även prissänkning kod för horisontella regler används för att separera diabilder.

Därför är grundformeln för att skapa bildspelet: kopiera presbegin.html, generera html från markdownen, översätt alla

taggar till

, fixa alla bildtaggar för att använda undertexten som klasser och kopiera presend.html.

Skapa en ny fil som heter pres.rb och placera den här koden:

#! / usr / bin / ruby # # Ange några variabler. # kräver ("FileUtils") $ presDir = "" pressBaseDir = File.dirname (__ FILE__) theme = ARGV [1] # # Hämta bildpresentationsdelarna. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Hämta katalogen i presentationen. # $ presDir = File.dirname (ARGV [0]) # # Konvertera Markdown till HTML. # presTextHTML = 'cat' # ARGV [0] '| kramdown '# # Konvertera de horisontella reglerna till de divs vi behöver. # $ divCount = 1 medan presTextHTML.sub! (/ \
/, "

")! = nil do $ divCount = $ divCount + 1 slut $ divCount = $ divCount -1 # # Se till att den sista diven stängs. # presTextHTML + ="

"; # # Fixera alla bilder som ska vara på egen hand efter bildskärmen div. # M = / \\\<\/p\>/ match(presTextHTML) om m! = nil postMatch = "" presTextHTML = "" medan m! = nil presTextHTML + = m.pre_match presTextHTML + = "

Detta Rubin kod utför de åtgärder som beskrivs. Programfilen måste göras körbar med:

chmod a + x pres.rb

Programmet används med följande kommandorad:

pres.rb

Denna kod förutsätter att presentationen inte finns i samma katalog som koden. Därför, var du än har koden, se till att du lägger till den på din väg.

Formatering med CSS

Med översättnings översättningen av prissänkning fil till html gjort, nästa steg är att formatera bilderna. För att skapa de stilar som behövs lägger du till den här koden i rubrikens avsnitt presbegin.html fil:

Den första delen är ett återställningsskript med MeyerWeb Reset. När du arbetar med html och CSS, ett återställningsskript bör användas för att placera varje webbläsare på samma spelfält. Det här är bra designpraxis.

Den andra delen är de stilar som behövs för att få bilderna att ta upp skärmen, texten som ska centreras, grundläggande beställning och formatering för bilderna och den grundläggande inställningen för en bakgrundsbild.

Jag har ställt in skärmstorleken till 1200x640 pixlar som fungerar bra på min Macbook Air 11 "-skärm. Du kan ändra den till det som fungerar bäst för dig.

Skapa nu en temafil. Gör en fil som heter Basic.css och ange följande kod:

/ * * Kommer vara CSS-filen för Basic Theme * / body bakgrundsfärg: rgba (79, 150, 200, 0.4);  .slide color: rgb (221, 239, 252); bakgrundsfärg: 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 opacitet: .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: decimal-leading-zero; text-align: left;  .slide ol li font-size: 2em;  .slide ul listestil: skiva; text-align: left;  .slide ul li font-size: 2em;

Detta är ett grundläggande tema som du kan använda för att skapa egna teman. Denna temafil kommer att kopieras till presentationsmappen och bytas till theme.css. Det är filen som laddas av bildspelet.

För att lägga till extra styling till bilder, skapa en klassmärkning i temas css-fil. Lägg till den här klassens tagg till texten för bilden. Därför ser en bild med bakgrunds taggen ut:

![Bakgrund] (bild-01.jpg)

Lägg till Javascript

För snabbast laddning av en webbsida, JavaScripts borde vara längst ner på sidan. Därför, i presend.html, lägg till den här koden precis före stängningen kropp märka:

Denna kod laddas in Musfälla för att styra bildspelet och jQuery för att utföra övergångarna. Två globala variabler används för att styra bildspelet: slideNum och varaktighet. De slideNum är numret för den aktuella bilden och varaktighet definierar förändringshastigheten. Ju lägre varaktigheten desto snabbare ändras glidarna.

Tre funktioner definieras därefter: nextSlide (), prevSlide (), och beginSlide (). Dessa funktioner gör det möjligt för användaren att gå till nästa bild, föregående bild och tillbaka till den första bilden.

Efter funktionerna använde jag en krok till jQuery redo funktion som behandlar kod efter att allt är laddat i webbläsaren. När allt är laddat är alla bilder dolda och bara den första bilden synlig. Sedan vänster pil nyckeln är bunden till prevSlide () funktion, höger piltangent är bunden till nextSlide () funktion och b nyckeln är bunden till beginSlide () fungera.

I koden märker du window.MaxSlideNum global variabel. De rubin kod för att skapa bilderna sätter denna variabel inuti html genereras för bildpresentationen. Det beskriver kontrollfunktionerna hur många bilder som finns i den här presentationen.

Andra sätt att använda skriptet

Medan kommandoradsprogrammet är genomförbart är det inte bekvämt. Handledningen, Skriva Dropzone 3 Åtgärder, visar hur man skapar en Dropzone 3 verkan. Följ den handledningen för att skapa en ny Dropzone 3 åtgärd med följande kod:

# Dropzone Action Info # Name: MD till HTML Presentation Converter # Beskrivning: Tar en markdown-fil och konverterar den till en HTML / CSS-presentation i filkatalogen. Det förutsätter att du har installerat kramdown lokalt. För att installera, gå till en kommandorad och skriv "sudo gem install kramdown". # Handtag: Filer # Skapare: Richard Guay # URL: http://customct.com # Händelser: Clicked, Dragged # KeyModifiers: Kommando, Alternativ, Kontroll, Skift # SkipConfig: Nej # RunsSandboxed: Ja # Version: 1.0 # MinDropzoneVersion: 3.0 # # Funktion: dras # # Beskrivning: Den här funktionen kallas med Dropzone har filer tappat bort på den här åtgärden. # Det behandlade sedan varje given fil som en markdown-presentation. # def dragg # # Ange några variabler. # $ presDir = "" pressBaseDir = File.expand_path (".") presNum = $ items.count theme = defined? (ENV ['tema'])? ENV ['tema']: "Basic" # # Tipsa Dropzone vi börjar. # $ dz.begin ("Konvertera # presNum Presentationer ...") $ dz.determinate (true) # # Hämta bildpresentationsdelarna. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Index över alla givna presentationer. # för index i 0 ... presNum # # Hämta katalogen av presentationen. # $ presDir = File.dirname ($ items [index]) # # Konvertera Markdown till HTML. # presTextHTML = 'cat' # $ items [index] '| kramdown '# # Konvertera de horisontella reglerna till de divs vi behöver. # $ divCount = 1 medan presTextHTML.sub! (/ \
/, "

")! = nil do $ divCount = $ divCount + 1 slut $ divCount = $ divCount -1 # # Se till att den sista diven stängs. # presTextHTML + ="

"postMatch = m.post_match m = / \\\<\/p\>/.match(m.post_match) end presTextHTML + = postMatch end presTextHTML + = ""# # Skriv HTML-filen till en index.html-fil i den katalogen. # Target = open (" # $ presDir /index.html "," w ") target.truncate (0) target.write (presBegin + presTextHTML + presEnd) target.close # # Kopiera CSS-filen till den katalogen och byt namn på den till theme.css. # FileUtils.cp ("# pressBaseDir / # theme .css", $ presDir) File.rename (" # $ presDir / # theme .css "," # $ presDir /theme.css ") # # Berätta Dropzone vilken procentandel är gjord. # $ dz.percent ((((index + 1) * 100 # / dz.finish ("Alla presentationer gjorda.") # Du borde alltid ringa $ dz.url eller $ dz.text sist i ditt skript. under $ dz.text line lägger text på klippbordet. # Om du inte vill placera något på klippbordet borde du fortfarande ringa $ dz.url (false) $ dz.url ("file: // # $ presDir #index = "standard-dropdown - title" "Komprimera filer: grafisk Formatera \ "--text \" Vilken tema? \ "- ms "themlist = [] i = 0 Dir.glob (" *. css ") | filnamn | filename = File.basename (filnamn, ". css") qstr + = "\" # filnamn \ "" themlist [i] = filnamn i + = 1 button2, index = $ dz.cocoa_dialog (qstr) .split ("\ n") index = index.to_i theme = themlist [index] # # Ställ in det valda temat. # $ dz.save_value ("tema", tema) # # Berätta för användaren vad de valde. # $ dz.finish ("Du har valt" # tema "för ditt tema.") $ dz.url (falskt) slut

När du har skapat, ladda in åtgärden till Dropzone 3. När en prissänkning filen släpps på zonen, det kommer att skapa presentationen i samma katalog.

Dropzone 3 Action

Eftersom Dropzone 3 är bra för att släppa många saker på det, du kan göra många presentationer på en gång. Samla bara in filerna i Drop Bar. Flytta sedan dem till dropzone för konvertering. Genom att klicka på åtgärden kan du välja vilket tema som ska användas. Den färdiga Dropzone 3 åtgärd ingår i nedladdningen.

Markdown till Presentation Alfred Workflow

Detta kan också göras till en Alfred Workflow. Det färdiga arbetsflödet ingår i nedladdningen. De MDS: theme Kommandot låter dig välja det tema som ska användas. De mds: showtheme Visar namnet på de aktuella inställningarna i en anmälan. Du kan använda Alfred Browser för att visa en markdown-fil. När du träffar höger pil På filen kan du välja Markdown till bilder kommandot för att skapa presentationen.

Deckset gör allt

Om du tycker att det här programmet är användbart kan du kolla in det Deckset.

Deckset Markdown till Presentation

Deckset tar a prissänkning fil och konverterar den till en bildspel. Den har mer funktionalitet än den som presenteras i denna handledning. Det har också många bra teman att använda.

Slutsats

Med tiden är det alltid på premium, det är bra att använda noter som grund för en presentation. Nu när du har verktygen i dina händer, gör och gör några bra presentationer. Koden är väldigt grundläggande och det finns gott om utrymme för förbättringar. Om du har ändringar eller nya teman för denna kod, skicka dem vidare.

Datorfärdigheter