Kolorowanie kodu Syntax w Ghost

Jeśli jesteś programistą lub piszesz strony w HTML, CSS, PHP, JS i chcesz na blogu podzielić się swoimi kawałkami kodu warto pomyśleć o kolorowaniu składni Syntax. Można to zrobić na każdej stronie www w bardzo prosty sposób. Ja pokażę to na przykładzie Ghost, ale analogicznie można to zrobić na dowolnej stronie HTML.

Instalacja uniwersalna PrismJS

W panelu administracyjnym przechodzimy do sekcji Code Injection i w sekcji Blog Header dodajemy plik CSS:

https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css

Natomiast w sekcji Blog Footer dodajemy plik JS:

https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js

I to tyle. Od teraz cieszymy się ładnym wyświetlaniem kodu HTML czy CSS na naszym blogu.

Więcej informacji o samym PrismJS znajdziecie na stronie projektu na Github:

Prism na Github

Instalacja PrismJS w szablonie

1. Przejdź do strony pobierania PrismJS, wybierz swój szablon, dodaj języki które cię interesują.
2. Pobierz plik .css oraz .js na dole strony PrismJS.
3. Skopiuj plik prism.js do ghost/content/themes/casper/assets/js
4. Skopiuj plik prism.css do ghost/content/themes/casper/assets/css
5. W pliku ghost/content/themes/caspter/deafult.hbs dodaj link do prism.css pod tagiem {{! Styles'n'Scripts }}:

 {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

6. In the same file, add a script tag to include prism.js:

{{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

Instalacja HighlightJS

Dobra i fajną alternatywą dla PrismJS jest skrypt HighlightJS. Teretycznie działa bardzo podobnie, posiada jednak ogromną bibliotekę skórek/templatów. Jego instalacja jest równie prosta co PrismJS. W pierwszej kolejności musimy dodać interesujące nas języki i pobrać skrypt i pliki CSS na dysk.

Pobierz HighlightJS

W panelu administracyjnym przechodzimy do sekcji Code Injection i w sekcji Blog Header dodajemy plik CSS:

<link rel="stylesheet" href="{{asset "css/default.css"}}">

Oczywiście zamiast pliku default.css możemy użyć pliku ze skórka którą wybraliśmy na stronie.

Natomiast w sekcji Blog Footer dodajemy plik JS:

<script src="{{asset "js/highlight.pack.js"}}"></script>
<script>hljs.initHighlightingOnLoad();</script>

Gotowe !! I tak w kilku prostych krokach możemy mieć kolorowanie składni kodu w językach, które wybraliśmy i zdefiniowaliśmy pobierając skrypt. Z całą pewnością ułatwi to pokazywanie naszego kodu innym i pozwoli na łatwiejsze rozeznanie się w nim. A wy w jaki sposób kolorujecie składnie na swoich blogach lub stronach ??