Wstęp

Markdown to język prostych znaczników, który powstał w celu uproszczenia formatowania tekstu i przyspieszeniu pracy nad nim. Posiada łatwą do opanowania składnię, dzięki której praca nad tekstem jest szybsza i wygodniejsza. Ghost ma wbudowana obsługę Markdown w serii i dodatkowo otrzymujemy podgląd tego co piszemy. Poniżej postaram się Wam przedstawić wszystkie najważniejsze funkcje Markdown w Ghost.

Nagłówki w Markdown

Aby stworzyć nagłówki wpisujemy przed tekstem znak # w ilości od 1-6 w zależności jaki chcemy uzyskać nagłówek

# Nagłówek stopnia pierwszego H1
## Nagłówek stopnia drugiego H2
### Nagłówek stopnia trzeciego H3
#### Nagłówek stopnia trzeciego H4
##### Nagłówek stopnia trzeciego H5
###### Nagłówek stopnia szóstego H6

Otrzymamy następujący efekt:

Nagłówek stopnia pierwszego H1

Nagłówek stopnia drugiego H2

Nagłówek stopnia trzeciego H3

Nagłówek stopnia trzeciego H4

Nagłówek stopnia trzeciego H5

Nagłówek stopnia szóstego H6

Listy w Markdown

Kolejnym elementem języka Markdown są listy. Możemy je stworzyć dodając znak * przed każdym elementem listy:

* element 1
* element 2
* element 3

Otrzymamy następujący efekt listy:

• element 1
• element 2
• element 3

Listy z numeracją:

1. element 1
2. element 2
3. element 3

Efekt końcowy:

1. element 1
2. element 2
3. element 3

Tutaj również w bardzo prosty sposób możemy uzyskać efekt końcowy listy bez pisania wielu znaczników w HTML lub "wyklikiwaniu" elementów listy z menu.

Formatowanie tekstu w Markdown

Tutaj mamy całą masę możliwości i najlepiej przedstawi je poniższa tabelka. Myślę, że wszystkie opcje są proste i łatwe do zapamiętania, a o kilku z nich napiszę jeszcze poniżej.

Cytaty w Markdown

> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Efekt końcowy:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Linia pozioma w Markdown

Linię pozioma oddzielającą różne sekcje możemy wpisać na kilka różnych sposobów wpisując:

***
---
* * *

Efekt końcowy będzie wyglądał zawsze tak samo:

Kod HTML/CSS w Markdown

Niektórzy z nas będą chcieli zapewne dodać czasami kawałek kody HTML lub CSS lub innego języka. Wtedy mamy do wyboru dwie opcje.

```Tu wklejamy kod```

Efekt z uzyciem przykładowego kodu będzie taki:

<nav class="pagination">
	<div class="wrapper">
	  {{#if prev}}
		  <a href="{{page_url prev}}" class="button rounded light next"><span class="sub"><i class="icon icon-angle-left"></i></span><span class="main">Nowsze wpisy</span></a>
	{{/if}}
	   {{#if next}}
		  <a href="{{page_url next}}" class="button rounded light previous"><span class="main">Starsze wpisy</span><span class="sub"><i class="icon icon-angle-right"></i></span></a>
	   {{/if}}
	</div>
</nav>

Możemy tez użyć kodu nie jako pełna linia a w tekście.

`przykładowy kod`

Dla przykładu w tym tekście w linii umieściłem kawałek kodu. Jak widzisz mamy 2 możliwości w zależności od potrzeby i są one na prawdę łatwe do użycia. W osobnym poradniku pokażę Ci jeszcze jak dodać kolorowanie składni kodu w Ghost przy użyciu jednej prostej biblioteki JS.

Linki w Markdown

Tutaj wpisujemy w nawias kwadratowy tekst linku a w nawias okrągły URL do strony:

 [nayma.pl](https://nayma.pl)

Rezultat:

nayma.pl

Jeżeli nie chcemy zmieniać nazwy linku możemy wkleić URL bezpośrednio do tekstu i Ghost automatycznie zamieni nam go na link.

Zdjęcia w Markdown

Zdjęcia wstawiamy przy użyciu kodu:

 ![](/link-do-zdjecia/nazwa-obrazka.jpg)

Jednak lepsza opcją jest skrót klawiszowy na macOS ⌘+SHIFT+I lub na Windows CTRL+SHIFT+I dzięki któremu pokaże nam się okienko:

Klikamy na nie i wybieramy zdjęcie z dysku. Zdjęcie wgra nam się automatycznie na serwer i umieści w poście i pokaże w podglądzie. Jak dla mnie świetna sprawa - dużo lepsza niż w WordPress gdzie dodawanie zdjęcia wiązało się z czterema krokami tu robimy wszystko praktycznie jednym (tak - w sumie to dwoma bo trzeba jeszcze kliknąć skrót na klawiaturze, ale to mimo wszystko dużo szybsze niż szukanie guzika "Dodaj medium").

Polecam również wszystkim przejrzeć oficjalny poradnik/dokumentację Markdown dla Ghost, którą znajdziecie tutaj:

Zobacz Poradnik Markdown

Podsumowanie

Dzięki Markdown możemy skupić się na pisaniu i w prosty i intuicyjny sposób stworzyć dobry artykuł o wiele szybciej niż np w WordPress. Jak to wygląda w praktyce pokazuje poniższy gif w którym widać jak w kilka sekund można stworzyć sformatowaną treść: