Screenshot

Robimy screenshot z naszego ulubionego IDE, wrzucamy jako obrazek w blogpoście i jesteśmy w domu. Może i jest to jakieś rozwiązanie, niemniej ograniczamy sobie w ten sposób możliwość późniejszej edycji tego elementu treści.

Screenshot z Android Studio, domyślna ciemna skórka.

Dodatkowo, obrazki zapychają nam miejsce na serwerze i zwiększają czas ładowania się strony.

Po prostu <code>

Po co strzelać do komara z armaty? Przeglądarki wyświetlą treść w znaczniku <code> z fontem monospace. Proste do wyłapania przez czytelnika,

Zero css, po prostu HTML, tak jak moja przeglądarka to renderuje.
<h1>This is header 1</h1>
<p>This is paragraph</p>
<code>
    This is code
</code>

Owszem, <code> będzie najprostszym rozwiązaniem. Pamiętajmy jednak, że musimy sobie go po swojemu sformatować. Do jednolinijkowców jak znalazł, jednak na dłuższe listingi kodu lepiej rozważyć inne rozwiązania.

Github Gist

Hosting listingów kodu, dostarczany przez Githuba. Można powiedzieć, że jest to code listing as a service. Zapewni nam hosting, podstawową kontrolę wersji a także kolorowanie składni języka w którym jest nasz snippet.

usecase.kt
GitHub Gist: instantly share code, notes, and snippets.

Warto też wspomnieć, że ta forma prezentowania kodu w blog poście jest standardem w niektórych publikacjach na Medium - na przykład ProAndroidDev:

Krótki listing - po prostu na ciemniejszym tle, dłuższy listing - wykorzystany Gist 

Przyjęli tam zasadę, że dla listingów kodu dłuższych niż 5 linii, powinno się użyć właśnie Gista do pokazywania kodu, aby wykorzystać kolorowanie składni.

Nie wszystko jest jednak takie kolorowe. Problem z Gistem jaki napotkałem rozwijając bloga KotlinTestin.com był taki, że w trybie ciemnym strony snippet wyglądał paskudnie:

wrrrrrrrr

Dark mode na blogu KotlinTesting to dla mnie must have, dlatego poszedłem dalej i postanowiłem sprawdzić bardziej customowe rozwiązania.

Prism.js

Biblioteka JS + CSS do kolorowania składni. To rozwiązanie działa w tym momencie na moim blogu KotlinTesting.com. Sprawdza się całkiem nieźle, choć ma swoje problemy.

Jak tego użyć?

W GhostCMS (a także w większości silników blogowych) mamy opcję automatycznego dodania czegoś dodatkowego do każdej strony - w przypadku Ghosta są to {{ghost_head}} i {{ghost_foot}}, które zostaną dodane w odpowiednie miejsca w docelowym HTML, byśmy mogli na poszczególnych stronach załadować dodatkowe pliki CSS i JS. Tak też na górze, w headzie, dodamy stylesheet, a na dole skrypty ładujące.

{{ghost_foot}} - w panelu administracyjnym GhostCMS

Tutaj przykład na samym HTML:

<body>

<header>
    <link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>
</header>

<h1>This is header 1</h1>
<p>This is paragraph</p>
<pre class="language-kotlin">

<code>
    class Presenter(
        private val view: View,
        private val router: Router,
    ) {
        fun start() {
            // do things
        }

        fun settingsClick(){
            // open proper screen
        }
    }
</code>
</pre>
<!-- script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-ROhjG07IRaPZsryG77+MVyx3ZT5q3sGEGENoGItwc9xgvx+dl+s3D8Ob1zPdbl/iKklMKp7uFemLJFDRw0bvig==" crossorigin="anonymous"></script>

</body>
Na górze <header> z zaciągnietym CSS do Prisma, na dole skrypty JS potrzebne do parsowania snippetu na ładne spany.

Skrypt podmieni nam treść samego bloku <code> i wygeneruje odpowiednie spany, rozpoznając słowa kluczowe danego języka programowania.

Tak to się renderuje.

Nie jest tak kolorowo

Jednym z istotnych dla mnie problemów PrismJS jest problem z  kolorowaniem nazwy metody testowej w formie Stringa:

Kompilator to przyjmuje, a IDE (u mnie IntelliJ) rozpoznaje ten format nazwy funkcji i bez problemu koloruje odpowiednie znaki w kodzie. Sam Prism.js, przynajmniej w wersji 1.21, ma jeszcze z tym problemy.

Biorąc pod uwagę powyższe plusy i minusy: na swoich blogach zostanę na razie przy PrismJS, a gdy trzeba będzie coś napisać na Medium - to Gist od Githuba będzie odpowiednią formą prezentacji snippetów.


Poznaliśmy kilka opcji na skuteczne pokazywanie kodu źródłowego w blog poście, a także w ogólności na stronach internetowych. W następnym wpisie porzucimy na chwilę rozważania technologiczne i zastanowimy się czy bloga technicznego warto pisać w języku polskim, czy raczej po angielsku.