Nowa składnia Markdown dla Parsedown + Bootstrap 5.3: Więcej niż tylko tekst!
Opublikowano: 2025-08-20 przez admin

Markdown to jedno z najwygodniejszych narzędzi do szybkiego tworzenia treści — ale czy kiedykolwiek brakowało Ci kolorów, ikon, interaktywnych elementów, czy ładnie sformatowanych komponentów Bootstrap?
Dzięki rozszerzeniu silnika ParsedownExtra i ParsedownTasks o nowe znaczniki, Markdown wchodzi na zupełnie nowy poziom.
Poznaj rozszerzoną składnię, która łączy prostotę Markdowna z możliwościami frameworka Bootstrap 5.3 oraz bibliotek ikon Bootstrap Icons i Font Awesome.
Elementy z atrybutami
Dodawaj elementy HTML wraz z atrybutami takimi jak id
, class
, target
:
### Nagłówek trzeciego poziomu{.text-success}
[Tekst linka](https://example.com){.link-dark target=_blank}
Nagłówek trzeciego poziomu
Ikony w linii tekstu
Dodaj ikony dokładnie tam, gdzie ich potrzebujesz — bez HTML-a! Obsługiwane są zarówno Bootstrap Icons, jak i Font Awesome:
;bi bi-airplane-fill; ;bi bi-alarm-fill; ;fa fa-bell;
Przykład:
Kolorowy tekst
Chcesz wyróżnić fragment zdania lub komunikat? Użyj kolorowego tekstu zgodnego z klasami Bootstrap:
;text-primary~To jest tekst primary;
;text-success~To jest tekst success;
Przykład:
To jest tekst primary
To jest tekst success
Checklisty i Radiolisty
Zamień zwykłe listy na interaktywne zadania:
- [ ] opcja checklist 1
- [x] opcja checklist 2
- ( ) opcja radiolist 1
- (o) opcja radiolist 2
Przykład:
Statusy z ikonami
Szybko oznacz statusy elementów dzięki prostym skrótom:
- {a} zakończone
- {b} odrzucone
- {7} do wyjaśnienia
Przykład:
- zakończone
- odrzucone
- do wyjaśnienia
Tabele z paskami postępu
Użyj prostych komórek tabeli do tworzenia dynamicznych pasków postępu:
| 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} |
Przykład:
Lp. | Nazwa | Postęp |
---|---|---|
1 | Lorem Ipsum 1 | |
2 | Lorem Ipsum 2 | |
3 | Lorem Ipsum 3 |
Alerty i Objaśnienia
Twórz komunikaty i objaśnienia z nagłówkami:
> [!PRIMARY](Primary)
> To jest alert Primary
> [^INFO](Objaśnienie)
> To jest notatka pomocnicza
Przykład:
To jest alert Primary
To jest notatka pomocnicza
Zdjęcia z opisem
Wstaw dowolne zdjęcie i dodaj do niego opis:
@figure [alt text](https://example.com/image.jpg) "Opis zdjęcia"
@figure [alt text](https://example.com/image.jpg){.w-50 .d-block .mx-auto} "Opis zdjęcia"{.text-center}

Media i iframe’y bez HTML
Wstawiaj wideo, audio i iframe w minimalistycznej formie:
{Wideo Demo}(video)(https://example.com/demo.mp4)
{Podcast}(audio)(https://example.com/audio.mp3)
^[Formularz kontaktowy](http://www.dariuszrorat.ugu.pl/kontakt){.w-100 .d-block .mx-auto .vh-50}
Przykład:
Iframe:
Dlaczego warto?
Rozszerzona składnia to:
- Wydajność pisania bez HTML-a
- Czytelność kodu źródłowego
- Bezproblemowa integracja z Bootstrap 5.3
- Pełna kontrola nad formatowaniem i stylem
Jak zacząć?
Zainstaluj swój rozszerzony silnik Markdown oparty o ParsedownExtra
i ParsedownTasks
. Wystarczy, że załadujesz go w swoim projekcie PHP, a nowa składnia będzie natychmiast gotowa do użycia!
Chcesz przetestować składnię? Napisz do mnie!
Markdown nigdy nie był tak potężny.