Hvernig nota á Markdown í vefþróun

Efni.

• 01. Veldu Markdown ritstjóra
• 02. Settu upp fyrirsagnir
• 03. Merktu upp málsgreinar
• 04. Stílaðu línuna
• 05. Merkja áherslur
• 06. Búðu til láréttar reglur
• 07. Bættu við myndum og krækjum
• 08. Gerðu lista
• 09. Bættu við inline kóða og kóða blokkum
• 10. Stíllaðu upp tilvitnanir
• 11. Fella innfellda HTML

Sem vefhönnuðir og efnishöfundar eyðum við yfirleitt miklum tíma í að skrifa texta sem er vafinn inn í HTML kóða. Hvað ef við segðum þér að það sé betri leið til að gera það með Markdown? Leið sem þú gast einbeitt þér að skrifunum en ekki kóðanum?

Markdown er léttur texti, léttur álagstungumál þróað árið 2004 af John Gruber og Aaron Swartz. Upphaflega stofnað til að gera XHTML / HTML auðveldara með því að umbreyta látlausum textaskrám í skipulagsgildan HTML eða XHTML, er hægt að nota Markdown í næstum hvaða gerð sem er: handrit, námskeið, minnispunkta, efni á vefnum og fleira.

Þótt tiltölulega einfalt geti Markdown verið svolítið ógnvekjandi þegar þú byrjar fyrst. En þegar þú hefur náð tökum á því áttarðu þig fljótt á því hve miklum tíma var varið í að forsníða kóðann þinn í stað þess að slá inn efni.

01. Veldu Markdown ritstjóra

Þegar þú ert að vinna með Markdown fyrir vefinn er mikilvægt að skilja helstu setningafræði og takmarkanir sem þú gætir lent í. Áður en þú byrjar þarftu einhvers konar ritstjóra og túlk fyrir síðuna þína. Til skiptis geturðu umbreytt Markdown áður en þú birtir hann.

Þú getur valið nokkra ritstjóra. Byword er æðislegt vegna þess að það býður upp á fjölbreytt úrval útflutningsvalkosta, þar á meðal HTML og PDF. Annar frábær valkostur er StackEdit - ókeypis Markdown ritstjóri á netinu.Auðvitað mun hvaða venjulegur textaritill sem er vinna.

Ef þú ætlar ekki að breyta Markdown í HTML geturðu fengið viðbót (eða truflara) fyrir vefsvæðið þitt. Fyrir WordPress hefur Jetpack framúrskarandi stuðning við Markdown, sem gerir þér kleift að nota Markdown beint í færslum og athugasemdum - svo framarlega sem þú virkjar þann möguleika.

Eins og hvert álagstungumál hefur Markdown sína eigin setningafræði. Athugið: Það er fjöldi mismunandi bragðtegunda eða afbrigða af Markdown. Í þessari grein munum við aðeins fjalla um sameiginlega setningafræði.

02. Settu upp fyrirsagnir

Í HTML eru sex fyrirsagnastílar: h1, h2, h3, h4, h5 og h6. Til að endurskapa þetta í Markdown skaltu nota röð hashtag tákna (#) - sem samsvarar fyrirsagnarnúmerinu - á eftir fyrirsagnartextanum. Til dæmis að búa til h1> tag, notaðu eitt kassamerki #; fyrir an h2> tag, notaðu tvö kassamerki ##; og svo framvegis og svo framvegis.

Markdown inntak:

# Fyrirsögn 1 ## Fyrirsögn 2 ### Fyrirsögn 3 #### Fyrirsögn 4 ##### Fyrirsögn 5 ###### Fyrirsögn 6

HTML framleiðsla:

h1> Fyrirsögn 1 / h1> h2> Fyrirsögn 2 / h2> h3> Fyrirsögn 3 / h3> h4> Fyrirsögn 4 / h4> h5> Fyrirsögn 5 / h5> h6> Fyrirsögn 6 / h6>

03. Merktu upp málsgreinar

Málsgreinar eru táknaðar með p> tag í HTML. Í Markdown eru þau aðskilin með einni eða fleiri auðum línum. Eins og HTML er hvítt svæði hunsað. Þannig að ef þú bætir við 20 auðum línum, þá ertu samt bara með eina málsgrein.

Markdown inntak:

Skyndi brúni refurinn hoppar yfir lata hundinn. Leti hundinum er alveg sama, því hann er letihundur.

HTML framleiðsla:

p> Hinn skjóti brúni refur hoppar yfir leti hundinn. / p> p> Leti hundinum er alveg sama, því hann er latur hundur. / p>

04. Stílaðu línuna

Línuskil, sem eru táknuð í HTML með br> merki, er bætt við með einni línubreytingu, með tveimur bilum í lok fyrri línu.

Markdown inntak:

Hraði brúni refurinn hoppar yfir lata hundinn.

HTML framleiðsla:

p> Fljótur brúni foxbr> hoppar yfir lata hundinn. / p>

05. Merkja áherslur

Það eru tvær leiðir til að auka áherslu á textann þinn: Skáletrað (em> í HTML) eða feitletrað (sterkur> í HTML).

Í Markdown nærðu þessu með einu eða tveimur stjörnumerkjum (*). Þú getur líka notað undirstrikanir (_), en ég held mig við stjörnumerki, því það eru aðrir bragðtegundir af Markdown sem nota undirstrikanir fyrir aðra hluti.

Markdown inntak:

* Skáletrað texti * * * feitletraður texti * *

HTML framleiðsla:

em> Skáletrað texti / em> sterkt> feitletrað texti / sterkt>

Athugið: Þú getur líka búið til feitletraðan skáletraðan texta með þremur stjörnum: * * * Feitletrað og skáletrað texti * * *.

06. Búðu til láréttar reglur

Til að búa til lárétta reglu (eða hr> í HTML), notaðu röð af þremur eða fleiri bandstrikum (---), stjörnur (***) eða jafnmerki (===). Það er þitt val hver þú vilt, en vertu viss um að láta tóma línu fylgja fyrir ofan og neðan.

Markdown inntak:

Að læra eitthvað nýtt er alltaf mjög skemmtilegt. --- Það er vissulega!

HTML framleiðsla:

p> Að læra eitthvað nýtt er alltaf mjög skemmtilegt. / p> hr> p> Það er vissulega! / p>

07. Bættu við myndum og krækjum

Í HTML er mynd bætt við með því að nota img> tag og krækjum er bætt við með því að nota a> tag.

Í Markdown byrja myndir með upphrópunarmerki (!), eftir sviga ()[]) fyrir 'alt texta' og sviga (()) fyrir leiðina að myndinni. Þú getur einnig látið valfrjálsan titil fylgja tvöföldum tilvitnunum (’’).

Með tenglum er það næstum það sama, nema það er engin upphrópunarmerki.

Markdown inntak:

! [Alt Text] (/ path / to / image.webp "Valfrjáls titill") [Link Text] (http://example.com "Valfrjáls titill")

Athugið: Þú getur líka notað tilvísunartengla og myndir, en það er ekki fjallað hér.

HTML framleiðsla:

img src = "/ path / to / image.webp" alt = "Alt Text" title = "Valfrjáls titill" /> a href = "http://example.com" title = "Valfrjáls titill"> Krækjutexti / a >

08. Gerðu lista

Það eru tvær tegundir af listum í HTML: pantað (ol>) og óraðað (ul>). Notaðu númer fyrir pantaða lista og stjörnumerki með Markdown (*) eða bandstrik (-) fyrir óskipulagða lista.

Markdown inntak:

1. Liður 1 2. Liður 2 * Fyrsti liður * Annar liður - Fyrsti liður - Annar liður

HTML framleiðsla:

ol> li> Item 1 / li> li> Item 2 / li> / ol> ul> li> First Item / li> li> Second Item / li> / ul> ul> li> First Item / li> li> Second Liður / li> / ul>

09. Bættu við inline kóða og kóða blokkum

Þegar þú ert að vinna með kóða í HTML geturðu annað hvort látið hann fylgja sem innbyggðan þátt með því að nota kóða> merkimiðar; eða sem fyrirfram sniðinn textablokkur með því að nota pre> kóða> samsetning.

Í Markdown eru þessir þættir afmarkaðir með því að nota annað hvort eitt bakslag á hvorri hlið (`); eða með því að nota afgirtan stíl, sem inniheldur þrjú bakslag fyrir ofan og neðan kóðablokk (```).

Markdown inntak:

Breytan „numberOfPoints“ geymir stig leikmannsins. ef player.wins {numberOfPoints + = 1}

HTML framleiðsla:

Kóðinn> numberOfPoints / code> breytan heldur skori spilarans. pre> code> ef player.wins {numberOfPoints + = 1} / pre> / code>

10. Stíllaðu upp tilvitnanir

Blockquotes er bætt við HTML með því að nota blockquote> tag. Notaðu stærri en táknið í Markdown (>) fyrir línuna.

Markdown inntak:

> Þetta er stórtilvitnunin mín. >> Þetta er hluti af sömu blokkarvitnuninni. > Þetta er ný blockquote.

HTML framleiðsla:

blockquote> p> Þetta er blockquote mín. / p> br> p> Þetta er hluti af sömu blockquote. / p> / blockquote> blockquote> p> Þetta er ný blockquote. / p> / blockquote>

11. Fella innfellda HTML

Það eru tímar þegar þú þarft að búa til HTML þátt sem er ekki studdur; til dæmis gætir þú þurft a borð> eða div> tag.

Ef það er raunin geturðu blandað saman Markdown og HTML, en það eru nokkrar takmarkanir. Til dæmis er ekki hægt að fela Markdown innan HTML merkja.