Warsztat: Kolorowanie kodu
Przygotowanie
- Zanim pobierzesz bibliotekę ze wskazanego źródła - przestudiuj treść zadania
- Wejdź do katalogu swojej Witryny i przygotuj katalog
assets/prism-lib/w którym umieścisz pobrane pliki biblioteki - Na witrynie projektu wybierz Języki, które biblioteka będzie kolorować oraz Pluginy, które będą uzupełniać działanie biblioteki
- Umieść pobrane pliki biblioteki w katalogu z punktu #2 oraz podlinkuj do nich w przygotowanym pliku
article.html - Przygotuj fragmenty kodów w wybranych językach (
HTML,CSS,JavaScript,PHP) oraz przetestuj działanie biblioteki
Na podstronie pobierania należy spersonalizować bibliotekę do własnych potrzeb, co oznacza wybór:
- Rozmiaru rdzenia biblioteki: Minified (skompresowana i mało czytelna) lub Development (nieskompresowana i czytelna)
- Schemat kolorystyczny dla kontenera prezentującego kod źródłowy (możliwość wybrania jednego szablonu kolorystycznego)
- Wybranie, które moduły kolorowania języków zostaną włączone w skład biblioteki
- (następna grafika) Wskazanie, które dodatkowe funkcjonalności biblioteka Prism ma oferować (mogą one wymagać ręcznej korekty CSS lub dostosowania w kodzie JS)
Przed pobraniem plików biblioteki należy jeszcze wskazać, które dodatkowe funkcjonalności biblioteka Prism ma oferować, następnie należy ręcznie pobrać dwa oddzielne pliki z kodem biblioteki oraz arkusz z wyglądem (regułami kolorowania składni) wskazanych języków.
Umieść pobrane pliki biblioteki Prism w następującej strukturze katalogów w folderze assets/prism lub dedykowanym folderze (nazwij katalog):
./katalog-witryny-z-szablonu
├── inne-katalogi
├── libs-2-prism
│ ├── prism.css
│ └── prism.js
├── index.html
└── article.htmlW dokumencie, w którym ma zostać użyta biblioteka kolorująca kod źródłowy muszą zostać załączone* dwa pliki:
Arkusz styli CSS (nazwa pliku jak nazwano pobrany plik; instrukcja załączająca umieszczona w znaczniku
head)Skrypt JavaScript (j/w oraz znacznik skryptu powinien zostać umieszczony przed zamknięciem znacznika
</body>)
<!DOCTYPE html>
<html>
<head>
...
<link href="prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
* adres załączanych plików w przykładzie jest lokalny, lecz można podać również adres URL serwerów CDN (Content Delivery Network), co będzie wymagało wskazania również pliku Autoloader dobierającego samodzielnie kolorowane języki
W dokumencie, w którym ma zostać przedstawiony kod źródłowy wybranego języka musi posiadać jedną z dwóch form zapisu nazwy klasy: language-xxxx lub skrócony lang-xxxx oraz zapisu kodu - jak na przykładach odpowiednio:
kod PREFORMATOWANY (wielolinijkowy, użyty w przykładzie język JavaScript i PHP):
<pre><code class="language-php">
<?php
echo phpinfo();
?>
</code></pre><pre><code class="language-javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</code></pre>lub LINIOWY (użyty w przykładzie język CSS):
<code class="language-css">p { color: red }</code>