22/03/2017 AprendaMarkdown|Da2kBlog

Home
Cursos
RSS

EoLeocontinuaprecisandodens.Vamosajudar?
8deFevereirode2015

AprendaMarkdown

MarkdownumaferramentadeconversodetexttoHTML.Comelepossvelvocmarcarttulos,listas,tabelas,etc.,deformamuitomaislimpa,legvele
precisa,doquesefossefazercomHTML.
AindanosabetudooquepossvelfazercomMarkdown?Entoessepostpravoc!Vemcomigoqueeutemostro:)

OndeusarMarkdown
ExistemvrioslugaresquevocpodeusarMarkdown:NoGithubmesmo,vocpodeusarnoREADME.md,queumarquivoqueficanaraizdoseuprojeto,e
renderizadopeloGithubabaixodalistadearquivos.AqueletextoquevoclquandoacessaumrepositrioumarquivoREADME.md,escritoemMarkdown.

AindanoGithub,vocpodeusarMarkdownnotextodasissues,notextodeumpullrequestenawiki.

Tambmamaiorpartedosgeradoresdeestticos(Hexo,Jekyll,HarpJS,Docpad,etc.),permitemescreveremMarkdown!umatimaoportunidadepravocque
queriacomearoseublog,masestavacompreguiadeusarumCMSouficarfazendoHTMLnamoxD

PorqueeudevoaprendereusarMarkdown
PorqueHTMLmuitoverboso!Markdownmaislegvel,maisfcildelereinterpretar.

DevoparardeescreverHTMLparasitesefazertudoemMarkdown?
No!Markdownservebasicamenteparaescrevertextos.Comotodaferramenta,eletemalgumasdesvantagenscomrelaoescreveremHTML:

Vocnoconseguecolocaratributosnoselementos(class,id,title,etc.),almdospoucosqueelepermiteporpadro
Vocnotemmuitocontroleparafazeraninhamentodetags.

PorissoimportantefrisarqueousodoMarkdowndeveserespecificamenteparaaescritadetextos,artigosdeblog,etc.Noparasimplesmenteuslonolugar
doHTML!

ComoeucomeoaescreveremMarkdown
Sevocjtiverumparser,vocsprecisacriarumarquivocomumadessasextenses:mark,markdown,md,mdml,mdown,text,mdtext,mdtxt,mdwn,mkd,
mkdn.

Entreessas,amaisutilizadaamd.CrieumarquivocomumadessasextensesevocjestaraptoparacomearaescreveremMarkdown!

Agora,sevocnotiverumparser,podeusarumaferramentaonline.ExistemmuitasferramentasdeparsedeMarkdownparaHTML.Vourecomendarumapara
quevocpossaacompanharessepost,masbuscandoporMarkdownEditornoGoogle,vocvaiencontrarmuitasoutras!

GostobastantedoStackEdit.EleconverteMarkdownparaHTMLenquantovocdigita.bastantesimplesparaveroresultado:)

VamosaprenderentocomoescreveremMarkdown!

Ttulos(<h1>a<h6>)
Paramarcarumttulo,vocvaiusar#aquantidadedevezesqueirrepresentaronveldottulo.Exemplo:

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 1/9
22/03/2017 AprendaMarkdown|Da2kBlog
1#Ttulonvel1
2##Ttulonvel2
3###Ttulonvel3
4####Ttulonvel4
5#####Ttulonvel5
6######Ttulonvel6

Parseiapara:

1<h1>Ttulonvel1</h1>
2<h2>Ttulonvel2</h2>
3<h3>Ttulonvel3</h3>
4<h4>Ttulonvel4</h4>
5<h5>Ttulonvel5</h5>
6<h6>Ttulonvel6</h6>

Bastantesimples,no?Oh1eoh2aindapodemserescritosdaseguinteforma:

1Ttulodenvel1
2==================
3
4Ttulodenvel2
5

Pargrafosequebrasdelinha(<p>e<br/>)
Paragerarpargrafos,bastavocescreverotextoemumalinha:

1Esteumpargrafo.
2
3Esteoutropargrafo.

Issogera:

1<p>Esteumpargrafo.</p>
2<p>Esteoutropargrafo.</p>

Notequeeupuleiumalinhaentreospargrafos.Seeunofizesseisso,ocdigogeradoseria:

1<p>Esteumpargrafo.Esteoutropargrafo.</p>

Maselenodeveriausarum`
paraquebrarlinha?

Issomuitoparticulardecadaparser.Algunsquebramlinhaquandovocdenter.MasadocumentaodoMarkdowndizque,paraquebrasdelinha,vocprecisa
deixardoisespaosnofinaldalinha:

1Primeiralinhadopargrafo.
2Segundalinhadopargrafo.

Coloqueionofinaldaprimeiralinhasomenteparafacilitaravisualizao.Vocdevesubstituiressesmbolopordoisespaosembranco.Issodevegerar:

1<p>
2Primeiralinhadopargrafo.<br/>
3Segundalinhadopargrafo.
4</p>

Porisso,sevocestiverusandoo.editorconfignoseuprojeto,deixeaopotrim_trailing_whitespacecomofalseparaarquivosMarkdown.Assim,osespaos
adicionaisnoseroremovidos:)

nfase(<strong>e<em>)
Paraenfatizarumapalavras(<em>),usamosum*ou_:

1Javascript_cool_!

ou:

1Javascript*cool*!

Queirgerar:

1<p>
2Javascript<em>cool</em>!
3</p>

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 2/9
22/03/2017 AprendaMarkdown|Da2kBlog

Omaisutilizadoparanfase(<em>)ounderline.

Paradarfortenfaseempalavras(<strong>),vocusadois**ou__:

1**Da2k**apronnciapara**Daciuk**:DATWOK!

ou

1__Da2k__apronnciapara__Daciuk__:DATWOK!

Queirgerar:

1<p>
2<strong>Da2k</strong>apronnciapara<strong>Daciuk:</strong>DATWOK!
3</p>

Omaisutilizadoparafortenfase(<strong>)sodoisasteriscos.

CURSONINJAJAVASCRIPTINSCREVASEJ!

Links(<a>)
Paragerarlinks,vocusa[]().Dentrodoscolchetesvoccolocaotextodolink,edentrodosparnteses,voccolocaaURL:

1[BlogdoDa2k](http://blog.da2k.com.br)

Queirgerar:

1<ahref="http://blog.da2k.com.br">BlogdoDa2k</a>

PassandoumtextoapsaURL,separandoolinkdotextoporumespaoembranco,essetextoserusadocomotitle:

1[BlogdoDa2k](http://blog.da2k.com.br"Cliqueeacesseagora!")

Vaigerar:

1<ahref="http://blog.da2k.com.br"title="Cliqueeacesseagora!">BlogdoDa2k</a>

Linksautomticos
Seotextodoseulinkoprpriolink,vocpodeenvolvloentre<e>,queolinksergeradoautomaticamente:

1<https://www.google.com.br>

Irgerar:

1<ahref="https://www.google.com.br">https://www.google.com.br</a>

Eissofuncionatambmparaemails:

1<meu@email.com>

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 3/9
22/03/2017 AprendaMarkdown|Da2kBlog
Vaigerar:

1<ahref="mailto:meu@email.com">meu@email.com</a>

Dahora,no?)

Referncias
Expliqueisobrerefernciasnessepost.

Blocosdecitao(<blockquote>)
Paracriarblocosdecitao,vocusaosinalde>:

1>Esseumblocodecitao.
2>Elepodetervriaslinhasporpargrafo.
3>
4>Inclusive,dandoumespao,voctemumnovopargrafo.

Quegeraoseguinte:

1<blockquote>
2<p>
3Esseumblocodecitao.
4Elepodetervriaslinhas.
5</p>
6<p>Inclusive,umaquebradelinha.</p>
7</blockquote>

Listas(<ul>e<ol>)
Paralistasnoordenadas(<ul>),vocpodeusar*,+ou.Veja:

1 *Item1
2 *Item2
3 *Item3
4
5 +Item1
6 +Item2
7 +Item3
8
9 Item1
10Item2
11Item3

Ostrsformatosacimageramamesmamarcao:

1<ul>
2<li>Item1</li>
3<li>Item2</li>
4<li>Item3</li>
5</ul>

Eparalistasordenadas,vocusaonmero,seguidodeponto:

11.Item1
22.Item2
33.Item3

Queirgerar:

1<ol>
2<li>Item1</li>
3<li>Item2</li>
4<li>Item3</li>
5</ol>

Algunsparsersrenderizamautomaticamenteosprximosnmeros,apso1.Vocsprecisausar*paraositensdo2emdiante:

11.Item1
2*Item2
3*Item3

Masnosotodosquerenderizamdessaforma,entobomficarligado)

Imagens(<img/>)

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 4/9
22/03/2017 AprendaMarkdown|Da2kBlog
Geraodeimagensbemparecidocomageraodelinks:vocsprecisaadicionaruma!noincio.Eotextoquevoccolocaentreoscolchetes,usadocomo
altnaimagem:

1

Essecdigovaigerar:

1<imgsrc="http://cdn.osxdaily.com/wpcontent/uploads/2013/07/dancingbanana.gif"alt="Banana"/>

Otitletambmfuncionacomonolink:

1![Banana](http://cdn.osxdaily.com/wpcontent/uploads/2013/07/dancingbanana.gif"Olhaabananadanando!")

Quegera:

1<imgsrc="http://cdn.osxdaily.com/wpcontent/uploads/2013/07/dancingbanana.gif"alt="Banana"title="Olhaabananadanando!"/>

Tabelas(<table>)
Jfaleisobretabelasemumpostanterior.Nesseposteufalotambmsobreastasklists,maselassoespecficasdoGithub,nofuncionamcomqualquerparser
)

Cdigoinlineebloco(<code>e<pre>)
VocaindapodeadicionartrechosdecdigoviaMarkdown.Paraadicionarcdigoanvelinline,vocusa```:

1O`<blockquote>`umatagHTML.

Issoirgerar:

1<p>
2O<code>&lt;blockquote&gt;</code>umatagHTML!
3</p>

Eparagerarblocosdecdigo,vocsimplesmenteindentaocdigo4espaos(ou1tab)frentedopargrafo:

1EssaafunosayHello():
2functionsayHello(){
3return'hi!';
4}

Queirgerar:

1<p>
2EssaafunosayHello():
3<pre><code>functionsayHello(){
4return'hi!';
5}</code></pre>
6</p>

Issocomoestnadocumentao.Masamaiorpartedosparsesqueeuconheonofuncionamdessaforma.Elesgeramblocosdecdigousandotrscrasesno
inciodaprimeiraeltimalinha,paramarcaroincioeofimdobloco:

PS.:Tivequecolocarcomoimagem,poisomeuparsernoconsegueescaparas3crases

OGithubinclusiverecomendaqueseuseas3crases,poismaisfcildevisualizaredarmanutenonocdigo.

NoGithub,vocaindaconseguedefinirqualalinguagemqueestsendoutilizada,paraquesejafeitocodehighlightnoseucdigo.Spassealinguagemapsas3
crases,dessaforma:

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 5/9
22/03/2017 AprendaMarkdown|Da2kBlog
Queseucdigosermostradobonitinhoassim:

:D

Backslashscapes
ParaescaparcaracteresquesoparseadospeloMarkdown,vocpodeusarabarrainvertida\(backslash),seguidadocaractere,paraimprimloliteralmente.O
escapefuncionaparaoscaractereslistadosabaixo:

1 \backslash(barrainvertida)
2 `backtick(crase)
3 *asterisk(asterisco)
4 _underscore
5 {}curlybraces(chaves)
6 []squarebrackets(colchetes)
7 ()parentheses(parnteses)
8 #hashmark(sustenido/hash/jogodavelha)
9 +plussign(sinalde"mais"ousomar)
10minussign(hyphen)(sinaldemenosouhfen)
11.dot(ponto)
12!exclamationmark(pontodeexclamao)

Almdetudoisso,importantesabertambm,quepossvelusarHTMLjuntocomMarkdown!Issomesmo!Sevocprecisaradicionarumaclasseemuma
imagemparaalinhar,oucolocarumacorespecficaemalgumapalavra,vocpodeusartagsHTMLnormalmente:D

ParasabermaissobreMarkdown,recomendoaleituradadocumentaooficial:
http://daringfireball.net/projects/markdown/

EalgunslinksdecomooGithubusaMarkdown:
https://help.github.com/articles/markdownbasics/
https://help.github.com/articles/githubflavoredmarkdown/
https://guides.github.com/features/masteringmarkdown/
https://github.com/adamp/markdownhere/wiki/MarkdownCheatsheet

Evoc:oquejfazhojecomMarkdown?Temalgodiferentedoquefoivistonessepostparacompartilhar?Ficoucomalgumadvida?Comente!

Sobreo#1postperday:http://blog.da2k.com.br/2014/12/31/umpostpordia/

Temalgumasugestoparaosprximospostsdo#1postperday?Deixeelaaqui:https://github.com/fdaciuk/fdaciuk.github.io/issues/1

markdown
1postperday
Gosto 68 Tweet 6 Partilhar

Nopercanenhumaatualizao!
NovoumandarSPAM,nosepreocupe)

Nome Email Assinar!

Comments

24Comentrios BlogDA2K
1 Entrar

Recomendar 2 Compartilhar OrdenarporMaisvotados

Participedadiscusso...

RobsonBittencourt2anosatrs
Muitobomopost.
2 Responder Compartilhar

FernandoDaciuk Mod >RobsonBittencourt 2anosatrs

Valeu@RobsonBittencourt:D
Responder Compartilhar

FernandoGuisso2anosatrs
Esqueceudefalardoghost,comelequeeuestoumeacostumandoausarmarkdowneogithubtb.
2 Responder Compartilhar

FernandoDaciuk Mod >FernandoGuisso 2anosatrs

Verdade@FernandoGuisso!OGhosttambmumaexcelenteferramentaparablogging:D
2
Responder Compartilhar
http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 6/9
22/03/2017 AprendaMarkdown|Da2kBlog

Suissa>FernandoDaciuk2anosatrs
SusoeleLOL
2 Responder Compartilhar

JosMalcherJr.2anosatrs
Valeu!essepostvaiganharaba"cativa"aqui!!hehehehe!!Ateumemorizartudo!
2 Responder Compartilhar

FernandoDaciuk Mod >JosMalcherJr. 2anosatrs

hahah!Massa@JosMalcherJr.!

Valeucara:D
1 Responder Compartilhar

RafaelaMarraschi2mesesatrs
Obrigada,meajudoumuito!
1 Responder Compartilhar

FernandoDaciuk Mod >RafaelaMarraschi 2mesesatrs

Quebomquefoitil@RafaelaMarraschi\o/
Responder Compartilhar

GabriellaBatista5mesesatrs
vocudaMDparaescrevertodososseusartigos?usaqualferramentaparaisso?
1 Responder Compartilhar

FernandoDaciuk Mod >GabriellaBatista 5mesesatrs

Ol@GabriellaBatista=)
Sim,usoMDparaescreverosartigos!Paraesseblog,estouusandooHexo.Escreviumartigoaumtempoatrssobreele:
http://blog.da2k.com.br/201...
1 Responder Compartilhar

GabriellaBatista>FernandoDaciuk5mesesatrs
notenhonehumaexperienciacomisso.voucriarmeuprimeiroblognaversaoaltohospedadadowordpresseprecisodeumeditorde
texto.meindicaum,alemdestequevocusa,conheceoutrosmaisapropriadosparainiciantescomoeu?jouvifalardoulisses,
MarkdownPad,stackediteogoogledocs.meajudaa.
Responder Compartilhar

FernandoDaciuk Mod >GabriellaBatista 5mesesatrs

Entendi=)
Bom,sevocestcomeando,recomendousarodoprprioWordPress,quebastantesimples,masaomesmotempo,com
muitasfeaturesinteressantes=)

Atporquenowordpress.comnotemcomopersonalizarmuitooeditor,poisnopossvelinstalarpluginslxD
1 Responder Compartilhar

GabriellaBatista>FernandoDaciuk5mesesatrs
euvouusarowordpress.org.
Responder Compartilhar

FernandoDaciuk Mod >GabriellaBatista 5mesesatrs

Ah,legal=)
Entovocpodeusaralgumplugin,tipoesse:https://wordpress.org/plugi...
1 Responder Compartilhar

GabriellaBatista>FernandoDaciuk5mesesatrs
ahobrigada.vouusaresseparaescreverosmeusartigos.quandoestiverpronto,mostrocomoficou.
1 Responder Compartilhar

FernandoDaciuk Mod >GabriellaBatista 5mesesatrs

Show!Compartilhamesmo:D
Responder Compartilhar

DiogoRodrigues2anosatrs
Adoreiasdicas!__timopost!)__
1 Responder Compartilhar

FernandoDaciuk Mod >DiogoRodrigues 2anosatrs

Valeu@DiogoRodrigues:D
Responder Compartilhar

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 7/9
22/03/2017 AprendaMarkdown|Da2kBlog

DnisNunes2anosatrs
Topd+cara,meublogemJekylleospoststodosemMDlindod+.
1 Responder Compartilhar

FernandoDaciuk Mod >DnisNunes 2anosatrs

Massa@DnisNunes:D
MDfoiacoisamaislindaquecriaram**
1 Responder Compartilhar

Suissa2anosatrs
Muitobao,sescrevoemMD
1 Responder Compartilhar

FernandoDaciuk Mod >Suissa 2anosatrs

MDlindeza<3
Responder Compartilhar

OsmarCs2anosatrs
timopostparareferncia.
1 Responder Compartilhar

TAMBMEMBLOGDA2K

GerenciandocorretamentedependnciasemNodeJSsaveou WordPressCriandoumformulriodecontatosempluginParte
savedev? 3
12comentrios2anosatrs 32comentrios2anosatrs
Rafaeltimoartigo,Fernando!Eunoconheciaoproductionea ClaudineiOuFabianaMotaok.obrigado.Sucesso
explicaoentresaveesavedevmuitotilpraquemest
comeando.Euestava

JavascriptCriandoummduloAjaxcomPromisesParte5 Javascriptcomofuncionamasfunesrecursivas
10comentrios2anosatrs 13comentrios2anosatrs
KleberSlenderManolo,quesrieincrvel.Parabnspelaexcelente VitorBrittoAtenonousodocritriodeparadaeparmetroda
qualidadedaexplicao. chamadarecursiva.Docontrrio,estourodapilha/memria.=]

Inscrevase d AdicioneoDisqusnoseusiteAdicionarDisqusAdicionar Privacidade

Search

Categories

css5
frontend1
git1
github13
html2
javascript40
markdown1
retrospectiva2
wordpress13

Tags

1postperday70
ajax5
amd2
bdd1
braches1
chromeextension1
cleancode2
cli2
codecoverage1
codequality0
commonjs1
componentes0
coverage1
debug1
debugger1
deploy1
devtools1
disqus1
e2e0
escalabilidade1

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 8/9
22/03/2017 AprendaMarkdown|Da2kBlog
formularios1
functionalprogramming3
funes1
getmodule1
git1
github1
gulpjs5
hexo1
hmh1
html51
istanbul1
javascript0
linux1
markdown2
modulepattern1
mutationobserver1
mvc1
nodejs8
objetos1
patterns0
performance1
promises6
prprocessadores4
react0
reactjs0
recurso1
requirejs1
rsync1
segredosdogithub12
serietemaswordpress11
setInterval1
setTimeout1
sourcemaps1
spam1
ssh1
stylus4
tag10
taskrunner1
tdd2
temawordpress1
temporizadores1
tips5
umd1
valoresporreferncia1
void1
wordcamp1
workflow3

2017FernandoDaciuk

http://blog.da2k.com.br/2015/02/08/aprendamarkdown/ 9/9