Przejdź do głównej treści

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

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:

;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
50%
2 Lorem Ipsum 2
3 Lorem Ipsum 3
90%

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:

Primary

To jest alert Primary

Objaśnienie

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}
Obraz z przykładowym zdjęciem
Przykładowe zdjęcie

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.

Kategorie: pozostałe

Tagi: markdown

Powiązane wpisy

Brak powiązanych wpisów.

TrapGraphic trap

Informacja o cookies

Moja strona internetowa wykorzystuje wyłącznie niezbędne pliki cookies, które są wymagane do jej prawidłowego działania. Nie używam ciasteczek w celach marketingowych ani analitycznych. Korzystając z mojej strony, wyrażasz zgodę na stosowanie tych plików. Możesz dowiedzieć się więcej w mojej polityce prywatności.