Składnia Markdown

Strona przedstawia wszystkie możliwe znaczniki składni Markdown, których używam na stronie. Jest to rozszerzona składnia Parsedown, którą możesz testować w mojej aplikacji Markdown Tester.

Nagłówki

Kod Markdown:

# Nagłówek H1
## Nagłówek H2
### Nagłówek H3
#### Nagłówek H4
##### Nagłówek H5
###### Nagłówek H6

Wynik renderowania:

Nagłówek H1

Nagłówek H2

Nagłówek H3

Nagłówek H4

Nagłówek H5

Nagłówek H6

Tekst

Kod Markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin eget quam eu semper. Cras maximus ligula vitae aliquet tempor. Maecenas fermentum consectetur faucibus. Vestibulum non aliquam ligula. Pellentesque sit amet ipsum felis. Duis dapibus dignissim justo eget blandit. Etiam consectetur nulla vitae est suscipit faucibus. Cras gravida neque viverra elit varius maximus. Donec lacinia velit sit amet magna eleifend congue. Nunc ut feugiat urna, eu accumsan nisl. Maecenas tincidunt fringilla risus, eu placerat turpis aliquam nec. Quisque risus tellus, elementum quis venenatis ut, placerat ut odio. Fusce scelerisque ornare tincidunt. Vivamus placerat laoreet odio, eu varius orci auctor ut.

Wynik renderowania:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin eget quam eu semper. Cras maximus ligula vitae aliquet tempor. Maecenas fermentum consectetur faucibus. Vestibulum non aliquam ligula. Pellentesque sit amet ipsum felis. Duis dapibus dignissim justo eget blandit. Etiam consectetur nulla vitae est suscipit faucibus. Cras gravida neque viverra elit varius maximus. Donec lacinia velit sit amet magna eleifend congue. Nunc ut feugiat urna, eu accumsan nisl. Maecenas tincidunt fringilla risus, eu placerat turpis aliquam nec. Quisque risus tellus, elementum quis venenatis ut, placerat ut odio. Fusce scelerisque ornare tincidunt. Vivamus placerat laoreet odio, eu varius orci auctor ut.

Notatki w stopce

Kod Markdown:

Notatka w stopce.[^1]
[^1]: To jest notatka w stopce.

Inna notatka w stopce[^2]
[^2]: To jest inna notatka w stopce.

Wynik renderowania:

Notatka w stopce.¹

Inna notatka w stopce²

Linki

Kod Markdown:

[Jakaś strona](http://jakasstrona.pl)
<mail@example.com>
<http://jakasstrona.pl>
http://innastrona.pl

Wynik renderowania:

Jakaś strona
mail@example.com
http://jakasstrona.pl
http://innastrona.pl

Ikony

Kod Markdown:

Bootstrap Icons @[]{.bi .bi-airplane-fill} @[]{.bi .bi-alarm-fill} @[]{.bi .bi-android2}
Font Awesome @[]{.fa .fa-balance-scale} @[]{.fa .fa-calendar} @[]{.fa .fa-bell}

- To jest ikona Bootstrap Icons :bi-emoji-smile:
- To jest ikona Font Awesome :fa-smile:
- To jest ikona Emoji :smile:

Wynik renderowania:

Bootstrap Icons Font Awesome

• To jest ikona Bootstrap Icons
• To jest ikona Font Awesome
• To jest ikona Emoji 😄

Więcej informacji w tym dokumencie.
Ikony Bootstrap Icons: https://icons.getbootstrap.com/.
Ikony Font Awesome: https://fontawesome.com/icons.

Kolorowy i powiększony tekst

Kod Markdown:

To jest @[kolorowy tekst]{.text-success} a to jest @[powiększony tekst]{.fs-3}

Wynik renderowania:

To jest kolorowy tekst a to jest powiększony tekst

Dekoracje

Kod Markdown:

~To jest tekst podkreślony~
~~To jest tekst przekreślony~~

Wynik renderowania:

To jest tekst podkreślony
To jest tekst przekreślony

Zadania

Kod Markdown:

- [ ] opcja checklist 1
- [x] opcja checklist 2
- [ ] opcja checklist 3

- ( ) opcja radiolist 1
- (o) opcja radiolist 2
- ( ) opcja radiolist 3

- {a} ikona zakończone
- {b} ikona odrzucone
- {7} ikona pytanie
- {bi bi-exclamation-triangle} wybrana ikona Bootstrap

Wynik renderowania:

• opcja checklist 1
• opcja checklist 2
• opcja checklist 3
• opcja radiolist 1
• opcja radiolist 2
• opcja radiolist 3
• ikona zakończone
• ikona odrzucone
• ikona pytanie
• wybrana ikona Bootstrap

Więcej opcji w tym dokumencie.

Tabele

Kod Markdown:

| Lp. | Nazwa         | Postęp                   |
| --- | ------------- | ------------------------ |
|  1  | Lorem Ipsum 1 | %[50%](50%){.bg-danger}  |
|  2  | Lorem Ipsum 2 | %[ ](20%){.bg-primary}   |
|  3  | Lorem Ipsum 3 | %[90%](90%){.bg-success} |

Wynik renderowania:

Lp.	Nazwa	Postęp
1	Lorem Ipsum 1	50%
2	Lorem Ipsum 2
3	Lorem Ipsum 3	90%

Alerty

Kod Markdown:

> [!PRIMARY](Primary) 
> Treść alertu

> [!SECONDARY](Secondary) 
> Treść alertu

Wynik renderowania:

Objaśnienia

Kod Markdown:

> [INFO](Objaśnienie) 
> Treść objaśnienia, wartości w [] podobnie jak alerty tylko ^ oznacza objaśnienie a nie alert

> [^INFO](Objaśnienie) 
> Treść objaśnienia z ikoną

Wynik renderowania:

Listy definicji

Kod Markdown:

Tytuł (DT)
: linia1 (DD)
: linia2 (DD)
: linia3 (DD)

Wynik renderowania:

Tytuł (DT)

linia1 (DD)

linia2 (DD)

linia3 (DD)

Komentarz blokowy

Kod Markdown (z widocznymi spacjami ␣␣):

> Komentarz blokowy␣␣
> Druga część komentarza
> > Zagnieżdżony komentarz blokowy␣␣
> > Druga część zagnieżdżonego komentarza
> > > Bardziej zagnieżdżony komentarz blokowy␣␣
> > > Druga część bardziej zagnieżdżonego komentarza

Wynik renderowania:

Komentarz blokowy
Druga część komentarza

Zagnieżdżony komentarz blokowy
Druga część zagnieżdżonego komentarza

Bardziej zagnieżdżony komentarz blokowy
Druga część bardziej zagnieżdżonego komentarza

Dlaczego są tam dziwne symbole ␣␣?

␣ to widoczny symbol spacji (U+2423 – OPEN BOX). W przykładzie użyte są dwie spacje ␣␣ na końcu linii, ponieważ w Markdown:

➤ Dwie spacje na końcu linii = wymuszone złamanie linii ( <br> )

Czyli:

• jedna spacja → nie robi nic
• dwie spacje → przeglądarka przenosi następny wiersz do nowej linii

Dlatego w przykładzie każda linia, która ma się przełamać w obrębie cytatu (>), kończy się dwiema spacjami.

Notatka

Dwie spacje na końcu pierwszej linii tekstu są traktowane jako znacznik <br> i powodują przejście do nowej linii przy renderowaniu Markdown. Symbol ␣ jest użyty tylko po to, aby użytkownik zobaczył, gdzie znajdują się te spacje — w normalnym Markdown są to po prostu „niewidoczne” spacje.

Iframe

Kod Markdown:

^[Tytuł iframe](link do iframe){.w-100 .d-block .mx-auto}

Wynik renderowania:

Zdjęcia

Kod Markdown:

![Alt](adres zdjęcia)
![Alt](adres zdjęcia){.w-50 .d-block .mx-auto}

Wynik renderowania:

Zdjęcia z opisem

Kod Markdown:

@figure [Alt](adres zdjęcia) "Opis zdjęcia"
@figure [Alt](adres zdjęcia){.w-50 .d-block .mx-auto} "Opis zdjęcia"{.text-center} {#figure}

Wynik renderowania:

Picture

Kod Markdown:

!picture [Alt](pic.webp || pic.jpg)
!picture [Alt](pic.webp || pic.jpg){.w-100}

Media

Kod Markdown:

{Tytuł wideo}(video)(link do video)
{Tytuł wideo}(video)(link do video){.w-100 .d-block .mx-auto}
{Tytuł audio}(audio)(link do audio)
{Tytuł audio}(audio)(link do audio){.w-100 .d-block .mx-auto}