Czy znasz Markdown i dlaczego powinno się go znać?

Podstawy Markdown

Oglądaliście sitcom Jak poznałem waszą matkę? Jeżeli tak to pewnie pamiętacie grę w jaką lubił grać Barney: Have you met Ted? i dzisiaj właśnie w nią zagramy z tym, że zamiast Teda będziemy poznawać Markdown, a konkretnie jego podstawy.

Zacznijmy od tego czym jest markdown.

Markdown to język znaczników przeznaczony do formatowania tekstu za pomocą zwykłego edytora. Autorami są John Gruber i Aaron Swartz, którzy stworzyli go w 2004 roku.
Źródło: Wikipedia

Mówiąc językiem potocznym to taki wynalazek, który daje możliwość tworzenia tekstu w przejrzystej formie w bardzo prosty sposób, a do tego każdy użytkownik jest w stanie go opanować bez konieczności znajomości wiedzy tajemnej czy innych zaklęć rodem z Harrego Pottera. Można z niego skorzystać w wielu edytorach więc czy używasz Vim czy VS Code wygląda tak samo, dodatkowo jest wieloplatformowy czyli czy jesteś fanem pingwina czy okienek nie ma to znaczenia.

Zapewne widzieliście już wielokrotnie rozszerzenie MD - na przykład wchodząc do Github ale czy zastanawialiście się kiedykolwiek czym właściwie jest ten twór? Spróbuję to wytłumaczyć w najbardziej przyswajalnej postaci - oczywiście na przykładach aby ułatwić zrozumienie idei i składni.

Poniżej przykład Markdown.

# Nagłówek 1
## Nagłówek 2
1. Punkt 1
    - podpunkt
    - kolejny podpunkt
2. Punkt 2
    * a teraz trochę inaczej
    * i jeszcze jeden raz

---
[A tutaj będzie link do google](https://www.google.pl)
---

Proste prawda? I to mnie w nim urzekło. Pisanie dokumentacji czy notatek jest super przy jego użyciu, dobrze też konwertuje na różne formaty - chociaż najczęściej jest to HTML.

No dobrze, skoro już zobaczyliśmy próbkę tego co daje nam Markdown to przejdźmy do szczegółów i sposobu ich zapisu czyli co jak możemy umieścić w treści. Przykłady, które zobaczysz dodatkowo będą pokazywały wizualizację jaką mielibyśmy po konwersji na HTML, tak na wszelki wypadek żeby wszystko było widoczne gołym okiem.

Nagłówki - tworzymy je przy użyciu #, a ilość użytych odpowiada za wielkość nagłówka
```
# H1
## H2
### H3
```
W postaci HTML będzie wyglądało to tak:

H1

H2

H3
Akapity i przełamania linii - akapit tworzymy za pomocą pustej linii, a przełamianie linii za pomocą dwóch spacji na jej końcu:
```
To jest pierwszy akapit

To jest drugi akapit

Pierwsza linia  
Druga linia
```
Po stronie HTML zobaczymy:

To jest pierwszy akapit

To jest drugi akapit

To jest pierwsza linia
To jest druga linia
Sterowanie wyglądem tekstu - pogrubienie, italic lub monospace
```
**pogrubienie**
_italic_
`monospace`
```
Listy - wypunktowania rozpoczynające się od cyfr, myślników, gwiazdek czy plusów
```
1. Pierwszy punkt
    1. Pierwszy podpunkt
    2. Drugi podpunkt
2. Drugi punkt
    * gwiazdka
3. Trzeci punkt
    - myślinik
    + plus
```
A w postaci wizualnej po konwersji na HTML wygląda to tak:
1. Pierwszy punkt
2. Drugi punkt
  - Kropka
3. Trzeci punkt
  - myślinik
  - plus
Linki - tutaj nie trzeba tłumaczyć co to jest
```
[to jest link do google.com](https://www.google.com)
[to jest link do abboutall.pl](https://aboutall.pl)
```
A to samo w postaci HTML wygląda następująco:

to jest link do google.com
to jest link do aboutall.pl
Cytaty - które tworzymy używając znacznika >
```
> "Cześć i dzięki za ryby"  
> Douglas Adams - Autostopem przez galaktykę
```
No i to samo w zwizualizowane w HTML:

"Cześć i dzięki za ryby"
Douglas Adams - Autostopem przez galaktykę
Kod - jest kilka przykładów na umieszczanie kodu źródłowego w treści markdown.
Można dla całego bloku zastosować wcięcie w postaci 4 spacji lub jednego tab (w przypadku gdy kod ma być wyświetlony w liście wtedy musimy to podwoić).
Jest też kilka innych sposobów.
Poniżej przykład jak użyć listowania kodu w markdown na przykładzie HTML.
```
```html
<html>
<head>
To jest tekst <p>
A to inny tekst
</head>
</html>
```
```
Można też w taki sposób pokazać dla przykładu polecenie:
```
Type `ls` to list.
```
Obrazy - oczywiście w tekście gorzej widać obrazek jednak w trybie tekstowym może być utrudnione jego oglądanie jednak jak robimy potem konwersję na przykład do HTML to zobaczymy efekt. Przykład składni aby dodać obrazek jest poniżej.
```
![Tux image](images/markdown/tux.png)
```
A efekt w HTML:

No dobrze, to tyle jeżeli chodzi o podstawy. W kolejnej części dorzucę to co jeszcze jesteśmy w stanie pokazać w markdown czyli składnię rozszerzoną i zapewniam, że całość będzie - jak to mówi Barney - Legen - wait for it - dary 😉

Czy znasz Markdown i dlaczego powinno się go znać?

Podstawy Markdown

H1

H2

H3