Nowa składnia Markdown dla Parsedown + Bootstrap 5: Więcej niż tylko tekst!

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 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

Skontaktuj sie ze mną

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:

@[To jest tekst warning]{.text-warning}

Przykład:

To jest tekst warning

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:

• opcja checklist 1
• opcja checklist 2
• opcja radiolist 1
• opcja radiolist 2

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:

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:

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}

Picture

Wstaw zdjęcie webp z alternatywnym zdjęciem png:

!picture [Alt](image.webp || image.png)

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
• 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.