Cum se creează o prezentare de prezentare din marcaj

Markdown formatarea textului a revoluționat notarea. Oferă o modalitate de a formata fără să se amestece ceea ce este scris. Acum vine momentul în care trebuie să faceți o prezentare pe baza notelor dvs. Aveți nevoie de o modalitate eficientă și ușoară de a vă crea prezentarea din notele dvs. În acest tutorial, vă voi arăta cum să creați un HTML prezentare de diapozitive din notele de marcare.

Markdown pentru HTML

Un program de randare este un program care ia markdown și o traduce într-un alt format. Cel mai bun randator pe care l-am folosit este kramdown. Kramdown este un program Ruby care ia text într-un format și îl traduce în altul. Este implicit markdown la HTML.

De cand Rubin este preinstalat pe toate Mac-urile, instalându-se kramdown este usor. Pentru a instala kramdown, deschideți a Terminal și tip:

sudo gem instala kramdown

Odată instalat, kramdown comanda este utilizabilă. Ca exemplu, puneți următoarele markdown in la un fișier numit test.md:

# Acesta este un antet - element Bullet - Un alt element de glont Doar un text.

În linia de comandă, tastați:

kramdown test.md> test.html

Acum va fi a test.html fișier cu acest conținut:

Acesta este un antet

Elementul bullet
Un alt element al glontului

Doar un text.

kramdown program se traduce numai markdown dat valabil HTML. Nu încearcă să creeze o pagină completă formatată corect HTML cu secțiuni de antet și corp. Acest lucru este important pentru crearea unui slide show de la markdown. Pentru fiecare diapozitiv, HTML pentru conținutul dat va fi generat și nu nimic extra. Este ușor să înfășurați diapozitivele în interiorul principalului HTML pentru pagina de prezentare.

Noțiuni de bază pentru o prezentare HTML

Pagina de prezentare are un început HTML, diapozitivele HTML, și sfârșitul HTML. Secțiunile de început și de sfârșit se copiază, în timp ce diapozitivele HTML este generat de kramdown cu unele lucrări suplimentare de curățare.

Creați un fișier numit presbegin.html cu acest cod:

   Prezentare

Acesta este începutul spectacolului de diapozitive. Nu este complet HTML pagină. Corpul HTML are trei divs: recipient div, section0 div și a diapozitiv div. recipient div conține întregul spectacol de diapozitive.

În interiorul containerului este section0 div și este diapozitiv div. Secțiunile ajută la formarea totului în fiecare secțiune de diapozitive, în timp ce diapozitivul individual conține formatul pentru acel diapozitiv.

Sfârșitul va fi similar. Creați un fișier numit presend.html și plasați următorul cod:

Nu prea mult! Se închide ultimele diviziuni ale diapozitivului și corp și html Etichete.

Singura formatare specială necesară în notele de marcare este pentru orice imagine și pentru detalierea sfârșitului fiecărui slide. De cand markdown are un tip de ancoră pentru imagini, acea etichetă este utilizată cu o singură diferență: în loc de a avea o descriere a textului pentru imagine, acea zonă va descrie clasele care se vor atașa la imagine. De asemenea markdown cod pentru norme orizontale este folosit pentru a separa diapozitivele.

Prin urmare, formula de bază pentru crearea slide show-ului este: copiați presbegin.html, Genera HTML de la marcaj, traduceți toate

etichete pentru a

, reparați toate etichetele de imagine pentru a utiliza subtextul ca clase și copiați presend.html.

Creați un fișier nou numit pres.rb și plasați acest cod:

#! / usr / bin / ruby # # Setați unele variabile. # necesită ("FileUtils") $ presDir = "" pressBaseDir = File.dirname (__FILE__) theme = ARGV [1] # # # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Obțineți directorul prezentării. # $ presDir = Nume de fișier (ARGV [0]) # # Conversia Markdown în HTML. # presTextHTML = 'cat' # ARGV [0] ' kramdown "# # Conversia regulilor orizontale la divs de care avem nevoie. # $ divCount = 1 în timp ce presTextHTML.sub! (/ \
/, "

") = = nu face $ divCount = $ divCount + 1 sfârșitul $ divCount = $ divCount -1 # # Asigurați-vă că ultima div devine închisă # presTextHTML + ="

"# # Fixați toate imaginile care urmează să fie pe cont propriu după diapozitivul diapozitiv # m = / \\\<\/p\>/.match(presTextHTML) dacă m! = nil postMatch = "" presTextHTML = "" în timp ce m! = nil presTextHTML + = m.pre_match presTextHTML + = "

Acest Rubin codul efectuează acțiunile descrise mai jos. Fișierul programului trebuie să fie executat cu:

chmod a + x pres.rb

Programul este utilizat cu următoarea linie de comandă:

pres.rb

Acest cod presupune că prezentarea nu se află în același director ca și codul. Prin urmare, ori de câte ori aveți codul, asigurați-vă că îl adăugați pe calea ta.

Formatarea cu CSS

Cu traducerea în bloc a markdown fișier la HTML făcut, următorul pas este formatarea diapozitivelor. Pentru a crea stilurile necesare, adăugați acest cod în secțiunea antet a presbegin.html fişier:

Prima parte este un script de resetare utilizând MeyerWeb Reset. Ori de câte ori lucrați cu HTML și CSS, un script de resetare ar trebui să fie folosit pentru a pune fiecare browser în același câmp de joc. Aceasta este o practică bună de proiectare.

Cea de-a doua parte sunt stilurile necesare pentru a obține slide-urile pentru a prelua ecranul, textul care trebuie centrat, comanda și formatarea de bază pentru imagini și setarea de bază pentru o imagine de fundal.

Am setat dimensiunea ecranului la 1200x640 pixeli, care funcționează excelent pe ecranul meu Macbook Air 11 ". Puteți să îl modificați la ceea ce funcționează cel mai bine pentru dvs..

Acum, creați un fișier de temă. Faceți un fișier numit Basic.css și plasați următorul cod:

/ * * Va fi fișierul CSS pentru Tema de bază * / corp background-color: rgba (79, 150, 200, 0.4); . culoare culoare: rgb (221, 239, 252); fundal-culoare: rgba (79, 150, 200, 0,4); Sidul, S1, S1, S1, S1, S1, S1, S1, S1, S1, S1, S1, S1, S1, S1, S1,  .pagina opacitate: .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 stil-list: decimal-leading-zero; text-aliniere: stânga;  .slide ol li font-size: 2em;  .slide ul list-style: disc; text-aliniere: stânga;  .slide ul li font-size: 2m;

Aceasta este o temă de bază pe care o puteți utiliza pentru a crea propriile dvs. teme. Acest fișier temă va fi copiat în directorul de prezentare și va fi redenumit theme.css. Acesta este fișierul încărcat de prezentarea de diapozitive.

Pentru a adăuga un stil suplimentar la imagini, creați o etichetă de clasă în fișierul CSS al temei. Adăugați acea etichetă de clasă în textul pentru imagine. Prin urmare, o imagine cu eticheta de fundal ar arata ca:

![Background] (image-01.jpg)

Adăugați Javascript

Pentru încărcarea cea mai rapidă a unei pagini web, JavaScripts ar trebui să fie în partea de jos a paginii. Prin urmare, în presend.html, adăugați acest cod chiar înainte de închidere corp etichetă:

Acest cod se încarcă în Cursă de şoareci pentru a controla prezentarea de diapozitive și jQuery pentru a efectua tranzițiile. Două variabile globale sunt utilizate pentru a controla prezentarea de diapozitive: slideNum și durată. slideNum este numărul pentru diapozitivul curent și durată definește viteza schimbării. Cu cât durata este mai mică, cu atât mai rapid se schimbă diapozitivele.

Trei funcții sunt definite în continuare: nextSlide (), prevSlide (), și beginSlide (). Aceste funcții permit utilizatorului să meargă la următorul diapozitiv, diapozitivul anterior și, respectiv, înapoi la primul diapozitiv.

După funcții, am folosit un cârlig la jQuery gata care procesează codul după ce totul este încărcat în browser. Odată ce totul este încărcat, toate diapozitivele sunt ascunse și doar primul diapozitiv este vizibil. Apoi sageata stanga cheia este legată de prevSlide () funcția, tasta săgeată dreapta este obligat să nextSlide () funcție, și b cheia este legată de beginSlide () funcţie.

În cod, veți observa window.MaxSlideNum variabilă globală. rubin codul pentru crearea diapozitivelor stabilește această variabilă în interiorul HTML generate pentru prezentarea de diapozitive. Acesta afișează funcțiile de control care este numărul de diapozitive din această prezentare.

Alte modalități de utilizare a scriptului

În timpul utilizării programului de comandă este posibil, nu este convenabil. Tutorialul, Scrierea acțiunilor Dropzone 3, arată cum să creezi un Dropzone 3 acțiune. Urmați acel tutorial pentru a crea un nou Dropzone 3 acțiune cu următorul cod:

# Dropzone Acțiune Info # Nume: MD to HTML Presentation Converter # Descriere: Efectuează un fisier markdown și îl convertește într-o prezentare HTML / CSS din directorul de fișiere. Se presupune că ați instalat Kramdown local. Pentru a instala, mergeți la o linie de comandă și tastați "sudo gem install kramdown". # Handles: Fișiere # Creator: Richard Guay # URL: http://customct.com # Evenimente: Clicate, Dragged #Modificatori cheie: Comandă, Opțiune, Control, Shift #SchipConfig: No #RunsSandboxed: Yes #MonDropzoneVersion: 3.0 # # Funcție: tras # # Descriere: Această funcție este apelată cu Dropzone a lipit fișierele de pe această acțiune. # Apoi a procesat fiecare fișier dat ca o prezentare cu marcaj. # def dragged # # Setați unele variabile. # $ presDir = "" pressBaseDir = File.expand_path (".") presNum = $ items.count temă = definită? (ENV ['theme'])? ENV ['theme']: "Basic" # # Spuneți Dropzone începem. # $ dz.begin ("Conversia # presNum Prezentări ...") $ dz.determinate (true) # # Obțineți încărcarea pieselor de prezentare a diapozitivelor. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Index pe toate prezentările date. # pentru index în 0 ... presNum # # Obțineți directorul prezentării. # $ presDir = File.dirname ($ items [index]) # # Conversia Markdown în HTML. # presTextHTML = 'pisică' # $ items [index] '| kramdown "# # Conversia regulilor orizontale la divs de care avem nevoie. # $ divCount = 1 în timp ce presTextHTML.sub! (/ \
/, "

") = = nu face $ divCount = $ divCount + 1 sfârșitul $ divCount = $ divCount -1 # # Asigurați-vă că ultima div devine închisă # presTextHTML + ="

"postMatch = m.post_match m = / \\\<\/p\>/.match(m.post_match) sfârșitul presTextHTML + = sfârșitul postMatch presTextHTML + = ""# # Scrieți codul HTML într-un fișier index.html din acel director. # Target = open (" # $ presDir / index.html "," w ") target.truncate (0) target.write (presBegin + presTextHTML + presEnd) target.close # # Copiați fișierul CSS în acel director și redenumiți-l la theme.css # FileUtils.cp ("# pressBaseDir / # theme .css", $ presDir) File.rename (" # $ presDir / # theme .css "," # $ presDir /theme.css ") # # Spuneți Dropzone ce procentaj se face. ) / presNum) .to_i) sfarsitul # # Spuneti Dropzone ca am terminat. # $ dz.finish ("Toate prezentarile au fost create.") # Ar trebui sa stergi ultima data $ dz.url sau $ dz.text in scriptul tau. sub linia $ dz.text plasează textul în clipboard. Dacă nu doriți să plasați nimic în clipboard, trebuie să apelați în continuare $ dz.url (false) $ dz.url ("file: // # $ presDir #################################################################################################################### # Format \ "--text \" Ce temă? \ "--Itei ms "themlist = [] i = 0 Dir.glob (" * .css ") | nume fișier | fișier nume = fișier.basename (nume fișier, ".css") qstr + = "\" # nume fișier "" ("\ n") index = index.to_i theme = themlist [index] # # Setați tema selectată. # $ dz.save_value ("temă", temă) # # Spuneți utilizatorului ce au selectat. # $ dz.finish ("Ați selectat '# theme' pentru tema dvs.)) $ dz.url (false) end

Odată creat, încărcați acțiunea în Dropzone 3. Când un markdown fișierul este abandonat pe zonă, acesta va crea prezentarea în același director.

Acțiune Dropzone 3

De cand Dropzone 3 este minunat pentru a renunța la multe elemente de pe el, aveți posibilitatea de multe prezentări la un moment dat. Doar colectați fișierele în Drop Bar. Apoi mutați-le în zona de livrare pentru conversie. Dacă faceți clic pe acțiune, veți putea alege ce temă să utilizați. Completat Dropzone 3 acțiunea este inclusă în descărcare.

Markdown la prezentare Alfred Workflow

Acest lucru poate fi, de asemenea, făcut într-un Alfred Workflow. Fluxul de lucru completat este inclus în descărcare. mds: tema vă permite să selectați tema de utilizat. mds: showtheme va afișa numele celor care le-au setat în prezent într-o notificare. Puteți utiliza funcția Alfred Browser pentru a vedea un fișier de marcare. Când ai lovit sageata dreapta pe fișier, puteți selecta Markdown pentru diapozitive comanda pentru a crea prezentarea.

Deckset o face pe toate

Dacă găsiți acest program util, poate doriți să verificați Deckset.

Deckset Markdown la prezentare

Deckset ia a markdown fișier și îl convertește într-o expunere de diapozitive. Are mai multă funcționalitate decât cea prezentată în acest tutorial. De asemenea, are multe teme mari de folosit.

Concluzie

Cu timpul mereu pe o prime, este minunat să folosiți notele ca bază pentru o prezentare. Acum, că aveți instrumentele în mâinile dvs., mergeți și faceți o mare prezentare. Acest cod este foarte simplu și există mult spațiu pentru îmbunătățiri. Dacă aveți modificări sau teme noi pentru acest cod, vă rugăm să le transmiteți.

Competențe informatice