Rozdział 9: Osadzanie kodu i kolorowanie składni

Zaczynamy Część II — Bogata treść. Render Markdown mamy już z Rozdziału 5 (MarkdownExtension) — teraz sprawimy, że treść artykułu wygląda profesjonalnie: bloki kodu z kolorowaniem składni (highlight.js), kod inline i porządne stylowanie treści. Na koniec przegląd elementów Markdown, których możesz używać w artykułach.

Stan wejściowy: działający filtr |markdown z Rozdziału 5. Tu dokładamy warstwę wizualną — bez zmian w PHP, wyłącznie CSS/JS na stronie artykułu.

Bloki kodu w Markdown

MarkdownExtension z Rozdziału 5 zamienia ogrodzony blok kodu (fenced code) na HTML. Ważne, by podać język po trzech backtickach:

```php
#[Route('/blog/{slug}', name: 'app_blog_show')]
public function show(string $slug): Response
{
    // …
}
```

CommonMark wygeneruje z tego:

<pre><code class="language-php">#[Route('/blog/{slug}', name: 'app_blog_show')] …</code></pre>

Kluczowa jest klasa language-php — po niej biblioteka kolorująca rozpozna język. Bez podania języka blok i tak się wyrenderuje, ale bez kolorów.

Kolorowanie składni (highlight.js)

Kolorowanie robimy po stronie przeglądarki biblioteką highlight.js (bez żadnego kodu PHP). Dodajemy ją na stronie artykułu — motyw CSS w {% block stylesheets %} i skrypt w {% block javascripts %} szablonu show.html.twig:

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => hljs.highlightAll());
    </script>
{% endblock %}

• hljs.highlightAll() znajduje wszystkie <pre><code class="language-…"> na stronie i koloruje je.
• Motyw github-dark — ciemne tło bloków, jak w tym tutorialu. Do wyboru są dziesiątki motywów (wystarczy podmienić plik CSS).
• To rozwiązanie CDN — zero konfiguracji buildu. (Docelowo można je wciągnąć przez Vite/AssetMapper, ale na potrzeby bloga CDN w zupełności wystarcza.)

Bezpieczeństwo bez zmian: highlight.js operuje na już zrenderowanym, oczyszczonym HTML-u (html_input: strip z Rozdziału 5) — nie wykonuje kodu z treści, tylko go koloruje.

Kod inline i stylowanie treści

Sam Markdown daje surowy HTML — dopracujmy jego wygląd klasą .blog-content (kontener, w którym renderujemy {{ article.content|markdown }}). Style dokładamy do {% block stylesheets %}:

/* Bloki kodu */
.blog-content pre {
    border-radius: .5rem;
    margin: 1.25rem 0;
    font-size: .875rem;
}

/* Kod inline — pojedyncze `backticki` w tekście */
.blog-content code:not(pre code) {
    background: #f1f3f5;
    color: #d63384;
    padding: .15em .4em;
    border-radius: .25rem;
    font-size: .875em;
}

/* Nagłówki, tabele, cytaty, obrazki */
.blog-content h2 { font-size: 1.5rem; border-bottom: 2px solid #e9ecef; padding-bottom: .4rem; }
.blog-content p  { line-height: 1.8; margin-bottom: 1.1rem; }
.blog-content blockquote {
    border-left: 4px solid #0d6efd;
    background: #f8f9fa;
    padding: .75rem 1.25rem;
    border-radius: 0 .375rem .375rem 0;
}
.blog-content table { width: 100%; border-collapse: collapse; }
.blog-content th, .blog-content td { border: 1px solid #dee2e6; padding: .5rem .75rem; }
.blog-content img { max-width: 100%; border-radius: .5rem; }

• code:not(pre code) — celujemy tylko w kod inline (pojedyncze backticki), nie w bloki <pre> (te koloruje highlight.js). To ważne rozróżnienie — inaczej styl inline nadpisałby motyw bloków.
• img { max-width: 100% } — obrazki w treści są responsywne (przydadzą się w Rozdziale 10).

Przegląd elementów Markdown

Dzięki CommonMark + GitHub Flavored Markdown (z Rozdziału 5) w treści artykułu masz do dyspozycji:

Pamiętaj: surowy HTML wpisany w treść jest usuwany (html_input: strip z Rozdziału 5). Cała bogata treść powstaje z Markdown — bezpiecznie i przewidywalnie.

Podsumowanie

Treść artykułu wygląda teraz profesjonalnie:

• ✅ bloki kodu z języka (```php) — MarkdownExtension generuje <pre><code class="language-php">,
• ✅ kolorowanie składni przez highlight.js (CDN, motyw github-dark, hljs.highlightAll()),
• ✅ kod inline i pełne stylowanie .blog-content (nagłówki, tabele, cytaty, obrazki),
• ✅ przegląd Markdown (GFM: tabele, listy zadań, przekreślenia, autolinki),
• ✅ działający stan: artykuł z blokami kodu wyświetla się z kolorami, a cała treść jest ładnie sformatowana.

W Rozdziale 10 dodamy obrazki — inline w Markdown oraz galerię powiązaną z artykułem przez encję BlogMedia.