Pisanje i formatiranje sadržaja koristeći Markdown sintaksu

Pregled 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 primjerice tablica ili fusnota.

Sa vizualnim pregledom 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. Svjetska 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 međusobno ne slažu oko toga kako postupati sa praznim prostorom između hash znaka i samog teksta, poželjno je 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 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

Popisi su često gnjavaža za pisati u HTML kodu 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 jedino treba staviti > znak na početak i u HTML će se to pretvoriti kao

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

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.

Sažetak

Kako vam se čini Markdown? 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 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.

U svakom slučaju, jednom kad počnete pisati koristeći markdown sintaksu, produktivnost vam može biti puno efikacija i nećete poželjeti koristi bilo što drugo. Dok ne izmislimo nešto još bolje 🙂