Markdown – Kompletny Poradnik dla Początkujących

FrontendInne
kod na iMac

Korzystasz z Discorda? Wstawiasz projekty na GitHuba? A może prowadzisz bloga?

Jeśli odpowiedź brzmi „tak” – musisz poznać prosty i genialny Markdown!

🤔 Co to jest Markdown?

Markdown to prosty i intuicyjny język znaczników, który pozwala Ci formatować tekst bez skomplikowanego kodu.
Na naukę MD wystarczy poświęcić dosłownie kilka minut.

Pliki Markdown zapisuje się zazwyczaj z rozszerzeniem .md (być może spotkałeś się na GitHub z plikami README.md).

Dzięki MD, opisy projektów są ładne i czytelne.

Z tego prostego formatowania można też korzystać w wielu aplikacjach (Discord, Bear itd.) co przydaje się przy pisaniu długich wiadomości czy organizowaniu treści.

⚙️ Jak działa Markdown?

📖 Nagłówki

Nagłówki tworzymy za pomocą symbolu #.
Liczba symboli określa poziom nagłówka.

# Nagłówek 1 (odpowiednik <h1> w HTML)
## Nagłówek 2
### Nagłówek 3

Zwróć uwagę na spację między #, a tekstem!

✍🏻 Tekst pogrubiony i kursywa

  • Pogrubienie: **tekst** lub __tekst__
  • Kursywa: *tekst* lub _tekst_
  • Kursywa i pogrubienie: ***tekst***

📝 Listy

Lista punktowa:

- Punkt 1
- Punkt 2  
  - Podpunkt (na początku mamy Tab lub dwie spacje)

Efekt:

  • Punkt 1
  • Punkt 2
    • Podpunkt

Lista numerowana:

1. Punkt pierwszy
2. Punkt drugi  
3. Punkt trzeci  

Efekt:

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

🌍 Linki

Aby dodać link, używamy składni: [tekst](adres_url)

Przykład: [MMC School](https://mmcschool.pl)
Efekt: MMC School

🖼️ Obrazy

Obrazy wstawiamy podobnie jak linki, z tym że na początku dodajemy wykrzyknik:

![Opis obrazu](adres_obrazu)  

Ciekawostka – na Discordzie można pominąć wykrzyknik.

🗣️ Cytaty

Cytaty w Markdown oznaczamy znakiem >:

> To jest cytat.  

👾 Kod

Do osadzenia kodu używamy grawisów (ten cosiek pod Esc, przy tyldzie ~) i możemy to robić na dwa sposoby.

Sposób 1 (kod jednoliniowy):

`console.log("Cześć!")`

Efekt: console.log("Cześć!")

Sposób 2 (kod wieloliniowy):

```js
console.log("Cześć!")
console.log("🙂")
```

Efekt:

Kod zapisany w Markwodn
Screen z formatowania na Discordzie.


Zauważ, że w powyższym przykładzie za ``` dodałem litery js.
Dzięki temu kod jest odpowiednio pokolorowany.

Zamiast js możesz tam wstawić html, css, json itd. Odpowiednio dla używanego języka. 🙂

I to tyle! Właśnie nauczyłeś się korzystać z Markdown! 🥳

Nowe umiejętności możesz przetestować na naszym Discordzie, na GitHubie czy w VS Code (tylko pamiętaj o pliku .md).

Przykład pliku Markdown:

# Nagłówek nr 1, tytuł projektu

## Nagłówek nr 2, nazwa sekcji  

To jest jakiś losowy tekst. 

Teraz dodamy listę:
- W tym punkcje mamy **pogrubione** jedno słowo!
- A to drugi punkt z [linkiem do strony MMC School](https://mmcschool.pl/)

> Teraz dodam jeszcze cytat.

A na końcu przykład kodu wieloliniowego:
```html
<h1>Hello world!</h1>
<p>Mam nadzieję, że poradnik się podobał. 🙂</p>
```

Powyższy kod możesz wkleić do pliku .md, np. info.md

Następnie otwórz plik w VS Code, kliknij PPM (prawy przycisk myszy) i wybierz pierwszą opcję Open Preview.

Teraz masz podgląd na żywo prosto w VS Code. 👌🏻

Poprzedni wpis
Premiere Pro vs Final Cut Pro – co wybrać w 2025?