Kako raditi s GitHub Flavored Markdownom u Linuxu


Markdown je jezik oblikovanja koji je kreiran za web. Svrha mardowna je olakšati život kada pišemo na internetu. Vremenom je stvoreno mnogo ukusa mardowna. Ali u ovom članku, naš fokus će biti uglavnom na Github Flavored Markdown (GFM).

Github je baziran na CommonMarku. Postoji mnogo dodatnih funkcija podržanih u GFM-u kao što su tabele, ograđivanje koda, itd. Hajde da uskočimo i istražimo sintaksu za GFM i kako je koristiti u različitim slučajevima.

Koristim VScode da to demonstriram, ali možete odabrati bilo koji Linux editor koji vam odgovara. Neki uređivači kao što su Atom i Vscode dolaze sa podrškom za markdown, a za neke urednike moramo instalirati dodatak za markdown.

Za rad sa markdownom fajl treba da bude sačuvan sa .md ili .markdown kao ekstenzijom.

Kako dodati naslove u Markdown Editor

Postoji 6 nivoa zaglavlja podržanih u markdownu. Za kreiranje naslova koristite simbol Hash (#) nakon kojeg slijedi razmak i naziv naslova. Što je veća heš vrijednost, manja je veličina naslova.

NAPOMENA: H1 i H2 će prema zadanim postavkama imati stil podvlačenja.

Heading1
## Heading2
### Heading3
#### Heading4
##### Heading5
###### Heading 6

Ponekad ćete možda poželjeti da poravnate smjer prema centru. Ali tužna priča je da poravnanje nije podržano po defaultu u markdownu. Podrazumevano, naslovi se prikazuju sa lijevim poravnanjem. Možete ugraditi HTML/CSS oznake u markdown da biste postigli poravnanje.

<h1 style="text-align:center">MARKDOWN</h1>
<h1 style="text-align:left">MARKDOWN</h1>
<h1 style="text-align:right">MARKDOWN</h1>
<h1 style="text-align:justify">MARKDOWN</h1>

Kako dodati komentare u Markdown Editor

Komentari su način da se dokumentuju određene stvari radi boljeg razumijevanja koda/dokumenata. Ovo neće biti prikazano od strane markedown engine-a.

<!--
Comment block
-->

Kako prikazati tekst kao jednu liniju

Obično kada upišete nešto u zasebne redove jedan za drugim, smanjenje će to prikazati kao jedan red.

Možete kreirati prijelome reda na dva načina.

  • Meki prekid linije
  • Hardline break

Meki prijelomi linija mogu se kreirati dodavanjem dva razmaka na kraju reda. Na ovaj način markdown će svaku liniju prikazati kao zasebne linije.

Tvrdi prelomi mogu se kreirati umetanjem prazne linije između svakog reda.

Kako dodati horizontalne linije

Horizontalno pravilo se može kreirati postavljanjem tri ili više zvjezdica (*), crtica (-) ili podvlaka (_) u jednom redu. Također je u redu dodati razmak između njih.

* * *
---
___

Kako podebljati tekst

Da napravite riječ ili redove BOLD, okružite riječ ili redove između dvostrukih zvjezdica (**) ili dvostruke donje crte (__).

**Making this sentence bold using double asterisks.**

__Making this sentence bold using double underscore.__

Kako napraviti kurziv teksta

Da biste napravili riječi ili redove KUŠIVOM, okružite riječ ili redove između pojedinačnih zvjezdica (*) ili jedne donje crte (_).

*Making this line to be italicized using asterisks.*

_Making this line to be italicized using underscore._

Kako dodati precrtavanje linijama

Da biste udarili bilo šta, morate koristiti dvostruku tildu. Okružite sve što trebate da prođete između dvostrukih tilda (~~).

I am just striking the word ~~Howdy~~.

~~I am striking off the entire line.~~

Kako dodati blok citat

Koristite veći od simbola (>) za blok citat.

> Single line blockquote.

Pogledajte kako je prikazan donji blok citat. Oba reda su prikazana u istoj liniji.

> first line
> Second line
> Third line
> Fourth line

Možete koristiti povratak na red ostavljajući dva razmaka na kraju svakog reda. Na ovaj način svaki red neće biti prikazan u jednom redu.

Ostavite alternativne redove prazne sa prefiksom veće od simbola. Na ovaj način možete napraviti prijelom reda između svakog reda unutar istog bloka.

> first line
> 
> Second line
> 
> Third line
> 
> Fourth line 

Također možete kreirati ugniježđene blok navodnike dodavanjem dva simbola veća od (>>).

Kreirajte inline kod

Koristite BACKTICK da napravite inline kod. Donji primjer pokazuje kako kreirati inline kod. Pogledajte riječ notes i readme koja je prikazana kao inline kod.

Markdown is one of the best tools for taking `notes` and creating `readme` files.

Dodajte isticanje sintakse bloka koda

Dodajte tabulatore ili 4 razmaka i postavite svoj kod kako biste ga prikazali kao blok koda. Alternativno, postavite svoj kod između tri pozadinske oznake kako bi blok bio prikazan kao blok koda. Važna karakteristika koju treba napomenuti je isticanje sintakse. Obično kada postavite kod unutar bloka, na njega se ne primjenjuje šema boja.

```
echo "Hello world"
```

Sada pogledajte isti primjer, shema boja se automatski primjenjuje. Ovo je moguće dodavanjem naziva programskog jezika nakon tri povratna kvačica koji će primijeniti shemu boja na kod.

```bash
echo "Hello world"
```

Primjer Python koda.

```python
def fp():
  print("Hello World!!!")
fp()
```

Uzorak SQL upita.

```sql
SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE   
WHERE SALARY_EMP<(SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE)
```

Kreirajte uređene i nesređene liste

Stavke se mogu organizirati u uređene liste i neuređene liste u markdownu. Da biste kreirali uređenu listu, dodajte brojeve praćene tačkom. Zanimljivo je napomenuti da broj ne mora biti sekvencijalan. Markdown motor je dovoljno pametan da shvati da je to uređena lista čak i ako izvršimo redoslijed koji nije sekvencijalan.

U donjem primjeru, možete vidjeti da sam kreirao uređenu listu s nesekvencijskim redoslijedom (10, 15, 150), ali mehanizam za smanjivanje je prikazuje u ispravnom redoslijedu. Također možete kreirati ugniježđenu listu kao što je prikazano na slici.

Za kreiranje neuređene liste koristite znak plus (+) zvjezdice (*) ili crticu (-) nakon čega slijedi razmak i sadržaj liste. Slično naređenoj listi i ovdje možete kreirati ugniježđenu listu.

Kreirajte listu zadataka

Ovo je posebna karakteristika GFM-a. Možete kreirati listu zadataka kao što je prikazano na donjoj slici. Da biste označili zadatak kao dovršen, morate dodati ‘x’ između uglastih zagrada kao što je prikazano na slici.

Dodajte linkove u tekst

Da biste dodali vezu, slijedite donju sintaksu.

[Tecmint](https://linux-console.net "The best site for Linux")

Podijelimo sintaksu na 3 dijela.

  • Tekst za prikaz – Ovo je tekst koji će biti stavljen unutar uglastih zagrada ([Tecmint]).
  • Link – stavit ćete stvarnu vezu unutar zagrada.
  • Naslov – Kada zadržite pokazivač miša preko teksta, prikazat će se opis za vezu. Naslov treba staviti unutar navodnika kao što je prikazano na slici.

Sa donje slike možete vidjeti “Tecmint ” je moj prikazni tekst i kada kliknem na njega, preusmjerit će me na “linux-console.net”.

Također možete kreirati veze tako što ćete ih staviti unutar ugaonih zagrada < >.

Dodajte linkove slikama

Sintaksa za sliku izgleda slično dodavanju veza. Da biste dodali sliku, slijedite donju sintaksu.

![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")

Podijelimo sintaksu na 3 dijela.

  • Alternativni tekst – Alternativni tekst će biti postavljen između uglastih zagrada (![alt-text]). Ako je slika pokvarena ili se ne može učitati, ovaj tekst će biti prikazan zajedno sa slomljenim simbolom.
  • Link – Unutar zagrada ćete postaviti stvarnu vezu do slike.
  • Naslov – Kada zadržite pokazivač miša preko slike, prikazat će se naziv slike. Naslov treba staviti unutar navodnika kao što je prikazano na slici.

Također možete kreirati vezu sa slikama. Kada korisnik klikne na sliku ona će biti preusmjerena na vanjski link. Sintaksa ostaje ista sa nekoliko modifikacija. Okružite istu sintaksu koju smo koristili za umetanje slike u uglaste zagrade praćene vezom unutar zagrada.

[![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")](https://en.wikipedia.org/wiki/Markdown)

Kreirajte tabelu

Tabele nisu podržane u originalnoj verziji markdowna. To je jedna od posebnih karakteristika koje dolaze sa GFM-om. Hajde da vidimo kako da napravimo tabelu na način korak po korak.

Prvi dio je kreiranje naziva kolona. Imena kolona se mogu kreirati odvajanjem cijevima (|).

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |

U drugom redu koristite crtice (-) u kombinaciji sa dvotočkom (:). Crtice govore mašini za označavanje da će ovo biti prikazano kao tabela, a dvotočka odlučuje da li naš tekst treba da bude poravnat po sredini, levo ili desno.

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|

:---:  ⇒ Center alignment
:---   ⇒ Left alignment
---:   ⇒ Right alignment

Iz trećeg reda možete započeti kreiranje zapisa. Zapise treba odvojiti crtom (|).

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|
|  Ravi         |   30         |  127        |
|  karthick     |   27         |  128        |

Iz gornje slike možete vidjeti da je tabela pravilno prikazana. Kolona 1 je poravnata po sredini, kolona 2 i 3 su poravnata lijevo i desno. Ako koristite Vscode, možete koristiti “Markdown Table Prettifier” da uredno formatirate tabelu.

Kreirajte emoji sličice

GFM podržava širok spektar emojija. Pogledajte emoji varalicu.

To je to za ovaj članak. Ako imate bilo kakve povratne informacije, ostavite ih u odjeljku za komentare.