Preskoči do glavnog sadržaja

Kada želimo stvarati tekstualni sadržaj za stranice često ne možemo pisati bez ometanja i pauza koje nas koče. Naše misli ne mogu slobodno letjeti i istodobno se pretakati u konačnu formu bez zastajkivanja. Pokušavamo tekst organizirati u smislene sekcije, formatirati ga prema potrebi, određene riječi podebljati ili staviti u kurziv, negdje želimo tekst oblikovati kao kratak popis, neke riječi želimo postaviti kao link na druge stranice. Ovo je teško raditi bez dobrog vizualnog editora koji će umjesto nas pravilno formatirati sadržaj. A čista kontrola i ručno pisanje HTML koda (za one koji ga i dobro znaju) je nepotreban posao i daleko veće gubljenje vremena.

Markdown

Upoznajte Markdown. Markdown je minimalni jezik, osmišljen tako da omogući jednostavno pisanje običnog teksta i pomoću nekoliko jednostavnih znakova omogućuje nam da tekst pretvorimo u pravilan HTML kod i lijepo oblikovan tekst.

Izumili su ga američki bloger John Gruber i programer Aaron Swartz 2004. godine kada su nakon frustracija mukotrpnog pisanja HTML tagova pokušali osmisliti način koji bi omogućio stvaranje sadržaja i brzim načinom formatirao tekst. Osmislili su jednostavniji način koji bi olakšao kako pisanje tako i čitanje dokumenata kada je u sirovom tekstualnom obliku. Ključni princip je bio čitljivost teksta, bez da izgleda kao da je označen kompliciranim oznakama kao što je HTML. Uz samo nekoliko dodatnih znakova Markdown omogućuje brzo i lijepo oblikovanje bogatih dokumenata, nije potrebno prestati tipkati kako bi mišem formatirali sadržaj ili razmišljati o pravilnoj HTML strukturi, prste možete čvrsto držati na tipkovnici i u letu oblikovati tekst što pogoduje efikasnosti.

Markdown dokumente spremaju se s ekstenzijom .md ili .markdown.

Gdje se koristi markdown

Markdown možete koristiti bilo gdje, na računalu ili mobitelu, u bilokojem tekst editoru, neovisno o tome koristite li Windowse, Mac ili Linux. Danas je jedan od vrlo popularnih načina za format teksta i postoje njegove implementacije za svaku veću blog platformu. S vremenom su se pojavile razne nadogradnje, dodatne značajke koje osim osnovne sintakse omogućuju formatiranje dodatnih značajki, primjerice, tablica ili fusnota.

Vizualni pregled formatiranog teksta prilikom rada

Kod editora kao što su Microsoft Word, Google Docs, OpenOffice Writer i drugi, kada označite neku riječ kao bold ili ukošeno, ona će istog trena takva i postati. Kod Markdowna se to neće dogoditi jer se ipak radi o tekstu u najosnovnijoj formi. Svaka vizualna promjena se kod njega događa tek kada dokument otvorimo u preview načinu. Zbog toga je korisno, ali ne i nužno, koristiti editor koji podržava Markdown pregled. Podržavaju ga razni popularni tekstualni ili programski editori, primjerice Sublime Text, Atom.io, Microsoft VSCode… Mnogi koriste i neki od online editora, najpoznatiji je dillinger.io.

Bez vizualnog pregleda

Neke web stranice ne omogućuju formatiranje sadržaja pomoću vizualnih editora. Svjetski popularna informativna društvena mreža Reddit vam jedino omogućuje obično tekstualno polje za unos sadržaja ali u potpunosti podržava Markdown sintaksu te se tekst automatski formatira tek nakon objave. Markdown se koristi i u statičkim generatorima stranica kao što je Jekyll za generiranje Github stranica, osim ako se ne koristi vizualni pregled teksta, njegove promjene će se na stranici vidjeti nakon što se tekst objavi i Github ga procesuira. Druge popularne platforme kao Bitbucket, Stack Exchange, OpenStreetMap… također koriste sintaksu Markdowna za poticanje rasprave među korisnicima.

Korisnici Markdowna su često i naviknuti raditi u sirovom tekstualnom obliku bez pregleda, što nije teško jer je Markdown zaista vrlo jednostavan.

Kako pisati markdown

Navodimo neke od najčešćih sintaksi koje su potrebne za oblikovanje sadržaja. Za više informacije uvijek se možete osloniti na službeni vodič za Markdown sintaksu.

Naslovi

Naslovi se pišu zaokruženi hash tagom. Broj hash tagova označa razinu naslova pa ovisno koja razina naslova se želi postići, toliko se hash tagova doda na početak naslova.

Primjerice, ovako kreirani naslovi:

# Naslov 1
## Naslov 2
### Naslov 3
#### Naslov 4
##### Naslov 5
###### Naslov 6

formatirat će se ovako:

<h1>Naslov 1</h1>
<h2>Naslov 2</h2>
<h3>Naslov 3</h3>
<h4>Naslov 4</h4>
<h5>Naslov 5</h5>
<h6>Naslov 6</h6>

Kako HTML omogućuje maksimalnu vrijednost h6, tako ima i smisla koristiti maksimalno 6 hash tagova. Ionako vam za pisanje većine sadržaja rijetko trebati više od 3 razina. Različite Markdown implementacije se međusobno ne slažu oko toga kako postupati sa praznim prostorom između hash znaka i samog teksta, ipak je poželjno staviti razmak što pogoduje i čitljivosti.

Paragrafi

Odlomci u tekstu se stvaraju automatski kako ga odijelite praznom linijom pritiskom na enter pa te paragrafe nije potrebno označavati nikakvim posebnim znakovima.

Semantičke dekoracije teksta

Ako neke riječi želite učiniti boldanim, samo između riječi stavite dva asteriksa na početak i kraj:

**važan tekst**

Ako želite tekst prebaciti u kurziv, dodajte jednu zvjezdicu prije i poslije teksta.

*naglašen tekst*

Liste

Popise je često gnjavaža pisati u HTML kôdu no koristeći Markdown oni postaju mačlji kašalj.

Ako želite običan redoslijed svaku stavku započnite pisati malom crticom:

- Prva stavka
- Druga stavka
- Treća stavka

HTML kod će ispasti ovakav:

<ul>
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treća stavka</li>
</ul>

Ako želite redoslijed po brojevima samo počnite pisati tako.

1. Prva stavka
2. Druga stavka
3. Treća stavka

Kod popisa za stvaranje ugniježđenih stavka potrebno je samo uvući liniju s 4 razmaka.

1. Prva stavka
2. Druga stavka
    1. Ugniježđena stavka

Linkovi

Linkovi imaju tekst koji se zaokruži uglatom zagradom a onda iza toga se u zagradi stavi link

[Ovo je link](https://www.google.com)

Slike

Formatiranje slika je slično kao i kod linka, jedina razlika je što se na samom početku stavi uskličnik.

![alternativni naslov slike](https://webtrgovina.com/slika.jpg)

Citati

Za pisanje citata (navoda, kojima želimo prenijeti točno tekst od riječi do riječi) jedino je potrebno staviti “>” znak na početak kao u narednom primjeru i u HTML-u će se to odmah prikladno formatirati u pravilnu oznaku.

> Tekst citata
<blockquote>Tekst citata</blockquote>

Trebate li pisati fusnote (napomene obilježene zvjezdicom ili brojkom a otisnute sitnijim slovima pri dnu stranice, cilj im je da pobliže objasne nešto uz glavni tekst), potrebno je upisati broj fusnote ovako u uglatoj zagradi:

 [^1]

Usput, ako se pitate kako upisati znakić ^, upišete ga tako da držite desnu Alt-Gr tipku i pritisnete broj 3 (onu trojku kod slova, ne onaj broj na numpadu).

Pisanje znakova koji se koriste u Markodownu

Ako vam zatreba neki znak na početku koji je predstavljen markdownom, primjerice, želite doslovno ubaciti * znak, potrebno je prije njega dodati kosu crtu \ koja će markdownu reći da znak iza kose crte preskoči prilikom procesuiranja. Programeri web stranica će to lako zapamtiti jer je funkcionalnost preuzeta iz regularnih izrada (lakše je reći na engleskom, radi se o regular expression pravilima).

Sažetak

Kako vam se čini Markdown na prvu ruku? S jedne strane možete se usredotočiti na pisanje bez puno mozganja oko formatiranja teksta.

U svakom slučaju, Markdown ima svoju vrijednost u određenim slučajevima a ako koristite neki od spomenutih servisa (Reddit…) primorani ste ga koristiti. 🙂 U početku je potrebno priviknuti se na novi način pisanja što zbog jednostavnosti nije problem, većina Markdown urednika dolazi s ugrađenim cheat-sheet podsjetnicima a ako zapnete uvijek se možete referirati na ovaj članak ili brzo proguglati traženi pojam.

Nije nužno da Markdown koristite samo za pisanje blogova na web stranicama, premda je u tu svrhu zamišljen. Možete ga koristiti za oblikovanje uobičajenih dokumenata, za pisanje knjiga, pisanje emailova, prezentacija..

U svakom slučaju, jednom kad počnete pisati koristeći markdown sintaksu, produktivnost će vam biti puno efikasnija i nećete poželjeti koristi bilo što drugo. Sve dok čovjek ne izmisli nešto još bolje 🙂

PODIJELI S PRIJATELJIMA:
Idi  na  vrh