Snippety kodu i kolorowanie składni

devspeaker.pl 2 lat temu

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.

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,

<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, iż 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ć, iż 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.

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

Przyjęli tam zasadę, iż 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, iż w trybie ciemnym strony snippet wyglądał paskudnie:

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.

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> <code> class Presenter( private val view: View, private val router: Router, ) { fun start() { // do things } fun settingsClick(){ // open proper screen } } </code> </pre>  <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 najważniejsze danego języka programowania.

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.

Idź do oryginalnego materiału