Techniki syntax highlighting używa się najczęściej do wyróżniania elementów składniowych kodu źródłowego programu (np. słów kluczowych, komentarzy) w edytorze tekstu za pomocą koloru oraz atrybutów. Funkcja ta dostępna jest obecnie w większości programistycznych edytorach tekstu i we wszystkich narzędziach programistycznych.
Nic nie stoi na przeszkodzie, abyś sam cieszył się z funkcji: "Kolorowania składni", które oferują narzędzia programistyczne na Swoim blogu (w tym na blogger), czy też w Swoim projekcie programistycznym (np. w kodzie xhtml [html], wyprodukowanym z PHP).
Zademonstruję i opiszę użycie narzędzia SyntaxHighlighter w najnowszej wersji 3, które umożliwia technikę syntax highlighting. Demonstracja i opis będzie obejmował blogi (z głównym naciskiem na blogger) oraz strony internetowe (serwisy internetowe) w PHP, choć nie tylko.
ZACZYNAMY, powodzenia!:
Legenda:
a - odnosi się do bloga;
b - odnosi się do PHP;
Pierwszy krok
1a.: Umieść poniższy kod w szablonie Twojego bloga;1b.: Umieść poniższy kod w Twoim projekcie programistycznym w pliku PHP;
(Uwaga - dotyczy tylko opisu dla PHP: Możesz też pobrać wszystkie wymagane skrypty i zamiast internetowej lokalizacji skryptów [https://alexgorbatchev.com/pub/sh/current/...] - wprowadź Swoją lokalizację skryptów).
Często programiści w tym Ja, gdy tworzą projekty programistyczne pobierają wszystkie skrypty na Swój komputer (lokalnie), aby umieścić je w Swoim projekcie programistycznym, a następnie w projekcie na serwerze produkcyjnym do komercyjnego użytku.
Dlaczego? - a no dlatego, bo np. za 5 lat projekt z którego pobraliśmy skrypty może już nie istnieć lub np. serwer ze skryptami może chwilowo nie odpowiadać, mogą być prace konserwacyjne, a jak masz wszystkie skrypty u Siebie, to Ci nic nie grozi, Twój projekt programistyczny zawsze będzie funkcjonował.
Wady - w zasadzie tylko jedna, jak stworzysz projekt oddany do użytku komercyjnego z pobranymi skryptami, a w między czasie wyjdzie nowa wersja skryptów, komercyjna strona internetowa (komercyjny serwis internetowy) będzie korzystał ze starych wersji skryptów.
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.strings.viewSource = "Podgląd źródła"; SyntaxHighlighter.config.strings.print = "Drukuj"; SyntaxHighlighter.config.strings.copyToClipboard = "Kopiuj do schowka"; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.all(); </script>
Zaczerpnięty powyższy kod bazuje na źródle Twórcy narzędzia.
Akapit - Basic Steps
Patrz tutaj (język ang.).
Akapit - Basic Steps
Patrz tutaj (język ang.).
W powyższym kodzie są umieszczone skrypty wszystkich dostępnych w chwili pisania postu języków programowania wspieranych przez SyntaxHighlighter.
Ich lista jest dostępna na stronie Twórcy narzędzia.
Patrz tutaj (język ang.).
Ich lista jest dostępna na stronie Twórcy narzędzia.
Patrz tutaj (język ang.).
Skrypty z językami programistycznmi dołącza się dlatego, aby narzędzie SyntaxHighlighter, potrafiło je rozpoznać i właściwie "Pokolorować".
W związku z faktem, że blog jest dla wszystkich programistów Microsoft, Embarcadero (Borland) i OpenSource użyłem wszystkich dostępnych w danej chwili.
Następny krok (Krok II):
2a2b.: Teraz już możesz na Swoim blogu lub w Swoim projekcie programistycznym umieszczać "Kolorowanie składni";
Są dwie metody - każda ma swoje zalety i wady (patrz poniżej - Krok IV):
Pierwsza - I: <pre> method
Zaczynamy od przykładu:
Użycie (korzystamy z kolorowania dla JavaScript):
<pre class="brush: js">
/*** SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>
Wynik użycia:
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
Gdy kod programistyczny znajduje się pomiędzy: <pre> </pre>, czyli jest tekstem preformatowanym (więcej czytaj tutaj), wtedy nie może zawierać np. znaków: < i > muszą one zostać zamienione odpowiednio na tzw. encje: < i >
Konsekwencją tego jest fakt, że aby "Pokolorować", np. kod xhtml (html) - znacznika "a", należy zamienić <a href> na <a href>.
W powyższym przykładzie jest podobny przypadek, instrukcja JS:
counter <= 10
- w pliku xhtml (html) w części dotyczacej JavaScript wyprodukowanym z PHP ma postać:
counter <= 10
Jeśli narzędzie programistyczne nie zamienia kodu na encje, a chcemy użyć metody: <pre> method, musimy to zrobić ręcznie.
Można posłużyć się narzędziem do zamiany kodu na kod z encjami:
Polskie narzędzie online do zamiany kodu xhtml (html) - "tekstu" na kod xhtml (html) - "tekst" z encjami
Zaczerpnięty powyższy opis metody I - bazuje na źródle strony Twórcy narzędzia.
Akapit - <pre> method
Patrz tutaj (język ang.).
Akapit - <pre> method
Patrz tutaj (język ang.).
Druga - II: <script /> method
Zaczynamy od przykładu:
Użycie (korzystamy z kolorowania dla JavaScript):
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/*** SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
//it works!
}
]]></script>
Wynik użycia:
W przypadku tej metody nie ma co się rozpisywać wystarczy na początku każdego kolorowanego kodu wstawić:
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
a na końcu, gdy już nie chcemy kolorować wstawić:
]]></script>
Zaczerpnięty powyższy opis metody II - bazuje na źródle strony Twórcy narzędzia.
Akapit - <script /> method
Patrz tutaj (język ang.).
Akapit - <script /> method
Patrz tutaj (język ang.).
Krok III (konfiguracja):
Konfiguracja jest opisana na stronie Twórcy narzędzia.
Patrz tutaj (język ang.).
oraz
Patrz tutaj (język ang.).
Patrz tutaj (język ang.).
oraz
Patrz tutaj (język ang.).
Ja na swoim blogu użyłem następującej konfiguracji i się z Wami ją podzielę.
Na bazie pierwszego linku dokonałem konfiguracji:
Pierwsza linia kodu jest ważna dla blogów - musi być ustawiona na true, gdy umieszczamy narzędzie SyntaxHighlighter na blogger. Gdy korzystamy z SyntaxHighlighter, we własnych projektach programistycznych ustawaimy na false.
Druga, trzecia i czwarta linia zmienia domyślne angielskie nazwy na ich odpowiedniki polskie.
Druga linia dla opisu: pokaż źródło.
Trzecia linia dla opisu: drukowanie.
Czwarta dla opisu: kopiowanie dla schowka.
W starszych wersjach SyntaxHighlighter, czyli w wersji 2.1 i starszych, każde "Kolorowanie składni" miało własne menu z 4 ikonami: "viewSource", "print", "copytoclipboard" oraz "?".
W wersji 3 nie wiadomo dlaczego to menu się nie pojawia, ale na wszelki wypadek postanowiłem przetłumaczyć te ikony na język polski.
Być może już niedługo pojawi się uaktualnienie wersji 3, która będzie wyświetlała menu.
Zrzut ekranu z wersji 2 zamieszczam pod spodem, abyście wiedzieli o co chodzi:
Piąta linia mojej konfiguracji, wyłącza aktywne linki z "Kolorowanego składni" kodu, aby nie można na nie "klikać".
Na bazie drugiego linku dokonałem konfiguracji: Dzięki temu zmieniłem wygląd - szablon "Kolorowania składni".
Można wybierać z pośród kilku dostępnych szablonów.
Krok IV (wady i zalety obu metod z Kroku II):
Wady opiszę na przykładzie pierwszego "Kolorowania składni" tego posta, tym z 34 liniami.
Gdy używamy metody: <script /> method, każde wystąpnie </script>, zamyka "Kolorowanie składni", obojetnie czy było czy nie było: ]]>.
Jest to problem, gdyż nie można umieszczać "Kolorowania składni" z otwartym <script> i zamknietym </script>. A jak widzicie w moim przypadku jest użyte otwarcie i zamknięcie script. Taki jest kod w "Kolorowaniu składni" i taki musi pozostać.
Zdecydowałem się w takim razie na użycie w moim mniemaniu metody trudniejszej, czyli metody: <pre> method. I wszystko byłby ładnie, ale musiałem dokonać zamiany kodu JavaScript, na kod JavaScript z encjami.
Poszło bez problemu.
Metoda: <pre> method się sprawdza, poza jednym ale: jak ładuję się strona www - mój blog, przez krótką chwilę widzicie, czysty tekst bez "Kolorowania składni", dopiero po 1 sekundzie zamienia się na kod JavaScript "Pokolorowany".
Metoda: <script /> method nie ma tego problemu, gdy strona się ładuję nic się nie wyświela, po załadowaniu wyświetla się od razu "Pokolorowany" kod - też to możecie zaobserwować na moim blogu w tym post-cie, w każdym innym "Kolorowaniu składni", poza tym z 34 liniami.
W zasadzie w przypadku metody: <pre> method, też można obejść ten problem, poprzez nie zamienianie kodu na kod z encjami, ale jest to ryzykowane, bo "Pokolorowany" kod, może nie odpowiadać rzeczywistości. W moim przypadku gdy testowałem tego posta, jak nie dokonałem zamiany kodu JS na kod JS z encjami, pierwsze trzy linie nie odpowiadały rzeczywistości, brakowało na końcu znaków "/". Niestey nie ma na to rozwiązania - w każdym bądź razie narzędzie SyntaxHighlighter, tego nie umożliwia.
Podsumowanie - Moim Zdaniem: Używamy zawsze metody: <script /> method, a gdy jest konieczność, np. zamykania znacznika script, korzystamy z metody: <pre> method zawsze z kodem zamienionym na encje, pamiętając równocześnie o niedogodności związenej z ładowaniem strony www, o której wspominałem wcześniej.
Trzeba być elastycznym w doborze metod!!!
Na strony Twórcy narzędzia są opisane wady i zalety (o których wspominałem i inne nie poruszone w tym post-cie) każdej metody.
Akapit - <pre> method - PROBLEMS
Akapit - <script /> method - PROBLEMS
Patrz tutaj (język ang.)
Akapit - <pre> method - PROBLEMS
Akapit - <script /> method - PROBLEMS
Patrz tutaj (język ang.)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
3 komentarze - Zabacz wszystkie komentarze.
Prześlij komentarz