Slik lager du en presentasjonspresentasjon fra Markdown Notes

Markdown tekstformatering har revolusjonert notatopptak. Det gir en måte å formatere uten å rote opp hva som skrives. Nå kommer det øyeblikk du trenger å lage en presentasjon basert på notatene dine. Du trenger en effektiv og enkel måte å lage presentasjonen fra notatene dine. I denne veiledningen vil jeg vise deg hvordan du lager en HTML lysbildeserie fra markdown notater.

Markdown til HTML

Et gjengivelsesprogram er et program som tar Markdown og oversetter den til et annet format. Den beste rendereren jeg har brukt er kramdown. Kramdown er et Ruby-program som tar tekst i ett format og oversetter det til et annet. Det er som standard Markdown til HTML.

Siden Rubin er forhåndsinstallert på alle Mac-maskiner, installeres kramdown det er lett. For å installere kramdown, åpne a Terminal og skriv inn:

sudo perle installasjon kramdown

Når installert, er det kramdown kommandoen er brukbar. Som et eksempel, legg følgende Markdown inn i en fil som heter test.md:

# Dette er en header - Bullet item - Another bullet item Bare litt tekst.

På kommandolinjen skriver du:

kramdown test.md> test.html

Det blir nå en test.html fil med dette innholdet:

Dette er en header

Bullet element
Et annet punktpunkt

Bare litt tekst.

De kramdown programmet oversetter bare programmet Markdown gitt til gyldig HTML. Det prøver ikke å lage en fullstendig side med riktig formatert HTML med en overskrift og kroppsdeler. Dette er viktig for å lage et lysbildefremvisning fra Markdown. For hvert lysbilde, HTML for det gitte innholdet vil bli generert og ikke noe ekstra. Det er lett å pakke lysbildene inn i hoveddelen HTML for lysbildefremvisningssiden.

Grunnleggende om en HTML-lysbildefremvisning

Slideshow siden har en begynnelse HTML, lysbildene HTML, og slutten HTML. Begynnings- og slutteksjonene kopieres inn, mens lysbildene HTML blir generert av kramdown med litt ekstra opprydding arbeid.

Opprett en fil som heter presbegin.html med denne koden:

   Lysbildefremvisning

Dette er begynnelsen på lysbildefremvisningen. Det er ikke komplett HTML side. Kroppen til HTML har en tre divs: container div, section0 div og a lysbilde div. De container div inneholder hele lysbildefremvisningen.

Innsiden av beholderen er section0 div og det er lysbilde div. Delene hjelper til med å formatere alt i hvert lysbilde, mens det enkelte lysbildet inneholder formatering for den lysbilden.

Endingen vil være lik. Opprett en fil som heter presend.html og legg inn følgende kode:

Ikke mye! Det lukker ut de siste lysbildens divs og kropp og html tags.

Den eneste spesielle formatering som trengs i markeringsnotatene, er for noen bilder og for detaljering av slutten av hvert lysbilde. Siden Markdown har en ankertype for bilder, den taggen brukes med en forskjell: i stedet for å ha en tekstbeskrivelse for bildet, vil området beskrive klassene som skal festes til bildet. Også, den Markdown kode for horisontale regler brukes til å skille lysbilder.

Derfor er grunnformelen for å lage lysbildefremvisningen: Kopier presbegin.html, generere HTML fra markdownen, oversett alle

tags til

, fikse alle bilde koder for å bruke underteksten som klasser, og kopier presend.html.

Opprett en ny fil som heter pres.rb og plasser denne koden:

#! / usr / bin / ruby # # Sett noen variabler. # required ("FileUtils") $ presDir = "" pressBaseDir = File.dirname (__ FILE__) tema = ARGV [1] # # Hent lysbildespresentasjonsdelene lastet. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Hent katalogen av presentasjonen. # $ presDir = File.dirname (ARGV [0]) # # Konverter Markdown til HTML. # presTextHTML = 'cat' # ARGV [0] '| kramdown '# # Konverter de horisontale reglene til divene vi trenger. # $ divCount = 1 mens presTextHTML.sub! (/ \
/, "

")! = null $ divCount = $ divCount + 1 ende $ divCount = $ divCount -1 # # Pass på at den siste diven blir stengt. # presTextHTML + ="

"; # # Fiks alle bildene til å være på sin egen etter lysbildet div. # M = / \\\<\/p\>/ match(presTextHTML) hvis m! = null postMatch = "" presTextHTML = "" mens m! = null presTextHTML + = m.pre_match presTextHTML + = "

Dette Rubin kode utfører handlingene som beskrevet. Programfilen må gjøres kjørbar med:

chmod a + x pres.rb

Programmet brukes med følgende kommandolinje:

pres.rb

Denne koden forutsetter at presentasjonen ikke er i samme katalog som koden. Derfor, uansett hvor du har koden, må du sørge for at du legger den til på banen.

Formatering med CSS

Med bulkoversettelsen av Markdown fil til HTML ferdig, neste trinn er å formatere lysbildene. For å opprette stilene som trengs, legg til denne koden i overskriftsdelen av presbegin.html fil:

Den første delen er et tilbakestillingsskript ved hjelp av MeyerWeb Reset. Når du jobber med HTML og CSS, et tilbakestillingsskript skal brukes til å sette alle nettlesere på samme spillerom. Dette er god design praksis.

Den andre delen er stilene som trengs for å få lysbildene til å ta opp skjermen, teksten som skal sentrere, grunnleggende bestilling og formatering for bildene, og det grunnleggende oppsettet for et bakgrunnsbilde.

Jeg har satt skjermstørrelsen til 1200x640 piksler som fungerer bra på Macbook Air 11-skjermen. Du kan endre det til det som passer best for deg.

Lag nå en temafil. Lag en fil som heter Basic.css og legg inn følgende kode:

/ * * Vil være CSS-filen for Basic Theme * / body bakgrunnsfargen: rgba (79, 150, 200, 0.4);  .slide color: rgb (221, 239, 252); bakgrunnsfarge: 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 opacity: .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 listestil: desimal-ledende-null; tekstjustering: venstre;  .slide ol li font-size: 2em;  .slide ul listestil: plate; tekstjustering: venstre;  .slide ul li font-size: 2em;

Dette er et grunnleggende tema som du kan bruke til å lage dine egne temaer. Denne temafilen blir kopiert til presentasjonskatalogen og omdøpt til theme.css. Det er filen lastet av lysbildefremvisningen.

For å legge til ekstra styling til bilder, opprett en klassemarkering i temaets css-fil. Legg den klassen til teksten til bildet. Derfor ser et bilde med bakgrunnsmerket ut som:

![Bakgrunns] (image-01.jpg)

Legg til Javascript

For raskest lasting av en nettside, vil Javascripts bør være nederst på siden. Derfor, i presend.html, legg til denne koden like før avslutningen kropp stikkord:

Denne koden laster inn Mousetrap for å kontrollere lysbildefremvisningen og jQuery å utføre overgangene. To globale variabler brukes til å kontrollere lysbildefremvisningen: slideNum og varighet. De slideNum er nummeret for gjeldende lysbilde, og varighet definerer hastigheten på endringen. Jo lavere varighet, jo raskere blir lysbildene endret.

Tre funksjoner er definert neste: nextSlide (), prevSlide (), og beginSlide (). Disse funksjonene tillater brukeren å gå til neste lysbilde, forrige lysbilde og tilbake til henholdsvis første lysbilde.

Etter funksjonene brukte jeg en krok til jQuery klar funksjon som behandler kode etter at alt er lastet inn i nettleseren. Når alt er lastet, er alle lysbilder skjult, og bare det første lysbildet ble synliggjort. Og så venstre pil nøkkelen er bundet til prevSlide () funksjon, den høyre piltast er bundet til nextSlide () funksjon, og b nøkkelen er bundet til beginSlide () funksjon.

I koden vil du legge merke til window.MaxSlideNum global variabel. De rubin kode for å lage lysbildene setter denne variabelen inne i HTML generert for lysbildespresentasjonen. Det forteller kontrollfunksjonene hvor mange lysbilder er i denne presentasjonen.

Andre måter å bruke skriptet på

Mens du bruker kommandolinjeprogrammet, er det mulig, det er ikke praktisk. Opplæringen, Skrive Dropzone 3 Handlinger, viser hvordan du lager en Dropzone 3 handling. Følg den veiledningen for å lage en ny Dropzone 3 handling med følgende kode:

# Dropzone Action Info # Navn: MD til HTML Presentation Converter # Beskrivelse: Tar en markdown-fil og konverterer den til en HTML / CSS-presentasjon i filkatalogen. Det forutsetter at du har installert kramdown lokalt. For å installere, gå til en kommandolinje og skriv "sudo gem install kramdown". # Håndtak: Filer # Skaper: Richard Guay # URL: http://customct.com # Hendelser: Klikk, Draget # KeyModifiers: Kommando, Alternativ, Kontroll, Skift # SkipConfig: Nei # RunsSandboxed: Yes # Version: 1.0 # MinDropzoneVersion: 3.0 # # Funksjon: dratt # # Beskrivelse: Denne funksjonen kalles med Dropzone har filer falt på denne handlingen. # Den behandlet deretter hver gitt fil som en markdown-presentasjon. # def dratt # # Sett noen variabler. # $ presDir = "" pressBaseDir = File.expand_path (".") presNum = $ items.count theme = definert? (ENV ['tema'])? ENV ['tema']: "Grunnleggende" # # Fortell Dropzone vi starter. # $ dz.begin ("Konvertering # presNum Presentasjoner ...") $ dz.determinate (true) # # Hent lysbildespresentasjonsdelene lastet. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Indeks over alle de gitte presentasjonene. # for indeks i 0 ... presNum # # Hent katalogen av presentasjonen. # $ presDir = File.dirname ($ items [index]) # # Konverter Markdown til HTML. # presTextHTML = 'cat' # $ items [index] '| kramdown '# # Konverter de horisontale reglene til divene vi trenger. # $ divCount = 1 mens presTextHTML.sub! (/ \
/, "

")! = null $ divCount = $ divCount + 1 ende $ divCount = $ divCount -1 # # Pass på at den siste diven blir stengt. # presTextHTML + ="

"postMatch = m.post_match m = / \\\<\/p\>/.match(m.post_match) end presTextHTML + = postMatch end presTextHTML + = ""# # Skriv HTML-en til en index.html-fil i den katalogen. # Target = open (" # $ presDir /index.html "," w ") target.truncate (0) target.write (presBegin + presTextHTML + presEnd) target.close # # Kopier CSS-filen til katalogen og omdøpe den til theme.css. # FileUtils.cp ("# pressBaseDir / # theme .css", $ presDir) File.rename (" # $ presDir / # theme .css "," # $ presDir /theme.css ") # # Fortell Dropzone hvilken prosentandel er gjort. # $ dz.percent ((((index + 1) * 100 ) / presNum) .to_i) slutt # # Fortell Dropzone at vi er ferdige. # $ dz.finish ("All Presentations Made.") # Du bør alltid ringe $ dz.url eller $ dz.text sist i skriptet. under $ dz.text line plasserer tekst på utklippstavlen. # Hvis du ikke vil plassere noe på utklippstavlen, bør du fortsatt ringe $ dz.url (false) $ dz.url ("file: // # $ presDir / index.html ") end def klikkt # # Tillat brukeren å velge et tema. # tema =" Grunnleggende "# # Vis en liste over temaer. # qstr =" standard-dropdown --title \ "Komprimer filer: Grafisk Format \ "--text \" Hvilket tema? \ "--Ite ms "themlist = [] i = 0 Dir.glob (" *. css ") | filnavn | filnavn = File.basename (filnavn, ". css") qstr + = "\" # filnavn \ "" themlist [i] = filnavn i + = 1 button2, index = $ dz.cocoa_dialog (qstr) .split ("\ n") index = index.to_i theme = themlist [index] # # Sett det valgte temaet. # $ dz.save_value ("tema", tema) # # Fortell brukeren hva de valgte. # $ dz.finish ("Du valgte '# tema' for ditt tema.") $ dz.url (falsk) slutt

Når du er opprettet, laster du handlingen inn i Dropzone 3. Når en Markdown filen blir tapt på sonen, den vil opprette presentasjonen i samme katalog.

Dropzone 3 Action

Siden Dropzone 3 Det er flott å slippe mange ting på det, du kan ha mange presentasjoner på en gang. Bare samle filene i Drop Bar. Flytt dem deretter til dropzone for konvertering. Ved å klikke på handlingen kan du velge hvilket tema du vil bruke. Den ferdige Dropzone 3 Handlingen er inkludert i nedlastingen.

Markdown til presentasjon Alfred Workflow

Dette kan også gjøres til en Alfred Workflow. Den fullførte arbeidsflyten er inkludert i nedlastingen. De mds: tema kommandoen lar deg velge temaet som skal brukes. De mds: showtheme vil vise navnet på de for øyeblikket sette dem i et varsel. Du kan bruke Alfred Browser for å vise en markdown-fil. Når du treffer høyre pil På filen kan du velge Markdown til lysbilder kommandoen for å lage presentasjonen.

Deckset gjør alt

Hvis du finner dette programmet nyttig, vil du kanskje sjekke ut Deckset.

Deckset Markdown til Presentasjon

Deckset tar a Markdown filen og konverterer den til et lysbildefremvisning. Den har mer funksjonalitet enn presentert i denne opplæringen. Det har også mange flotte temaer å bruke.

Konklusjon

Med tiden som alltid være på en premie, er det flott å benytte notater som grunnlag for en presentasjon. Nå som du har verktøyene i hendene, kan du gå og lage noen flotte presentasjoner. Denne koden er veldig enkel og det er god plass til forbedringer. Hvis du har endringer eller nye temaer for denne koden, vennligst send dem videre.

Dataferdigheter